ratio_3_2 のカスタマイズ方法

ブログ関連記事にアイキャッチ画像を表示させる方法【baserCMS ratio_3_2】

ブログ関連記事にアイキャッチ画像を表示させる方法【baserCMS ratio_3_2】

関連記事のアイキャッチ画像を表示させる方法

パソコンから

kanren1.png

こちらにアイキャッチ画像を表示させると
kanren2.png

スマホから

kanrensp1.jpg

この様にアイキャッチ画像を表示させることで、別の記事を見てもらえる可能生を高めることが出来ます。 また、スマートフォンからの閲覧では、タイトル(リンク)同士が近い状態なので、タップしづらいという事もあります。
スポンサードリンク

関連記事のアイキャッチ画像を表示させる方法

関連記事の表示をさせている PHPファイルを取り出します。

baserCMS を設置しているフォルダ内から blog_related_posts.php をダウンロードします。
※ダッシュボードからアクセス出来ない場所なので、FTPソフトでアクセスします。

/lib/Baser/Plugin/Blog/View/Elements/
blog_related_posts.php
kanren3.png

kanren4.png
ダウンロードしたらTeraPad等のエディタでファイルを開きます。心配な方はこの時点で、コピー(バックアップ)ファイルを作っておきましょう

中身はこの様になっております(baserCMS 3.0.12)
github にもあります。
<?php
/**
 * [PUBLISH] 関連投稿一覧
 * 
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2015, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2015, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Blog.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
$relatedPosts = $this->Blog->getRelatedPosts($post);
?>
<?php if ($relatedPosts): ?>
<div id="RelatedPosts">
<h4 class="contents-head">関連記事</h4>
<ul>
<?php foreach ($relatedPosts as $relatedPost): ?>
<li><?php $this->Blog->postTitle($relatedPost) ?></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>


これを書き換えていくのですが、今回は記事の一覧ページ(/news/)でアイキャッチ画像を出力しているコードを参考にする事にしました。

早速、ダッシュボードから news の【index.php】を見に行ってみると
/theme/ratio_3_2/Blog/default/index.php
kanren6.png

element(エレメント)の blog_loop_media を読み込んでいることが判りますので、そちらを見に行きます。
/theme/ratio_3_2/Elements/
kanren7.png

ソースはこの様になっております。
<?php
/**
 * 構成要素:ブログ記事ループ:メディア
 * Elements/blog_loop_media.php
 * 
 */
?>
<?php foreach ( $posts as $key => $post ): ?>
<?php
if( !isset( $h ) ) {
$h = 'h2';
}
if( !isset( $imgsize ) ) {
$imgsize = 'thumb';
}
if( !isset( $trim ) ) {
$trim = 70;
}

$class = array( 'media', 'post-' . ( $key + 1 ) );
if( $this->BcArray->first( $posts, $key ) ) {
$class[] = 'first';
} elseif( $this->BcArray->last( $posts, $key ) ) {
$class[] = 'last';
}
?>
<div class="<?php echo implode( ' ', $class ) ?>">
<a href="<?php echo $this->Blog->getPostLinkUrl( $post ); ?>">
<?php
$eye_chatch = $this->Blog->getEyeCatch( $post, array( 'link' => false, 'class'=>'media-object', 'imgsize' => $imgsize ) );
?>
<?php if( $eye_chatch ): ?>
<div class="media-left">
<?php echo $eye_chatch; ?>
<!-- /.media-left --></div>
<?php endif; ?>
<div class="media-body">
<?php echo '<' . $h . ' class="media-title">'; ?><?php $this->Blog->postTitle( $post, false ) ?><?php echo '</' . $h . '>'; ?>
<p class="media-date"><?php $this->Blog->postDate( $post, RATIO32_DATE_FORMAT ) ?></p>
<p class="media-excerpt"><?php $this->Blog->postContent( $post, true, false, $trim ) ?>...</p>
<!-- /.media-body --></div>
</a>
<!-- /.media --></div>
<?php endforeach; ?>
これを関連記事用に変えていきます。 先にダウンロードしたファイル blog_related_posts.php から

$this->Blog->getRelatedPosts($post);

という関数で関連記事を呼び出せる事が分かったので、上記のコードの該当部分にあてはめていきます。
 
スポンサードリンク

書き換えた実際のコードがこちら。

blog_related_posts.php の中身
<?php
/**
 * [PUBLISH] 関連投稿一覧
 * 
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2015, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2015, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Blog.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
$relatedPosts = $this->Blog->getRelatedPosts($post);
?>
<?php if ($relatedPosts): ?>
<div id="RelatedPosts">
<h4 class="contents-head">【関連記事】</h4>

<?php foreach ( $relatedPosts as $key => $relatedPost ): ?>
<?php
if( !isset( $h ) ) {
$h = 'h2';
}
if( !isset( $imgsize ) ) {
$imgsize = 'thumb';
}
if( !isset( $trim ) ) {
$trim = 70;
}

$class = array( 'media', 'post-' . ( $key + 1 ) );
if( $this->BcArray->first( $relatedPosts, $key ) ) {
$class[] = 'first';
} elseif( $this->BcArray->last( $relatedPosts, $key ) ) {
$class[] = 'last';
}
?>
<div class="<?php echo implode( ' ', $class ) ?>">
<a href="<?php echo $this->Blog->getPostLinkUrl( $relatedPost ); ?>">
<?php
$eye_chatch = $this->Blog->getEyeCatch( $relatedPost, array( 'link' => false, 'class'=>'media-object', 'imgsize' => $imgsize ) );
?>
<?php if( $eye_chatch ): ?>
<div class="media-left">
<?php echo $eye_chatch; ?>
<!-- /.media-left --></div>
<?php endif; ?>
<div class="media-body">
<?php echo '<' . $h . ' class="media-title">'; ?><?php $this->Blog->postTitle( $relatedPost, false ) ?><?php echo '</' . $h . '>'; ?>
<p class="media-date"><?php $this->Blog->postDate( $relatedPost, RATIO32_DATE_FORMAT ) ?></p>
<p class="media-excerpt"><?php $this->Blog->postContent( $relatedPost, true, false, $trim ) ?>...</p>
<!-- /.media-body --></div>
</a>
<!-- /.media --></div>
<?php endforeach; ?>
</div>
<?php endif ?>

上記のソースをコピーして blog_related_posts.php ファイルに上書きしアップロードすれば、関連記事の部分にアイキャッチ画像が表示されるはずです。

そもそも関連記事が表示されない?

タグを付けているか

→ 関連記事は、記事のタグ(カテゴリーではない)を元に表示されます。当サイトを例にあげると【画像】というタグがついている記事が、このページの下部に表示されています。
kanren8.png
kanren9.png
また、複数のタグにも有効で、同じタグが付いている記事なら別のカテゴリーの記事も表示されます。

single.php に関連記事を表示する関数が表示されていない場合

→ テーマ内の single.php を確認
/theme/ratio_3_2/Blog/default/
kanren10.png

ソースの一番下の方に この様な記述がデフォルトであります。
<!-- /Elements/blog_related_posts.php -->
<?php $this->BcBaser->element('blog_related_posts') ?>

<!-- /Elements/blog_comennts.php -->
<?php $this->BcBaser->element('blog_comments') ?>
2行目です。ない事は無いと思いますが^^; 無い場合は記述してみて下さい。

まとめ

今回は、blog_related_posts.php をご紹介したのですが、このエレメントに辿り着くのも初心者には中々難しいと思います^^; しかし、一つずつ辿っていけば、必ず辿り着けるものです。

パーツ(エレメント)があって表示結果があります。 このソースを参考に、表示させたい内容や CSS でオリジナルの装飾も出来ると思います。

お役に立てましたら、いいね!シェアして頂けると幸いです。
最後までご覧頂きありがとうございます。

 → カスタマイズ方法一覧はこちら
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework