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は使いやすい

WordPressは、一般的に使いやすいと言えます。

特に、以下のような点で評価されています。

• 直感的な操作性: プログラミングの知識がなくても、見たままの操作で記事の作成や画像の挿入、レイアウト調整などがしやすいように設計されています。
• 豊富な情報とコミュニティ: 世界中で最も使われているCMS（コンテンツ管理システム）の一つであるため、使い方に関する情報がインターネット上に豊富にあり、困ったときも解決策を見つけやすいです。
• カスタマイズの自由度: 「テーマ」と呼ばれるテンプレートや、「プラグイン」という機能拡張のためのプログラムが豊富に用意されており、デザインや機能を追加・変更しやすいです。
• 複数人での管理のしやすさ: ユーザー権限を設定することで、複数の担当者で分担してウェブサイトの更新・運用が可能です。

ただし、デメリットとして、以下のような側面もあります。

• 初期設定の手間: サーバーやドメインの契約、WordPressのインストールなど、ブログサービスなどと比べると初期設定に手間がかかる場合があります。
• セキュリティ対策の必要性: 世界的なシェアが高いため、攻撃の対象になりやすく、自身でセキュリティ対策（定期的なアップデートなど）を行う必要があります。
• カスタマイズには知識が必要な場合も: 高度なデザインの変更や、特定の機能を実現するためには、HTML/CSSなどの専門知識が必要になることもあります。

コンテンツ（記事など）の更新が中心であれば、初心者の方でも比較的容易に始められるツールだと言えるでしょう。

有料WordPressテーマは使いやすい

有料のWordPressテーマは、一般的に使いやすいと言えます。

特に初心者の方にとっては、無料テーマよりも効率よく、質の高いサイトを構築しやすいというメリットが多くあります。

使いやすさに関連する主なメリットは以下の通りです。

• プロが作ったデザインテンプレート: おしゃれで洗練されたデザインが最初から用意されており、手間をかけずに見た目の良いサイトが作れます。
• 豊富な機能とカスタマイズ性:
  • SEO対策や高速表示など、サイト運営に重要な機能が標準で搭載されていることが多いです。
  • コードの知識がなくても、管理画面から直感的にデザインやレイアウトのカスタマイズができるテーマが多いです。
• サポート体制の充実:
  • 初心者向けのマニュアルが充実していたり、購入者専用のサポートフォーラムやメールサポートが用意されていることが多く、困った時に安心です。
• アップデートの保証: セキュリティ対策や新機能への対応など、テーマの定期的なアップデートが保証されているため、長く安心して使い続けられます。

ただし、有料テーマでも高機能ゆえに設定項目が多く、最初はどこから手を付けていいか戸惑う可能性もあります。

購入前にデモサイトやマニュアルの充実度、サポート体制などを確認し、ご自身の目的やスキルレベルに合ったテーマを選ぶことが重要です。

テーマ名	主な特徴・強み	適したサイト
ザ・トール (THE THOR)	国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援	アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト
エマノン (Emanon)	Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium）	コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト
ストークSE (STORK SE)	「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い	商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ
リキッドプレス (LIQUID PRESS)	用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能	メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト