JOURNAL クリエイティブとマーケティングの話

WordPressでカスタム投稿タイプの個別記事に関連記事一覧を表示する方法

前回、WordPressの投稿にプラグインなしで関連記事一覧を表示する方法をご紹介しました。

今回はそのつながりで、カスタム投稿タイプの個別記事(シングルページ)に関連記事一覧を表示する方法をご紹介したいと思います。

WordPressでカスタム投稿タイプの個別記事に関連記事一覧を表示するソース

下記ソースをもとに、カスタム投稿タイプの個別記事用テンプレートファイル(single-xxxx[カスタム投稿タイプのスラッグ].php)に追記してください。

ループのクエリ設定以外は前回のソースを同じです。

リストタグで記事を囲み、クラス名「thumb」というdivでサムネイル、記事タイトルは最初の30文字を抜き出すようになっています。

single-xxxx.php
<div class="post">

<!-- 投稿ループここから -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; else : ?>
  <p>記事が見つかりません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
<!-- 投稿ループここまで -->

<!-- 関連記事一覧ここから -->
<div class="related">
<div class="headline">関連記事</div>

<ul>

<?php
  global $post;
  $args = array(
    'numberposts' => 6,
    'post_type' => 'カスタム投稿タイプのスラッグ',
    'orderby' => 'rand',
    'post__not_in' => array($post->ID)
  );
?>
<?php $myPosts = get_posts($args); if($myPosts) : ?>
<?php foreach($myPosts as $post) : setup_postdata($post); ?>

<li>
  <a href="<?php the_permalink(); ?>">

    <div class="thumb">
    <?php if ( has_post_thumbnail() ): ?>
      <?php the_post_thumbnail( 'thumb640' ); ?>
    <?php else: ?>
      <img src="<?php bloginfo('template_url'); ?>/images/no_image_640.png" alt="<?php the_title(); ?>" />
    <?php endif; ?>
    </div>

    <div class="inner">
      <div class="date"><?php echo get_the_date('Y.m.d'); ?></div>
      <div class="title">
        <?php
          if(mb_strlen($post->post_title)>30):
            $title= mb_substr($post->post_title,0,30) ; echo $title. '...' ;
          else:
            echo $post->post_title;
          endif;
        ?>
      </div>
    </div>

  </a>
</li>

<?php endwhile; else : ?>
  <li>記事が見つかりません。</li>
<?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>

</ul>

</div>
<!-- 関連記事一覧ここまで -->

</div>
<!-- .post -->

ループのクエリ設定について

カスタム投稿タイプのシングルページは、single-xxxx[カスタム投稿タイプのスラッグ].phpというテンプレートファイルが適用されます。

そのため、クエリ設定にはスラッグをそのまま記述すればいいので分かりやすいです。