WordPressブロックエディタのクエリーループで記事一覧を作る

WordPressのクエリーループで記事一覧を作成する方法

WordPressで記事一覧を表示するには、主にWordPressループ（The Loop）を使用します。これは、指定した条件に合致する投稿を順番に表示するための基本的な仕組みです。

1. 基本的なクエリーループの構造

WordPressループの最も基本的な形は以下のようになります。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // ここに各記事の表示内容を記述
    endwhile;
else :
    // 投稿がない場合の処理
    echo '投稿が見つかりませんでした。';
endif;
?>

2. クエリのカスタマイズ（WP_Queryの使用）

特定の条件で記事を抽出したい場合は、WP_Queryクラスを使用します。これにより、カテゴリ、タグ、カスタム投稿タイプ、表示件数など、様々な条件で記事をフィルタリングできます。

以下に、よく使われるWP_Queryのパラメータと使用例をいくつかご紹介します。

例1：特定のカテゴリの記事を10件表示

<?php
$args = array(
    'category_name' => 'news', // 'news'というスラッグのカテゴリ
    'posts_per_page' => 10,     // 表示件数
);
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
        <p>カテゴリー: <?php the_category(', '); ?></p>
        <p>投稿日: <?php the_time('Y年n月j日'); ?></p>
        <hr>
<?php
    endwhile;
    wp_reset_postdata(); // ループ後にグローバルな投稿データをリセット
else :
    echo 'このカテゴリには投稿がありません。';
endif;
?>

例2：カスタム投稿タイプ「product」の記事をすべて表示

<?php
$args = array(
    'post_type' => 'product', // カスタム投稿タイプ名
    'posts_per_page' => -1,   // すべての投稿を表示
);
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
        <hr>
<?php
    endwhile;
    wp_reset_postdata();
else :
    echo '製品が見つかりませんでした。';
endif;
?>

3. クエリーループの実装場所

これらのコードは、WordPressテーマのテンプレートファイルに記述します。一般的な場所としては以下のようなものがあります。

• index.php: トップページやブログのメインページ
• archive.php: カテゴリ、タグ、日付などのアーカイブページ
• category.php: 特定のカテゴリページ
• page-〇〇.php: 特定のスラッグを持つ固定ページ（テンプレートとして使用）
• single.php: 各記事の個別ページ（関連投稿の表示など）

4. よく使うテンプレートタグ

ループ内で各記事の情報を表示するために、以下のテンプレートタグがよく使われます。

• the_permalink(): 記事のパーマリンク（URL）
• the_title(): 記事のタイトル
• the_excerpt(): 記事の抜粋
• the_content(): 記事の本文
• the_post_thumbnail(): アイキャッチ画像
• the_category(): 記事が属するカテゴリ
• the_tags(): 記事に付与されたタグ
• the_author(): 記事の著者名
• the_time('Y年n月j日'): 記事の投稿日時（表示形式は指定可能）

5. 注意点

• WP_Queryを使用した後には、必ずwp_reset_postdata()を呼び出して、グローバルな投稿データをリセットしてください。これを怠ると、後続のWordPressの機能（例: ページネーションなど）に悪影響を及ぼす可能性があります。
• ループ内でのHTML構造は、表示したいデザインに合わせて自由に記述できます。CSSでスタイルを整えることを忘れずに。