関連記事をプラグインなしで表示させる方法（カテゴリーで関連付け）

前回は関連記事をプラグインなしで表示させる（タグで関連付ける）方法を紹介したので今回は「タグ」ではなくて「カテゴリー」で関連付ける方法をやってみたいと思います。

ただ、この場合は同じカテゴリー内の記事をランダムに表示させるという方法になりますので、「タイトル」「内容」「カテゴリー」「タグ」で関連付けるプラグイン「YARPP」の方が関連レベルは高いと思います。
⇒関連記事を表示させるプラグイン【Yet Another Related Posts Plugin】の設定方法

前回同様にリスト表示（画像なし）とサムネイル表示（画像あり）のバージョン2通り紹介していきます。

関連記事を表示させるための手順

前回のやり方とほとんど同じ方針でいきます。プラグイン無しで関連記事を表示させる方法は色々あるのですが、どれも結構複雑なコードが必要になります。それで関連記事を表示させたい部分（single.php）等にコードを書いて行く必要があります。

しかしながら前述したように結構複雑なコードを直接入れてしまうと後からゴチャゴチャして修正がしにくいので直接single.phpに書くのではなく、テーマフォルダに「related.php」というファイルを作成し、その中にゴチャゴチャコードを入れます。

それで設置する場所（single.php）でその作成した「related.php」を呼び出すコードを1行入れていく方針が分かりやすいかと思いますのでその方針でやっていきます。

テーマフォルダに「related.php」を作成する

ロリポップの場合で説明していきます。ロリポップにログイン後、ユーザー専用ページ⇒「WEBツール」⇒「ロリポップFTP」と進みます。

そんで自分のWordPressのフォルダ⇒wp-content⇒themes⇒子テーマ（私の場合はchild）と進みます。そして子テーマのフォルダ内に「新規ファイル作成」。

ファイル名は「related.php」として保存。内容はWordPressから書くので名前だけ付けて保存します。

保存できたらWordPressに戻りましょう。さて、ここからは「related.php」に色々記述をしていきますが、リスト表示（画像なし）とサムネイル表示（画像あり）の2種類を紹介します。

リスト表示（画像なし）のやり方

画像なしのシンプルなこんな感じにしていきます。

WordPressの管理画面から「外観」⇒「テーマの編集」を選択して先ほど追加した「related.php」を開き、次の記述をします。

<div class="related">
<h3 class="related-title">こちらの記事もオススメです</h3>
<ul class="related-box">
<?php
$categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得
if ($categories) {
    $args = array(
        'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得
        'post__not_in' => array($post->ID), // 表示している記事を除く
        'showposts'=>4, // 取得記事数
        'caller_get_posts'=>1, // 取得した記事の何番目から表示するか
        'orderby'=> 'rand' // 記事をランダムで取得
    ); 
    $my_query = new WP_Query($args); 
    if( $my_query->have_posts() ) { ?>
        <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li class="related-list">
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
        <?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
    <p class="no-related">関連する記事は見当たりません…</p>
<?php } } ?>
</ul>
</div>

「showposts」という部分が４になってます。これで4記事まで関連記事を表示させます。ここは好きな数字に変更して下さい。これで「related.php」が完成したので、これを「single.php」で呼び出すようにしましょう。

子テーマの「single.php」を開いて次の記述を探します（TwentyTwelveを利用してます）。

<nav class="nav-single">

テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に先ほど作成した「related.php」を呼び出します。ここにこのコードを挿入。

<?php get_template_part( 'related' ); ?>

こんな感じになります。

これで個別ページにカテゴリーで関連付けられた関連記事ができます。後は色や文字の大きさ、位置調整をしていきます。今度は子テーマのCSSに次の記述を追加します。

/* 関連記事全体 */
.related{
  margin-bottom:20px;
  border:3px solid #1F5E73;
}
/* 関連記事タイトル部分 */
h3.related-title {
  font-size: 18px;
  margin-bottom: 8px;
  padding: 10px;
  line-height: 25px;
}
/* 表示される各記事の調整 */
li.related-list {
  font-size: 15px;
  line-height: 18px;
  padding:8px;
  list-style: disc inside;
}
/* 各記事のリンク */
li.related-list a{
  font-weight:bold;
  color:#0066cc;
}
/* カーソルが乗った時のリンク */
li.related-list a:hover{
  color:#7a8285;
}
p.no-related {
  padding-left: 15px;
  margin-bottom: 15px;
}

