カスタム投稿タイプを表示する(トップページ・サイドバー編)

カスタム投稿タイプを作成し、投稿できるようになっても、いざ表示させようと思ったら、いろんな方法があって、戸惑ってしまいます。

今日は、トップページやサイドバー、固定ページなどで、特定のカスタム投稿タイプを表示したいときの、ループの書き方を紹介したいと思います。

サブループ(カスタムループ)で、特定のカスタム投稿タイプを表示する

「gourmet」というカスタム投稿タイプを、トップページやサイドバーなどで表示するという例です。

経験上、メインループに影響を与えないサブループ(カスタムループ)で記述しておくほうが安全ですね。

※以前、メインループの記述方法で書いて、ページネーションでおかしなことになってしまいました…。

また、サブループの記述方法には、「WP_Query()」「get_posts()」がありますが、「WP_Query()」の方がより複雑な処理を行うことができます。

※メインループは、アーカイブページなどでページ送りが必要な時に使います。

1-1. WP_Query()

もっぱら、こちらばかり使用しています。

<?php
$args = array(
  'post_type' => 'gourmet', /* カスタム投稿名が「gourmet」の場合 */
  'posts_per_page' => 5, /* 表示する数 */
); ?>

<?php $my_query = new WP_Query( $args ); ?>

<ul>

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

<!-- ▽ ループ開始 ▽ -->

  <li>
    <h3><?php the_title(); ?></h3>
    <p><?php the_time( get_option( 'date_format' ) ); ?></p>
  </li>

<!-- △ ループ終了 △ -->

<?php endwhile; ?>

</ul>

<?php wp_reset_postdata(); ?>

※「wp_reset_postdata();」でリセットは必須。

参考サイト

関数リファレンス/WP Query

このページでは、単純に「カスタム投稿」と「表示数」だけの条件のサンプルを紹介していますが、条件を複数指定して表示する方法も、以下のページで紹介しています。

WP_Queryループで抽出条件を複数指定して表示する

1-2. get_posts()

私はめったに使わないのですが…。(覚えにくくて苦手なだけです)

<?php
$args = array(
  'post_type' => 'gourmet', /* カスタム投稿名が「gourmet」の場合 */
  'posts_per_page' => 5, /* 表示する数 */
); ?>

  
<?php $my_posts = get_posts( $args ); ?>

<ul>

<?php global $post;
  foreach ( $my_posts as $post ) :
  setup_postdata( $post ); ?>

<!-- ▽ ループ開始 ▽ -->

  <li>
    <h3><?php the_title(); ?></h3>
    <p><?php the_time( get_option( 'date_format' ) ); ?></p>
  </li>

<!-- △ ループ終了 △ -->

<?php endforeach; ?>

</ul>

<?php wp_reset_postdata(); ?>

※「wp_reset_postdata();」でリセットは必須。

参考サイト

テンプレートタグ/get posts

▼ 出力結果

出力結果は、「WP_Query()」も「get_posts()」も同じです。
<ul>
  <li>
    <h3>記事5</h3>
    <p>2017年2月20日</p>
  </li>

  <!-- 新着5件分をループで表示 -->

  <li>
    <h3>記事1</h3>
    <p>2017年2月18日</p>
  </li>
</ul>

2 Comments

  1. 翠川 大貴 says:

    お世話になります。
    現在会社のHPを手探りで作成しており、
    テーマはsedneyを使用しています。
    シドニーの機能で最新投稿は何件か表示されるようにできたのですが、
    自分でCPT-UIプラグインを使用して作成したカスタム投稿がフロントページにうまく表示されませんでした。

    このページで記述してあるようなソースはテーマフォルダ内のどの部分に追記すればよろしいでしょうか?
    教えて頂けると助かります、
    宜しくお願い致します。

  2. こんばんは。

    どこに記述すれば良いか?の質問ですが、表示させたいページのテンプレートに記述されてください。
    (例:トップページ、サイドバー、固定ページなど)

    このページで紹介しています「WP_Query()」や「get_posts()」は、基本どのテンプレートでも動きますよ。

    例えば、サイドバーで表示させたいということでしたら、sidebar.phpのファイルに記述します。

    頑張ってください! 🙂

    ※追記

    すみません。。。
    「フロントページに表示できない」と書かれていましたね。
    失礼いたしました…!

    「sedney」というテーマは使ったことがないのですが、
    フロントページのテンプレートでしたら「index.php」や「home.php」や「front-page.php」
    というような名前のファイルかと思われます。

    そちらに書いてみてくださいませ。

コメントを残す

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