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

WordPressの始め方や使い方まとめ

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

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

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

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

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

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

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

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

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

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

YARPPエラー-4

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

サイドバー-2

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

related-1

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

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

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

related-3

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' ); ?>

こんな感じになります。

related-4

これで個別ページにカテゴリーで関連付けられた関連記事ができます。後は色や文字の大きさ、位置調整をしていきます。今度は子テーマの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;
}

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

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

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

関連記事表示-1

途中までは同じで子テーマのフォルダに「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-6

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

<nav class="nav-single">

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

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

こんな感じになります。

related-4

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

子テーマの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;}
}

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

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

広告
【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」
広告
【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

コメント

  1. しげぞう より:
    2017年7月18日 11:13 AM

    乃風様

    コメントそれから報告もありがとうございます(^^)

    この関連記事に関してはプラグインではなくて、「related.php」で追加したんでしたっけ？多分そうだと思うのですが、サムネイル下の文字数（行数）を増やす事は可能です。ただ、はみ出す部分をCSSで隠す（overflow: hidden）というのはそのままが良いと思います。これがないとその下のサムネイルなどに記事タイトル文字が重なってしまうからです。

    どうしてももう1行増やしたいという事であればスタイルシート（CSS）に以下を追加でOKと思います。

    .related li {
    height: 250px;
    overflow: hidden;
}

    今の時点でサムネイルも含む部分の高さが230pxになってましたので、20px追加して250pxとして追加する感じです。今までよりも20px余白ができますので1行分くらい増えるかな？と思います。

    それからオススメの部分ですが、テーマ編集⇒「related.php」があるか確認して下さい。もしあるならそれを開いて「こちらの記事もオススメです」という記述があると思いますので、それを好きな記述に書き換えて下さい。

  2. 乃風 より:
    2017年7月17日 7:02 PM

    しげぞう博士様

    ご無沙汰しております。いつもありがとうございます。

    「こちらの記事もオススメです」という枠の中の、サムネイル下の文字（行数）のことです。以前にしげぞう博士に教えていただいた時、行数を最大に設定しました。それ以上増やせない事が、その時の操作で分かりました。

    でも、あと1行だけ増やしたいのですが、どうすればいいのでしょうか？　出来れば、はみ出した部分を隠すのではなく、表示させておきたいと思っております。

    それと、もう１点なのですが、「こちらの記事もオススメです」の「オススメ・・・」の部分の
    「オ」だけを、平仮名の「お」にしたいのですが、どうしたらいいのでしょうか？　大して変わりはないんですけどね。馴染みと好みの問題ですが・・・。(*^^)v

    どうぞよろしくお願いします。

123
タイトルとURLをコピーしました