プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]

関連記事

WordPress記事下などによくある関連記事をプラグインを使用しないで表示する方法です。

こんな感じで表示されます。

関連記事イメージ

左にサムネイル、右に記事タイトルと、内容の抜粋が表示されます。

スポンサーリンク
レクタングル(大)広告

functions.phpの編集

functions.phpを編集する前は必ずバックアップを取ってください。

アイキャッチを有効にする

functions.phpに以下の記述があるか確認してください。

add_theme_support('post-thumbnails');

大抵のテーマはあると思いますが、あればそのまま。なかったらfunctions.phpに追記してください。

これは、アイキャッチ画像を有効化する記述です。これがないと、投稿画面でアイキャッチが設定できません。

参考 関数リファレンス/add theme support

アイキャッチ設定項目が表示される

作成するサムネイルの大きさを指定する

次に、functions.php内に以下の記述があるか確認してください。

add_image_size('thumb100',100,100,true);

これは、簡単に言えば、作りたい大きさのサムネイルをWordpress側に作ってもらう関数です。

上のコードでは、100×100pxの大きさで画像の真ん中をくりぬいたサムネイルが作成されます。数値を変更すれば、自由に大きさを変更できます。

上記のコードがfunctions.php内になかったら追記してください。(既にあるサムネイルの大きさを使っても良いです。けど、今回のサンプルでは100×100pxのサムネイルを使用します。)

参考 関数リファレンス/add image size – WordPress Codex 日本語版

サムネイルの再生成

もしサムネイルを新たに作成するのであれば(add_image_sizeを追記した場合)、Regenerate Thumbnailsプラグインをインストールして、Wordpressダッシュボードの「ツール→Regenerate Thumbnailsを選択してください。

そして、「Regenerate All Thumbnails」ボタンを押してください。

Regenerate Thumbnails[2]

WordPressのメディアに登録されている画像すべてに新しいサイズのサムネイルが作成されます。画像が多くある場合は、数十分~数時間かかります。

related-entries.phpファイルの作成と編集

single.phpに関連記事を表示するPHPコードを挿入しても良いのですが、コード量が多いためsingle.phpの可読性が下がるため、今回は別にテンプレートファイルを作成します。

カスタマイズするテーマ内にrelated-entries.phpというファイルを作成してください。

そのファイルに以下のように記入します。

<?php
//カテゴリ情報から関連記事を10個ランダムに呼び出す
$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'=> 10,
  '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-entry">
      <div class="related-entry-thumb">
  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
        <?php echo get_the_post_thumbnail($post->ID, 'thumb100'); //サムネイルを呼び出す?>
        <?php else: // サムネイルを持っていないとき ?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" width="100px" />
        <?php endif; ?>
        </a>
      </div><!-- /.related-entry-thumb -->
      
      <div class="related-entry-content">
        <h4 class="related-entry-title"> <a href="<?php the_permalink(); ?>">
          <?php the_title(); //記事のタイトル?>
          </a></h4>
        <p class="related-entry-snippet">
       <?php echo mb_substr( strip_tags( $post->post_content  ), 0, 70 ) . ''; //記事本文の抜粋を70文字だけ取り出す?></p>
        <p class="related-entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
      </div><!-- /.related-entry-content -->
    </div><!-- /.new-entry -->
  
  <?php endwhile;?>
  
  <?php else:?>
  <p>記事はありませんでした</p>
  <?php
endif;
wp_reset_postdata();
?>
<br style="clear:both;">

同カテゴリの記事からランダムに10個取り出し、関連記事とします。

参考 関数リファレンス/WP Query – WordPress Codex 日本語版&Stinger3コード

single.phpの編集

single.phpの記事下などで、作成したテンプレートを呼び出します。

挿入したい場所に、以下のコードを記入してください。

<div id="related-entries">
  <h3>関連記事</h3>
  <?php include( TEMPLATEPATH . '/related-entries.php' ); ?>
</div><!-- #related-entries -->

style.cssの編集

最後に、スタイルを整えて終わりです。

/****************************************

          関連記事(Relation)

*****************************************/
#related-entries h3{
  font-size:24px;
}

#related-entries .related-entry{
  line-height:150%;
  margin-bottom:20px;
  clear: both;
}

#related-entries .related-entry-thumb {
  float: left;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

#related-entries .related-entry-content {
  margin-left: 120px;
}

.related-entry-title{
    margin-bottom:5px;
}

.related-entry-snippet{
  margin:0 0 5px 0;
}

.related-entry-read{
  margin:0;
  font-size:12px;
}

HTMLタグや、スタイルなどはサイトに合わせて変更してください。

まとめ

WordPressには、Yet Another Related Posts Plugin (YARPP)なんていう優れたプラグインもあります。

けれど、「なるべくプラグインを使いたくない」「少しでもサイトを軽くしたい」なんて時には、有効かと思います。

『プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]』へのコメント

  1. 名前:raopi 投稿日:2014/11/17(月) 19:54:20 ID:a7ced4d60

    お世話になります。上記通りおこなったのですが、
    サムネイルの画像の横の本文抜粋が下に落ちてしまいます。
    何がいけないのでしょうか?

    画像   タイトル
         
         ここに余白が出てしまいます。

         抜粋文字
         続きを読む・・・

    お手数ですが教えてください。

  2. アバター画像 名前:わいひら 投稿日:2014/11/17(月) 22:07:06 ID:c5b1f75ce

    ちょっとそれだけの情報では、原因がわからないです。
    エラーが出ていないということは、PHPは正常動作していると推定して、おそらくCSSが問題かと思われます。
    ただ、不具合が出ている該当ページのURLなどがないと詳しい原因まではわからないです。

  3. 名前:オレオレ 投稿日:2014/12/22(月) 18:34:53 ID:916768021

    わいひらさん こんにちは。
    記事の通りにやって見たら
    関連記事を表示する事ができました!

    ありがとうございます。

    しかし、「関連記事」に非公開にしている記事も
    表示されてしまうのですが、
    解決する方法はあるのでしょうか?

  4. アバター画像 名前:わいひら 投稿日:2014/12/23(火) 22:08:22 ID:58e70f852

    オレオレさんこんにちは。
    多分ですがWP_Queryの引数の配列にpost_statusを指定しないといけないのかもしれません。

    詳しくは以下に書かれています。
    WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット | notnil creation weblog
    WordPressのクエリの引数チートシート | カテゴリー: WordPress | 作業メモ