新着情報

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

パソコンから

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

スマホから

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

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

関連記事の表示をさせている 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') ?>

２行目です。ない事は無いと思いますが^^; 無い場合は記述してみて下さい。

まとめ

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

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

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

 → カスタマイズ方法一覧はこちら