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

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

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

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

スポンサーリンク
スマートフォン買取

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

前回のやり方とほとんど同じ方針でいきます。プラグイン無しで関連記事を表示させる方法は色々あるのですが、どれも結構複雑なコードが必要になります。それで関連記事を表示させたい部分(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になってます。これで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にしておけば横並びに2つづつ表示されます。

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

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

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

関連記事をプラグインなしで表示させる方法(カテゴリーで関連付け)”に24件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。サイドバーの広告変更したんですね!今見てみましたが、余白なども特に調整する必要はなさそうなので、スタイルシートもそのままでOKと思います。また、日時指定の関連記事ですが、おそらくプレビューの時だけかと思いますので、これも問題はないかと思います。

    もしそれ以外に不具合がでるような場合には再度コメント下さい。またチェックしてみますね!

  2. 乃風

    度々すみません、しげぞうさん。さっきの件ですが、記事を一般公開する時に、日時を指定しなければ、16個のアイコンに全く変化は見られないので、このままでいくことにします。ありがとうございました。

  3. 乃風

    こんはんは。いつもお世話になっております。「こちらの記事もオススメです」のところに、現在16個のアイコンを表示させているのですが、この16個のアイコンが、全て同じ画像が表示されてしまうようになりました。記事を新しく書き終えたら、日時を指定して予約済みにし、そしてそれをプリビューで表示させた時だけなのですが、これまでにこういうことはなかったので、気になっております。どのように回復させたらいいのでしょうか?

    サイドバーに出していたA8の広告を、昨晩削除しました。この操作を行ってから、今回のことが起きたように思います。これまでサイドバーに出していたA8の広告は、余白を少しカットする設定にしておりましたが、(サイドバーの)A8の広告を、昨晩削除した時に、その設定コードも一緒に削除しました。スタイルシートでも、何らかの削除が必要になりますか? 

    現在、サイドバーにバリューコマースの広告を出していますが、余白削除の設定は必要ないので、広告はそのまま使っています。よろしくお願いします。

  4. しげぞう 投稿作成者

    3uz様

    コメントありがとうございます!無事に反映されたようで良かったです!3uz様の言われるようにカテゴリー内の記事数が少ないと左からのスタートになりますよね。この関連記事の部分はfloatで左寄せにして、横並びにしてます。

    もしセンタリングをするのであれば「ul」タグで囲ってある部分全体を「div」で囲んでスタイルシートでセンタリングするといいかもしれませんね。「div class=”name”」のようにdivにクラス名を付けてその部分をセンタリングする感じでできるかも知れませんが、試してはいないので、できるかは分かりません。

    また時間のあいた時に試してできそうであれば追記しておきますね。