WordPressで関連記事を表示する方法

2023年9月17日2024年1月4日

WordPressで関連記事を表示する方法を紹介します。

りゅう

よくある実装です。WordPress関数の使い方に慣れましょう。

投稿ページ下部やサイドバーに設置することがありますね。
関数の意味も含めて理解すると実装に困らないですよ。

今回はプラグインなしで、自作で関連記事を表示する方法を解説します。
オリジナルテーマ作成時に使用しますのでぜひ参考にしてください。

この記事でわかること

WordPressで関連記事を表示する方法
投稿のカテゴリから関連記事を表示する方法
投稿のタグから関連記事を表示する方法

関連記事の実装例
同じカテゴリーの関連記事を表示する方法
タグから関連記事を表示する方法
まとめ

同じカテゴリーの関連記事を表示する方法

WordPressでよくある同じカテゴリーの関連記事を表示する方法を紹介します。

投稿と同じカテゴリーの投稿を関連記事として表示します。

<?php
    $categories =get_the_category();
    $category = array();
    foreach($categories as $cat)
    $category[] = $cat->term_id;
?>
<?php $args = array(
    'post_type' => 'post',
    'posts_per_page' => '3', //表示させたい記事数
    'post__not_in' =>array( $post->ID ), //現在の記事は含めない
    'category__in' => $category, //先ほど取得したカテゴリー内の記事
    'orderby' => 'rand' //ランダムで取得
    );
    $related_query = new WP_Query( $args );
?>
<?php if( $related_query -> have_posts() ): ?>
    <h3>関連記事</h3>
    <div class="related-contents">
        <?php while ($related_query -> have_posts()) : $related_query -> the_post(); ?> 
        <div class="related-post">
            <a href="<?php the_permalink(); ?>">
                <!-- アイキャッチ画像が設定されていれば表示 -->
                <?php if (has_post_thumbnail()) :  ?>
                    <figure class="related-post__img">
                        <?php the_post_thumbnail(); ?>
                    </figure>
                <!-- アイキャッチ画像がなければ指定の画像を表示 -->
                <?php else:?>
                    <figure class="related-post__img">
                        <img src="『アイキャッチ画像がない場合の画像のパス』" alt="画像なし">
                    </figure>
                <?php endif; ?>
                <h3 class="related-post__title"><?php the_title(); ?></h3>
            </a>
        </div>
        <?php endwhile;?>
        <!-- /.related-post -->
    </div>
    <!-- /.related-contents -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>

りゅう

WordPressの勉強始めたときは、呪文のように見えました。笑

順に解説していきます。

①カテゴリーの取得

まず、投稿のカテゴリーを取得し、$categoryに配列で代入していきます。
ここで配列を使うのは、カテゴリーを複数持っている場合があるためです。

<?php
    $categories =get_the_category();
    $category = array();
    foreach($categories as $cat)
    $category[] = $cat->term_id;
?>

こちらの処理で、$categoryに投稿のカテゴリーのデータが代入されました。

②表示する記事の取得

次に、関連記事として表示する条件指定して、$argsに代入します。
$argsは取得する記事の条件を定義しています。

<?php $args = array(
    'post_type' => 'post',
    'posts_per_page' => '3', //表示させたい記事数
    'post__not_in' =>array( $post->ID ), //現在の記事は含めない
    'category__in' => $category, //先ほど取得したカテゴリー内の記事
    'orderby' => 'rand' //ランダムで取得
    );
    $related_query = new WP_Query( $args );
?>

今回使用した条件は以下の表のとおりです。

条件	内容
‘post_type’ => ‘post’	投稿タイプの指定
‘posts_per_page’ => ‘3’	表示する記事の数
‘post__not_in’ =>array( $post->ID )	現在表示中の記事は除外
‘category__in’ => $category	カテゴリーを指定 ①で取得した表示中の記事のカテゴリーを指定
‘orderby’ => ‘rand’	表示する記事をランダムに選択

$related_query = new WP_Query( $args );

最後の１行のこの処理で、$related_queryに条件を指定した関連記事のデータを代入しています。

③記事を表示する

取得した記事をループで表示させます。

②で条件を指定した関連記事を$related_queryに格納していますので、ループ処理でそれぞれ表示します。

<?php if( $related_query -> have_posts() ): ?>
    <h3>関連記事</h3>
    <div class="related-contents">
        <?php while ($related_query -> have_posts()) : $related_query -> the_post(); ?> 
        <div class="related-post">
            <a href="<?php the_permalink(); ?>">
                <!-- アイキャッチ画像が設定されていれば表示 -->
                <?php if (has_post_thumbnail()) :  ?>
                    <figure class="related-post__img">
                        <?php the_post_thumbnail(); ?>
                    </figure>
                <!-- アイキャッチ画像がなければ指定の画像を表示 -->
                <?php else:?>
                    <figure class="related-post__img">
                        <img src="『アイキャッチ画像がない場合の画像のパス』" alt="画像なし">
                    </figure>
                <?php endif; ?>
                <h3 class="related-post__title"><?php the_title(); ?></h3>
            </a>
        </div>
        <!-- /.related-post -->
        <?php endwhile;?>
    </div>
    <!-- /.related-contents -->
<?php endif; wp_reset_postdata(); ?>

<?php if( $related_query -> have_posts() ): ?>

はじめにif文で$related_queryに、関連記事がある場合のみ表示するように定義します。

<?php while ($related_query -> have_posts()) : $related_query -> the_post(); ?>

こちらのループ処理はWordPressでは頻出です。

$related_queryにデータがある場合は、データの数だけループ処理を繰り返します。

<div class="related-post">
   <a href="<?php the_permalink(); ?>">
       <!-- アイキャッチ画像が設定されていれば表示 -->
       <?php if (has_post_thumbnail()) :  ?>
           <figure class="related-post__img">
               <?php the_post_thumbnail(); ?>
            </figure>
        <!-- アイキャッチ画像がなければ指定の画像を表示 -->
        <?php else:?>
            <figure class="related-post__img">
                <img src="『アイキャッチ画像がない場合の画像のパス』" alt="画像なし">
            </figure>
        <?php endif; ?>
        <h3 class="related-post__title"><?php the_title(); ?></h3>
   </a>
</div>
<!-- /.related-post -->

表示する記事にパーマリンクを設定しています。

if文で、アイキャッチ画像が表示されていればアイキャッチ画像を表示し、設定されていなければ指定の画像を表示するように定義します。

最後に記事のタイトルを表示します。

後はcssでスタイルを整えれば、関連記事を独自のデザインで表示することができます。

<?php wp_reset_postdata(); ?>

最後のこちらのコードは、取得した記事のデータをリセットしています。

他にデータベースからデータを取得する際に影響が出ないように、リセットしておきます。
これは深く考える必要はなく、最後にリセットするということだけまずは覚えておくといいでしょう。

タグから関連記事を表示する方法

タグで関連記事を表示する方法も、カテゴリーと要領は同じです。

<?php
    $tags = get_the_tags();
    $tag_list = array();
    if ($tags) {
       foreach($tags as $tag)
       $tag_list[] = $tag->term_id;
    }
?>
<?php $args = array(
    'post_type' => 'post',
    'posts_per_page' => '3', //表示させたい記事数
    'post__not_in' =>array( $post->ID ), //現在の記事は含めない
    'tag__in' => $tag_list, //先ほど取得したカテゴリー内の記事
    'orderby' => 'rand' //ランダムで取得
    );
    $related_query = new WP_Query( $args );
?>
<?php if( $related_query -> have_posts()): ?>
    <h3>関連記事</h3>
    <div class="related-contents">
        <?php while ($related_query -> have_posts()) : $related_query -> the_post(); ?> 
        <div class="related-post">
            <a href="<?php the_permalink(); ?>">
                <!-- アイキャッチ画像が設定されていれば表示 -->
                <?php if (has_post_thumbnail()) :  ?>
                    <figure class="related-post__img">
                        <?php the_post_thumbnail(); ?>
                    </figure>
                <!-- アイキャッチ画像がなければ指定の画像を表示 -->
                <?php else:?>
                    <figure class="related-post__img">
                        <img src="『アイキャッチ画像がない場合の画像のパス』" alt="画像なし">
                    </figure>
                <?php endif; ?>
                <h3 class="related-post__title"><?php the_title(); ?></h3>
            </a>
        </div>
        <?php endwhile;?>
        <!-- /.related-post -->
    </div>
    <!-- /.related-contents -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>

WordPressの関数をタグに関する関数に変更します。

気をつけなければいけないことは、投稿にカテゴリーは必ず設定されますが、タグは設定されていない投稿もあるということです。
そのため、カテゴリーのときから追加でコードを記述します。

投稿のタグを取得して$tag_listに代入する際にif文を定義します。

<?php
    $tags = get_the_tags();
    $tag_list = array();
    if ($tags) {
       foreach($tags as $tag)
       $tag_list[] = $tag->term_id;
    }
?>

$tagsに値がない場合（タグの設定がない場合）は、$tag_listに代入する処理を行わないようにします。

これにより、タグの設定がない場合でもPHP処理のエラーが出なくなります。

また記事表示の条件を以下のようにします。

<?php if( $related_query -> have_posts() && !empty($tag_list) ): ): ?>

タグを取得した$tag_listが空の場合も関連記事を表示しないようにif文の条件を追加します。

上記の条件がない場合は、新着投稿のクエリが返され、タグの条件に関係なく関連記事が表示されてしまいます。

その他は、カテゴリーのときと同じ処理です。

まとめ

WordPressで関連記事を表示する方法について解説しました。

html、css、jQueryの勉強をしてからWordPressの勉強を始める方がほとんどだと思います。

静的サイトしか作ったことがないときに、PHP処理を見ると思考停止してしまいそうになります。
エラーが出た場合は、ブラウザにサイトが表示されずエラー解消に時間を費やすこともあります。

今回解説した関連記事の表示も躓きやすい内容ですので、ぜひ参考にしていただければと思います。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

プロの「引き出し」を増やすHTML+CSSコーディングの強化書／草野あけみ【1000円以上送料無料】
価格：3,190円（税込、送料無料) (2023/10/10時点)

楽天で購入

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

りゅう

京都で活動するweb制作者（プロフィール）
WordPressサイトを中心にホームページ制作をしています。
HTML/CSS/Sass/JavaScript/jQuery/WordPress/PHP

WordPressで関連記事を表示する方法

関連記事の実装例

同じカテゴリーの関連記事を表示する方法

①カテゴリーの取得

②表示する記事の取得

③記事を表示する

タグから関連記事を表示する方法

まとめ

この記事を書いた人

コメント

コメントするコメントをキャンセル

WordPressで関連記事を表示する方法

関連記事の実装例

同じカテゴリーの関連記事を表示する方法

①カテゴリーの取得

②表示する記事の取得

③記事を表示する

タグから関連記事を表示する方法

まとめ

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル