Web制作 WordPress カスタム投稿

カスタム投稿で関連記事を表示する方法

2023年10月12日

詳細ページで表示されてる、関連記事ってどうやって表示することができるの?

カスタム投稿の詳細ページ(single.php)内で、現在の記事と同じターム(カテゴリーやタグなど)を持つ関連記事を表示する方法を紹介します。

WordPressの投稿タイプ(Webページの表示方法)について

WordPressではデフォルトで「固定ページ」と「投稿」という2つの投稿タイプ(Webページの表示方法)があります。

固定ページの特徴

「固定ページ」は、会社情報・お問い合わせ・プライバシポリシーなどページ単体で完結できるようなページを作成する時に使われます。

できること

固定ページ同士で親子関係を持たせてページを作成することができる(例:お問い合わせ入力【親】 → 入力確認【子】)

ページごとに独自のデザインを効かせることができる

ページを複数作成することができる

できないこと

個々のページが独立しているため、一覧ページを作成することができない

投稿の特徴

「投稿」は、お知らせ・ニュースなど更新型のページを作成する時に使われるものです。

できること

カテゴリーやタグによって投稿同士の関連付けができたり

個々の投稿を集めた一覧ページを作成・表示できる

できないこと

個々のページが独立しているため、一覧ページを作成することができない

お知らせやブログなどを別々に一覧表示したい時はどうすればいいの?

そういった時に使用するのが、カスタム投稿タイプです。

カスタム投稿は?

カスタム投稿タイプとは「固定ページ」「投稿」のほかに、新たに別の「投稿」を作成する機能になります。

カスタム投稿タイプについては、以下の記事で詳しく詳細されています。

WEBST8さん 【カスタム投稿タイプとは】WordPressカスタム投稿の作り方

https://webst8.com/blog/wordpress-custom-posts/

関連記事を表示するコード

それでは、以下が関連記事を表示させるコードになります。

<?php
$taxonomies = get_object_taxonomies($post); // 現在の記事が所属しているタクソノミーを取得

if (!empty($taxonomies)) : ?>
  <?php
  $taxonomy_slug = $taxonomies[0]; // 最初のタクソノミースラッグを取得
  $post_terms = wp_get_object_terms($post->ID, $taxonomy_slug); // 現在の投稿に関連付けられたタクソノミーの項目(ターム)を取得

  $args = array(
    'post_type' => $post->post_type, // 現在の記事の投稿タイプのスラッグを取得
    'posts_per_page' => 5, // 表示件数を指定
    'orderby' => 'date', // date(日付)rand(ランダム)
    'order' => 'DESC', // DESC(最新順)ASC(古い順)※ランダムの場合は不要
    'post__not_in' => array($post->ID), // 現在の記事を除く
    // タクソノミースラッグを使用して関連記事をフィルタリングして取得
    'tax_query' => array(
      array(
        'taxonomy' => $taxonomy_slug, // 出力するタクソノミーを指定
        'field' => 'slug', // スラッグと一致するカテゴリーをクエリで取得する
        'terms' => $post_terms[0], // タクソノミースラッグを動的に取得
      ),
    ),
  );
  $my_query = new WP_Query($args);

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

      <a href="<?php the_permalink(); ?>">
        <!-- ループして、表示させるデータ -->
      </a>

    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
  <?php endif; ?>
<?php endif; ?>

【コードの説明】

  • get_object_taxonomies($post);
    詳細ページで、現在表示されている投稿が属しているすべてのタクソノミーを取得
    $taxonomies[0]; で最初のタクソノミースラッグを取得
               ↓ 別の方法 ↓
    wp_get_object_terms($post->ID, 'タクソノミースラッグ');
    こちらでも、現在の記事のタクソノミースラッグを取得することができます
  • wp_get_object_terms($post->ID, $taxonomy_slug);
    現在の投稿($post->ID)とタクソノミーのスラッグ($taxonomy_slug)に関連するタームを取得
  • 'tax_query'
    ループ内で出力される情報に対して、タクソノミーに関するフィルタリングを設定して情報を取得

上記のコードを実行することで、カスタム投稿の詳細ページ内で、現在の記事と同じタームの関連記事の一覧を表示することができます。

  • この記事を書いた人

はぎ

43歳からWeb制作開始|フリーランス2年目| 税理士・公認会計士を目指すも挫折、27歳でトヨタ系自動車部品工場に勤務| 管理業務に関わるなか、ExcelVBAからプログラミングに目覚める| 現在は兼業コーダーとしてクラウドソーシング・制作会社からのお仕事をさせて頂いております| 時間と場所に縛られないライフスタイルを目指し鬼労働中| 柴犬好き🐕‍🦺

-Web制作, WordPress, カスタム投稿