【WordPress】ループでの記事表示方法完全ガイド|基本から高度なクエリ設定まで

【WordPress】ループでの記事表示方法完全ガイド|基本から高度なクエリ設定まで

WordPressでサイトをカスタマイズする際、テンプレートページでのループ(投稿の表示)は非常に重要な要素です。基本的なループの書き方から、カスタムクエリの設定、ページネーションの実装方法まで、幅広く紹介します。この記事では、初心者にも分かりやすいコード例とともに、効率的なデータ表示のテクニックを共有します。

基本的なループの書き方

WordPressのテンプレートファイル(例:index.phparchive.php)で投稿を表示する基本的なループの書き方を紹介します。

実装例

<div class="post-list">
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <!-- ↓↓↓ここにループコンテンツ↓↓↓ -->
            <article>

            </article>
            <!-- ↑↑↑ここにループコンテンツ↑↑↑ -->
        <?php endwhile; ?>
    <?php else : ?>
        <p class="post-notfound">該当する記事はありませんでした。</p>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>	
</div>

解説

  • have_posts(): 投稿が存在するかどうかをチェックします。
  • while (have_posts()) : the_post(): ループを開始し、各投稿を取得します。
  • ループコンテンツ: テンプレートタグでサムネイル、タイトル、タグ、日付を設定してください。
  • wp_reset_postdata(): グローバルな $post オブジェクトをリセットします。

ページネーション付きのループ

ページネーション(ページ送り)を実装する方法を紹介します。
ページネーションの有無によってループの設定が異なります。

ページネーションありのループ

ページネーションを有効にしたループの書き方です。WP_Query を使用してカスタムクエリを作成し、ページネーションを実装します。

<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$my_query = new WP_Query(
    array(
        'paged' => $paged,
        'post_type' => 'post',
        'posts_per_page' => 9,
        'orderby' => 'date',
        'order' => 'DESC'
    )
);
?>
<?php if($my_query->have_posts()): ?>
  <div class="post-list">	
    <?php while($my_query->have_posts()): $my_query->the_post(); ?>
      <!-- ↓↓↓ここにループコンテンツ↓↓↓ -->
      <article>

      </article>
      <!-- ↑↑↑ここにループコンテンツ↑↑↑ -->
    <?php endwhile; ?>
  </div>
  <div id="next">
      <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(array('query' => $my_query)); } ?>
  </div>
<?php else: ?>
  <p class="post-notfound">該当する記事はありませんでした。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

解説

  • $paged: 現在のページ番号を取得します。
  • WP_Query: カスタムクエリを作成します。ここでは、1ページあたり9投稿を表示し、投稿タイプは post です。
  • ループコンテンツ: テンプレートタグでサムネイル、タイトル、タグ、日付を設定してください。
  • wp_pagenavi(): ページネーションを表示します。

ページネーションなしのループ

ページネーションを使用せず、固定数の投稿を表示するループの書き方です。

<?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 9,
    'orderby' => 'date',
    'order' => 'DESC'
);
$my_query = new WP_Query($args);
?>
<?php if($my_query->have_posts()): ?>
    <div class="post-list">
        <?php while($my_query->have_posts()): $my_query->the_post(); ?>
        <!-- ↓↓↓ここにループコンテンツ↓↓↓ -->
        <article>

        </article>
        <!-- ↑↑↑ここにループコンテンツ↑↑↑ -->
        <?php endwhile; ?>
    </div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

解説

  • $args: 投稿タイプ、表示数、並び順を指定したクエリパラメータです。
  • WP_Query: 上記のパラメータを基にカスタムクエリを作成します。
  • ループコンテンツ: テンプレートタグでサムネイル、タイトル、タグ、日付を設定してください。

カスタムクエリの条件指定方法

WP_Query を使用して、さまざまな条件で投稿を絞り込む方法を紹介します。カテゴリーやタームを指定することで、必要な投稿のみを表示できます。

カテゴリー指定

特定のカテゴリーに属する投稿を取得する方法です。

$args = array(
    'category_name' => 'スラッグ',
    'posts_per_page' => 5
);
$my_query = new WP_Query($args);

複数カテゴリーのインクルード・エクスクルード

複数のカテゴリーを含めたり、除外したりする方法です。

// カテゴリーID 1と2を含める
$args = array(
    'category__in' => array(1, 2),
    'posts_per_page' => 5
);
$my_query = new WP_Query($args);

// カテゴリーID 1と2を除外する
$args = array(
    'category__not_in' => array(1, 2),
    'posts_per_page' => 5
);
$my_query = new WP_Query($args);

ターム絞り込み

カスタムタクソノミーを使用して投稿を絞り込む方法です。

$args = array(
    'tax_query' => array(
        array(
            'taxonomy' => 'タクソノミー',
            'field'    => 'slug',
            'terms'    => 'スラッグ',
        )
    ),
    'posts_per_page' => 10
);
$my_query = new WP_Query($args);

ターム除外(カテゴリーも同様)

特定のタームを除外して投稿を取得する方法です。

$args = array(
    'tax_query' => array(
        array(
            'taxonomy' => 'タクソノミー',
            'field'    => 'slug',
            'terms'    => 'スラッグ',
            'operator' => 'NOT IN',
        )
    ),
    'posts_per_page' => 10
);
$my_query = new WP_Query($args);

複数タクソノミーの指定

複数のタクソノミーを組み合わせて投稿を絞り込む方法です。

$args = array(
    'post_type' => 'orange',
    'tax_query' => array(
        'relation' => 'AND',
        array(
            'taxonomy' => 'タクソノミー1',
            'field'    => 'slug',
            'terms'    => 'スラッグ',
        ),
        array(
            'taxonomy' => 'タクソノミー2',
            'field'    => 'slug',
            'terms'    => 'スラッグ',
        )
    ),
    'posts_per_page' => 10
);
$my_query = new WP_Query($args);

特定の日付以降また以前の投稿を除外

例:2025年2月までの記事のみを吐き出す

<?php
$args = array(
  'category_name' => 'スラッグ',
  'posts_per_page' => 5,
  'date_query'     => array(
      array(
        'before'    => '2025-02-01',
        'inclusive' => true, // 2025-02-01も含める場合
      ),
    ),
);
$my_query = new WP_Query($args);
?>

例:2025年2月以降の記事のみを吐き出す

<?php
$args = array(
  'category_name' => 'スラッグ',
  'posts_per_page' => 5,
  'date_query'     => array(
      array(
        'after'    => '2025-02-01',
        'inclusive' => true, // 2025-02-01も含める場合
      ),
    ),
);
$my_query = new WP_Query($args);
?>

まとめ

WordPressのテンプレートページでのループの基本から、カスタムクエリの設定、ページネーションの実装方法までを解説しました。適切なループの設定と条件指定により、効率的かつ柔軟なコンテンツ表示が可能になります。以下のポイントを参考に、サイトのデザインとユーザー体験を向上させてください。

  • 基本的なループの理解: have_posts()the_post() の基本的な使い方をマスター。
  • カスタムクエリの活用: WP_Query を用いて、必要な条件で投稿を取得。
  • ページネーションの実装: 大量の投稿を効率的に表示するために、ページネーションを設定。
  • 条件指定の柔軟性: カテゴリーやタームを組み合わせた条件指定で、精度の高い投稿取得を実現。

これらのテクニックを駆使して、より機能的なWordPressサイトを構築しましょう。

この記事をシェアする

どなたでもコメントや質問をどうぞ

スパム対策のため、承認作業を行うまでは表示されません。ご了承ください。

CAPTCHA


関連記事