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

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

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

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

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

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

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;
?>Code language: HTML, XML (xml)

例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;
?>Code language: HTML, XML (xml)

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でスタイルを整えることを忘れずに。

WordPressテーマ 立ち上げ・運用スムーズさ比較表

一般的な評価や評判に基づいた「設定の容易さ・運用時の手間」の視点で順位付けを試みましたが、個人の経験や求める機能によって感じ方は異なりますので、あくまで参考としてご覧ください。

順位テーマ名評価されるスムーズさの理由(一般的な傾向)
1位STORK SE(ストークSE)シンプルな設定項目と、ブログ運営に必要な機能に絞り込まれており、直感的な操作性で特に初心者から評価が高いです。
2位Emanon(エマノン)シリーズによりますが、多機能ながらも設定画面が整理されており、ビジネス・ブログ向けに洗練された設計で運用しやすいという声が多いです。
3位LIQUID PRESS(リキッドプレス)シンプルでモダンなデザインが多く、必要最小限の設定でサイトを構築できます。レスポンシブ対応も万全で、設定の煩雑さが少ない傾向にあります。
4位GOLD BLOG(ゴールドブログ)ブログ運営に特化した機能が多く、アフィリエイトなどの収益化機能が整備されています。特定用途においては設定がスムーズです。
5位RE:DIVER(リダイバー)多機能でカスタマイズ性が高い反面、その機能の多さから設定項目も多く、使いこなすまでにやや時間がかかる場合があります。
6位GOLD MEDIA(ゴールドメディア)複数のサイトタイプに対応できる多機能テーマです。機能が豊富な分、初期設定や細かなカスタマイズに手間がかかる可能性があります。
7位THE THOR(ザ・トール)SEO・高速表示・デザインカスタマイズにおいて非常に多機能・高性能です。その分、設定項目が非常に多く、初心者にとっては操作が複雑に感じられる場合があります。

📌 【補足】

  • STORK SEEmanonは、シンプルさと機能のバランスが良く、導入後の「書くこと」に集中しやすいという点で評価が高いです。
  • THE THORは、細部までこだわりたい方には最強のテーマの一つですが、機能の多さが立ち上げのスムーズさという点ではデメリットになる傾向があります。

一括.jpは「BtoB(企業間取引)を中心に、様々なサービスの業者をまとめて比較検討・一括問い合わせできる無料のビジネスマッチングプラットフォーム」です。


ココナラは、個人の持つ知識・スキル・経験をオンラインで気軽に売り買いできる、日本最大級のスキルマーケットです。

一言でまとめると、「ビジネスからプライベートまで、様々な『お願いしたいこと』をプロや専門家に依頼したり、自分の得意なことをサービスとして提供したりできるプラットフォーム」と言えます。