コアサーバーV2プランご契約でドメイン更新費用が永久無料

WordPress:関連記事として表示中の記事と同じカテゴリーの一覧を表示

Date :
Category :
WordPress » カテゴリー
Share this :

「関連する記事」として、表示中の記事と似た内容の記事一覧をページ下部に表示しているブログをよく見ますが、これをプラグインを使用せずに、記事と同じカテゴリーの一覧を関連記事として表示させる方法になります。

カテゴリーベースで記事の一覧を表示させますので、記事の分類をタグをあまり使用せずにカテゴリーで細かく分けている場合などは、特に有効的に活用できると思います。

記事と同じカテゴリーの一覧を表示する記述

主な動作はこのようになります。

  • 表示している記事と同じカテゴリーの記事一覧を表示
  • 表示している記事は記事一覧に表示させない
  • 記事一覧の表示件数は変更可能

single.phpの表示させたい箇所に以下を追加してください。

single.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
    $post_id = get_the_ID();
    foreach((get_the_category()) as $cat) {
        $cat_id = $cat->cat_ID ;
        break ;
    }
    query_posts(
        array(
            'cat' => $cat_id,
            'posts_per_page' => 5,
            'post__not_in' => array($post_id)
        )
    );
?>
<?php if (have_posts()) : ?>
<div>
    <h2>関連記事</h2>
    <ul>
<?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
    </ul>
</div>
<?php endif; wp_reset_query(); ?>

10行目に記述されているposts_per_pageの数値を変更することで、表示する件数を変更できます。

記事のタイトルと一緒にアイキャッチ画像やサムネイルを表示させる場合は、20行目の<?php the_title(); ?>の隣に<?php the_post_thumbnail(); ?>を追加します。
見映えについてはCSSにて調整してください。

上の記述を行うとHTMLの出力は以下のようになります。

<div>
    <h2>関連記事</h2>
    <ul>
        <li><a href="○○○">記事のタイトル-1</a></li>
        <li><a href="○○○">記事のタイトル-2</a></li>
        <li><a href="○○○">記事のタイトル-3</a></li>
        <li><a href="○○○">記事のタイトル-4</a></li>
        <li><a href="○○○">記事のタイトル-5</a></li>
    </ul>
</div>

該当するカテゴリーの記事が他に無い場合は、上記のHTMLは出力されないようになっています。

以上、「WordPress:関連記事として表示中の記事と同じカテゴリーの一覧を表示」でした。