WordPress Twenty Fourteenに「関連記事」をプラグインなしで実装したときの備忘録になります。
function.phpに追記、phpファイルを新規に作って、single.phpで読み込み、cssで見た目を調整すればブログには必要不可欠の「関連記事」が表示できます。カテゴリー内の記事をランダムに表示してくれるので、ページ巡回に必須のカスタマイズだと思います。
【 環境 】WordPress : Twenty Fourteen
スポンサーリンク
アイキャッチ画像を設定します。
右のサイドバー下にある「アイキャッチ画像」メタボックスでサムネイル表示する画像を設定します。
メタボックスが表示されていない場合は、右上にある「表示オプション」を開いてアイキャッチ画像の項目にチェックをいれます。
アイキャッチ画像のサイズ指定をします。
新しい画像がアップロードされる際、WordPressがアイキャッチ画像を生成するサイズを指定します。
functions.php（子テーマ）に下記のコードを追記します。
add_image_size('thumb170',170,100,true);
かっこの中は左から順に「名前」「横幅」「高さ」になっています。「高さ」の次に「, ture」を追加すると切り抜き。「, False」を追加するとリサイズになります。
以上のように指定しなくても既存のアイキャッチ画像の使用もできます。
※functions.phpファイルの扱いにはバックアップをとって、十分にご注意ください。詳細については「WordPress functions.php 子テーマ作成～編集、追記方法について エラーを防ぐ！｜WP カスタマイズ」をご参考に。
新たにphpファイルを作成します。
コードを直接、挿入したい箇所に書き込んでもいいのですが、別のテンプレートファイルとして作成しておいて読み込むことにします。
<!--関連記事-->
<h3 class="rltd_pst_midashi">関連記事</h3>
<?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 5,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$query = new WP_Query($args); ?>
<?php if( $query -> have_posts() ): ?>
<?php while ($query -> have_posts()) : $query -> the_post(); ?>
<div class="related_posts">
<div class="related_posts_thumb">
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb170'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" width="170px" />
<?php endif; ?>
</a>
</div><!-- related_posts_thumb -->
<div class="related_posts_content">
<h4 class="related-entry-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h4>
<p class="rltd_pst_snippet"><?php echo mb_substr( strip_tags( $post->post_content ), 0, 60 ) . ''; ?></p>
<p class="rltd_pst_read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
</div><!-- related_posts_content -->
</div><!-- related_posts -->
<?php endwhile;?>
<?php else:?>
<p>同カテゴリーの関連している記事はありません。</p>
<?php
endif;
wp_reset_postdata();
?>
上記のコードを文字コード：Unicord UTF-8 BOM無しでphpファイル保存します。
ここではファイル名を「related_posts.php」として保存して、テーマの入ってるフォルダにアップロードします。
11行目：同カテゴリーの関連記事の数を指定します。この場合は５つ表示指定。
23行目：’thumb170′ → array(170,114) と差し替えると既存のサムネイルの使用ができます。
34行目：記事のテキスト内容の文字数を指定します。この場合は60文字表示指定。
「関連記事」をページに挿入しよう！
例えば記事の下に挿入する場合はsingle.php（子テーマ）の…
get_template_part( 'content', get_post_format() ); // Previous/next post navigation. twentyfourteen_post_nav();
24行目にさっきの「related_posts.php」を読み込みむため下記のコードを…
get_template_part( 'related_posts' );
追記します。
cssでレイアウトなどを設定しよう！
画像や文字のサイズなどをcssで設定します。
下記cssはご参考まで。
.rltd_pst_midashi {
clear: both;
font-size: 24px;
padding-bottom: 5px;
padding-top: 3px;
padding-left: 10px;
margin: 50px 0px 20px 0;
border-left: #ddd 8px solid;
padding-right: 10px;
}
.related_posts {
clear:both;
border-bottom: 1px #dedede dashed;
margin-bottom:10px;
}
.related_posts_thumb img {
width:170px;
float:left;
margin:0 20px 10px 0;
}
.related_posts_content h4 {
font-weight: bold;
font-size: 22px;
line-height: 24px;
margin-bottom:10px;
}
.rltd_pst_snippet {
margin:0;
line-height:20px;
}
.rltd_pst_read {
margin:0 0 10px 0;
display:block;
text-align:right;
}
参考記事：プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]
ひとこと
今回実装した「関連記事」は見事にランダムに表示してくれるので、記事にかたよりがないのが頼もしいです。
関連記事表示の「related posts」プラグインを以前使っていましたが、head内に自動で記述されるコードが本当に多かったことがきっかけで、今回プラグインが外せてhead内もかなりスッキリしました。