これで一応完成です。表示を確かめてみて下さい。続いて画像あり（サムネイル表示）の場合の解説をしていきます。

サムネイル表示（画像あり）の場合

画像も一緒に表示させるこのような感じにしていきます。

途中までは同じで子テーマのフォルダに「related.php」を追加しておきます。WordPressの管理画面から「外観」⇒「テーマの編集」をクリックして追加した「related.php」を開き、次の記述をします。

<div class="related">
<h3 class="related-title">こちらの記事もオススメです</h3>
<?php
$categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得
if ($categories) {
    $args = array(
        'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得
        'post__not_in' => array($post->ID), // 表示している記事を除く
        'showposts'=>4, // 取得記事数
        'caller_get_posts'=>1, // 取得した記事の何番目から表示するか
        'orderby'=> 'rand' // 記事をランダムで取得
    ); 
    $my_query = new WP_Query($args); 
    if( $my_query->have_posts() ) { ?>
        <ul>
        <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li><?php the_post_thumbnail(array(150,150)); ?>
        <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p></li>
         <?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
    <p class="no-related">関連する記事は見当たりません…</p>
<?php } } ?>
</ul>
</div>

18行目この部分「thumbnail(array(150,150))」にはWordPressの設定⇒「メディア設定」で設定しているサムネイル画像のサイズを入れて下さい。後でCSSで画像の大きさも調整できます。

「related.php」を保存したらsingle.phpで呼びだすようにしておきます。子テーマの「single.php」を開いて次の記述を探します（TwentyTwelveを利用してます）。

<nav class="nav-single">

テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に先ほど作成した「related.php」を呼び出します。ここにこのコードを挿入。

<?php get_template_part( 'related' ); ?>

こんな感じになります。

これで個別ページにタグで関連付けられた関連記事ができます。後は色や文字の大きさ、位置調整をしていきます。

子テーマのCSSには次の記述を追加しておきます。

h3.related-title {
  font-size: 18px;
  margin-bottom: 8px;
  padding: 10px;
  line-height: 25px;
}

.related{
  padding-left:15px;}
 
.related ul{
  margin:0;
  padding:0;
  list-style:none;}
 
.related li a{
  display:block;
  padding:5px;
  color:0066cc;
  font-size:14px;
  text-decoration:none;}
 
.related li a:hover{
  background-color:#eeeeee;}
 
.related ul:after {
  content:"";
  display:block;
  clear:both;}
 
.related li {
  height: 200px;
  float: left;
  width: 150px;
  padding-right: 20px;
  overflow: hidden;
}

.related img {
  max-height:175px;
  float:left;
  width:150px;
  padding-right: 20px;
  margin-bottom: 10px;
}
.related-title{
  margin-bottom:15px;
  margin-top:15px;
  font-size:18px;
  padding-left:10px;
}
 
.related{
  margin-bottom:15px;
  border:3px solid #1F5E73;
}
p.no-related {
 padding-left: 15px;
 margin-bottom: 15px;
}

「.related li」という部分で「width」を150pxにしてますが、これは先ほど設定⇒メディアで確認したサムネイル画像の横幅にしておきましょう。もし画像を小さく表示したい場合にはここの「width」を100px程度にしておくとよいと思います。画像もそれに合わせて小さくなります。

同じく「.related li」の部分の「padding-right」が横並びの記事同士の間隔です。これを広くすると横並びの記事の間隔が狭くなります。

同じく「.related li」の部分の「height」が画像とタイトルを含む高さになります。この高さをはみ出す部分は見えなくなるように「overflow: hidden」としてます。タイトルの長さと画像の高さを考慮して数値変更して下さい。

「.related」で「border」を入れて関連記事全体を囲む線を入れてますが、必要なければ削除して下さい。

「.related-title」は関連記事のタイトル部分になりますので文字の大きさや余白、色等をお好みで設定して下さい。

それからスマートフォンで確認したときに画像のサイズが150pxだと大きすぎるのでスマートフォンの場合は表示される各記事それぞれの横幅をちょっと小さく100pxでまとめた方が良いと思います。100pxにしておけば横並びに２つづつ表示されます。

子テーマのCSSに次の記述をしてスマートフォンでのサイズ切り替えを行います。

@media screen and (max-width: 599px) {
 .related li {width:100px;}
}

以上カテゴリーで関連付けた関連記事を表示させる方法でした。

• ⇒WordPressカスタマイズまとめページに戻る
• ⇒WordPressの始め方や設定のまとめ