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

2017-02-20 2024-06-15 カスタマイズ 6

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

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

Contents

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

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

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

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

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

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

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

（2020.11.4）
PHP5.4以降では配列の短縮構文が追加され、array()の代わりに[]（角括弧）が使えるようになったそうで、書き換えました。また、記事が存在しない場合の条件分岐も追加しました。

WP_Query()

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

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

  <?php if ($my_query->have_posts()): // 投稿がある場合?>

  <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 else: // 投稿がない場合?>

  <p>まだ投稿がありません。</p>

<?php endif; wp_reset_postdata(); ?>

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

参考サイト: 関数リファレンス/WP Query

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

カスタム投稿タイプをWP_Queryループで抽出条件を複数指定して表示する

get_posts()

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

<ul>

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

  <?php if ($my_posts) : 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; ?>
  <?php else : // 記事がない場合?>

    <li>まだ投稿がありません。</li>

  <?php endif; wp_reset_postdata(); ?>

</ul>

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

参考サイト: テンプレートタグ/get posts

▼ 出力結果

出力結果は、「WP_Query()」も「get_posts()」も同じです。

<ul>
  <li>
    <h3>記事5</h3>
    <p>2017年2月20日</p>
  </li>

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

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

6 Comments

翠川　大貴 says:

2017-11-30 19:57

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

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

2017-11-30 21:06

こんばんは。

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

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

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

頑張ってください！ 🙂

※追記

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

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

そちらに書いてみてくださいませ。
カスタム投稿タイプをTOPページに表示させる – WordPress練習＋猫と洋裁 says:

2018-08-03 22:10

[…] カスタム投稿タイプを表示する（トップページ・サイドバー編） […]
WordPressのプラグイン作成に挑戦 | Macro Theos (マクロ・テオス) says:

2019-07-08 20:19

[…] 0からわかるWordPressプラグイン開発（スッテプ・バイ・ステップ）本気で作りたい人向け、WordPressプラグインの作成方法自由にカスタムフィールドを作ろうカスタム投稿タイプの追加方法カスタム投稿タイプを表示する（トップページ・サイドバー編） […]
ととろぐ says:

2020-11-04 23:32

WP_Query()を使用する場合、投稿に紐付いているタグを一覧で表示させるにはどうしたら良いでしょうか。
ナカグマ says:

2020-11-05 10:32

カスタム投稿の場合は、登録されたカスタムタクソノミーのタームを表示させるといった方法になるようです。（カスタム投稿にWordPress標準のタグは、たぶん使えませんよね…？）

「get_the_terms」を使いますと、投稿に紐付いたタームを一覧で表示させることができます。
リンク付き、リンクなしなど色々と表示の仕方がありますよ。