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

今回は関連記事をプラグインなしで表示させる方法を色々とやってみたいと思いますが、一応「関連記事」とは言っても、「同じタグ」で関連付けるか「同じカテゴリー」で関連付けるかという2通りの方法になります。今回紹介するのは「タグ」で関連付ける関連記事の表示です。

以前紹介したプラグインYARPPの場合は「記事タイトル」「内容」「カテゴリー」「タグ」全てで関連付けて関連スコアを出し、そのスコアに基づいて関連記事を表示させるのでプラグインを利用した方が精度は高いと思っています。そのため私の場合はYARPPを利用しています。
⇒関連記事を表示させるプラグイン【Yet Another Related Posts Plugin】の設定方法

ただ、プラグインを使わずにやりたいという気持ちは非常によく分かりますので、今回は色々チャレンジしてみます。

Amazonや楽天のアフィリエイトは「もしもアフィリエイト経由」がおすすめの理由

Amazonや楽天のアフィリエイトは認知度も高いので初心者におすすめのアフィリエイトです。ただ、幾つかデメリットもありますので紹介していきたいと思います。ついで...

affiliate150.com

2019.12.11

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

プラグイン無しで関連記事を表示させる方法は色々あるのですが、どれも結構複雑なコードが必要になります。それで関連記事を表示させたい部分（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」があると思いますのでそれを開きます。

「related.php」には次の記述をして「ファイルを更新（保存）」して下さい。

<div class="related">
<h3 class="related-title">こちらの記事もオススメです</h3>
<ul class="related-box">
   <?php
    $original_post = $post;
    $tags = wp_get_post_tags($post->ID);
    $tagIDs = array();
    if ($tags) {
        $tagcount = count($tags);
        for ($i = 0; $i < $tagcount; $i++) {
            $tagIDs[$i] = $tags[$i]->term_id;
        }
    $args=array(
    'tag__in' => $tagIDs,
    'post__not_in' => array($post->ID),
    'showposts'=>4,
    'caller_get_posts'=>1
    );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
  <li class="related-list">
  <a href="<?php the_permalink();?>" rel="bookmark" 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>

16行目に「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」で全体を囲む線（border:3px solid #1F5E73;）を入れてます。不要なら削除して下さい。後は表示される関連記事の文字の大きさ（font-size）、文字の高さ（line-height）、余白（padding）、リンクの色（color）をそれぞれ設定していますので、これもお好みで変更して下さい。

タグで関連付ける場合（サムネイル画像あり）

今度はタグで関連付けてサムネイル画像（アイキャッチ画像）も一緒に表示させるタイプです。各記事にアイキャッチ画像が設定されている前提です。アイキャッチ画像と記事タイトルを表示させますのでこんな感じ。

この場合には「related.php」の中身はこのようにします。

<div class="related">
<h3 class="related-title">こちらの記事もオススメです</h3>
<?php
$tags = wp_get_post_tags($post->ID, array('orderby'=>'rand')); // 複数タグを持つ場合ランダムで取得
if ($tags) {
    $first_tag = $tags[0]->term_id;
    $args=array(
        'tag__in' => array($first_tag), // タグの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;
}
.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高速化Tips！｜ウェブソク

以上タグで関連付けた関連記事を表示させる方法でした。

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