WordPress

【WordPress】カスタム投稿詳細ページで、別のカスタム投稿タイプの情報を表示する方法（コピペOK）

get_post_field

こんにちは、コーダーのためのWeb制作ブログ、中の人hisaです👋
最近なんですが改めて知った情報を共有していきたいと思います！
WordPressでサイトを構築していると、こうした「関連コンテンツ」の表示に悩むことはありませんか？
WordPressのカスタム投稿タイプを使いこなせば、こうした関連性のあるコンテンツを柔軟に表示でき、ユーザーにとってより価値のあるサイトを構築できます。

この記事を読めば、single-{post_type}.php
を少し工夫するだけで、その仕組みを実装する方法がわかります。もう手作業での関連付けに悩む必要はありません。

目次[-]

なぜ「自動連携」が重要なのか？

コンテンツを自動で連携させることには、3つの大きなメリットがあります。

  1. ユーザー体験 (UX) の向上: ユーザーは、求めている情報に関連するコンテンツを自然な流れで発見できます。ページからページへとスムーズに移動できるため、サイト内回遊率が向上し、滞在時間の増加も期待できます。
  2. 圧倒的な運用効率: 一度仕組みを作ってしまえば、あとはコンテンツを登録するだけです。例えば「導入事例」を1つ追加すれば、関連するすべての「サービス」ページに自動で表示されます。手動で各ページを編集する必要がなくなり、更新漏れのリスクもゼロになります。
  3. SEOへの好影響:
    関連性の高いコンテンツ同士が内部リンクで結ばれることで、サイトの構造が強化されます。これにより、検索エンジンは各ページの専門性や関連性をより深く理解し、サイト全体の評価向上に繋がる可能性があります。
    手動での更新は「負債」になり得ます。賢く自動化し、価値あるコンテンツ作りに集中できる環境を整えることが、優れたサイトへの第一歩です。

実装コードと解説

前提

  • カスタム投稿タイプ project （プロジェクト実績）がある。
  • カスタム投稿タイプ testimonial （お客様の声）がある。
  • testimonial には、どのプロジェクトに関する声かを分類するため、カスタムタクソノミー case_studyが設定されている。
    関連付けのルール: project の投稿スラッグと、case_study のタームスラッグを同じ名前にしておく。
    （例:
    実績「A社ECサイト構築」のスラッグが project-a なら、お客様の声に設定する case_study カテゴリのスラッグもproject-a にする）

single-project.php に記述するコード

 <section class="related-content-block">
      <h2>このプロジェクトのお客様の声</h2>

      <?php
      // 1. 現在表示している「プロジェクト」投稿のスラッグを取得
      $current_project_slug = get_post_field('post_name', get_post());

      // 2. 取得したスラッグを使い、関連する「お客様の声」を取得するためのクエリを作成
      if ($current_project_slug) :
          $args = array(
              'post_type' => 'testimonial', // 取得したい投稿タイプ
              'posts_per_page' => 5,        // 表示件数
              'tax_query' => array(         // タクソノミー（分類）で絞り込む
                  array(
                      'taxonomy' => 'case_study',      // 分類名
                      'field'    => 'slug',            // スラッグで検索
                      'terms'    => $current_project_slug, // プロジェクトのスラッグと一致するものを探す
                  ),
              ),
          );
          $related_testimonials_query = new WP_Query($args);

          // 3. 取得した投稿をループで表示
          if ($related_testimonials_query->have_posts()) : ?>
              <ul class="testimonials-list">
                  <?php while ($related_testimonials_query->have_posts()) :
  $related_testimonials_query->the_post(); ?>
                      <li class="testimonial-item">
                          <a href="<?php the_permalink(); ?>">
                              <blockquote>
                                  <?php the_excerpt(); // お客様の声を抜粋で表示 ?>
                                  <footer><?php the_title(); ?> 様</footer>
                              </blockquote>
                          </a>
                      </li>
                  <?php endwhile; ?>
              </ul>
              <?php
              wp_reset_postdata(); // クエリをリセット
          else :
              // 関連する声がなかった場合の表示
              echo '<p>関連するお客様の声はまだありません。</p>';
          endif;
      endif;
      ?>
  </section>

コードのポイント

  • Step 1: get_post_field(‘post_name’, get_post())
    で、現在表示しているページの投稿スラッグを取得します。これが関連付けの「キー」になります。
    この方法の美しい点は、投稿スラッグとタソクノミースラッグという、WordPressの標準機能だけで関連付けを実現しているシンプルさにあります。

まとめ

📝「投稿Aのスラッグ」と 🏷️「投稿Bを分類するタクソノミーのタームスラッグ」を意図的に同じ名前にしておくことで、投稿Aの詳細ページに関連する投稿Bだけを動的に呼び出して表示することが可能になります。

この手法は、2つの異なるコンテンツを紐付けるためのシンプルで強力な「ルール」🔗として機能します。

自分もカスタム投稿タイプで違うカスタム投稿タイプの表示はどうやるのか謎だったけど、答えはシンプルでした💡✨ 笑

さあ、あなたのサイトで試してみよう！

今回は投稿スラッグとタクソノミースラッグを利用した方法を紹介しましたが、関連付けの方法はこれだけではありません。Advanced Custom Fields (ACF)
の「リレーションシップ」フィールドなどを使えば、さらに柔軟な連携も可能です。

まずはこの記事のコードを参考に、あなたのサイトで動かしてみてください。「求人情報」と「社員インタビュー」、「不動産物件」と「周辺施設情報」など、応用できる場面は無限にあります。

あなたが実装してみたい「コンテンツの自動連携」は何ですか？ ぜひコメントで教えてください！

この記事が役に立ったら、ぜひSNSでシェアしていただけると嬉しいです。

▶️ X@TumaLOVE0127もフォローしてもらえるとめちゃくちゃ嬉しいです！

hisa

関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA