
関連記事のアイキャッチ画像を表示させる方法
パソコンから

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

スマホから

この様にアイキャッチ画像を表示させることで、別の記事を見てもらえる可能生を高めることが出来ます。 また、スマートフォンからの閲覧では、タイトル(リンク)同士が近い状態なので、タップしづらいという事もあります。
関連記事のアイキャッチ画像を表示させる方法
関連記事の表示をさせている PHPファイルを取り出します。
baserCMS を設置しているフォルダ内から blog_related_posts.php をダウンロードします。※ダッシュボードからアクセス出来ない場所なので、FTPソフトでアクセスします。
/lib/Baser/Plugin/Blog/View/Elements/
blog_related_posts.php


ダウンロードしたら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

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

ソースはこの様になっております。
<?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 ファイルに上書きしアップロードすれば、関連記事の部分にアイキャッチ画像が表示されるはずです。
そもそも関連記事が表示されない?
タグを付けているか
→ 関連記事は、記事のタグ(カテゴリーではない)を元に表示されます。当サイトを例にあげると【画像】というタグがついている記事が、このページの下部に表示されています。

また、複数のタグにも有効で、同じタグが付いている記事なら別のカテゴリーの記事も表示されます。
single.php に関連記事を表示する関数が表示されていない場合
→ テーマ内の single.php を確認/theme/ratio_3_2/Blog/default/

ソースの一番下の方に この様な記述がデフォルトであります。
<!-- /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 でオリジナルの装飾も出来ると思います。
お役に立てましたら、いいね!シェアして頂けると幸いです。
最後までご覧頂きありがとうございます。
→ カスタマイズ方法一覧はこちら