【WordPress】WP_Queryでの記事一覧の表示の仕方 | ホームページ制作 サポート| メディアプライムスタイル 埼玉

Column

コラム

    株式会社メディアプライムスタイル コラム記事 【WordPress】WP_Queryでの記事一覧の表示の仕方 サムネイル画像 【WordPress】WP_Queryでの記事一覧の表示の仕方

    WP_Queryについて

    WP_QueryはWordPressでブログの投稿やページの情報を取得するためのクラスであり、通常、メインループと呼ばれるものとは別にサブループを作成する際に使用されます。

    メインループは、投稿や固定ページなどのページタイトルや本文の内容を表示するためのループです。
    一方で、サブループはメインループとは独立して、例えば投稿一覧などを表示するために使用されます。

    WP_Queryクラスを使用すると、特定の条件に基づいて表示する投稿を絞り込むことができます。
    このクラスには、投稿が存在するかどうかを確認するための have_posts メソッドや、ループ内で次の投稿に進むための the_post メソッドなどが提供されています。
    コンストラクタに引数を指定することで、取得する投稿の情報をカスタマイズすることも可能です。

    WP_Queryの使用方法

    Wp_Queryのよくある利用法について考察してみましょう。

    まず、new キーワードを用いてWP_Queryのインスタンスを生成し、クエリを定義します。
    この際、WP_Queryのコンストラクタに引数を指定することで、取得する情報を特定の条件に基づいて絞り込むことができます。

    その後、have_posts メソッドを使用して表示する投稿が存在するかどうかを判断し、もし投稿が存在する場合は、該当する投稿の数だけ while ループを使用して処理を反復します。

    while ループ内では、the_post メソッドを使用して次の投稿に進むようになっています。

    これにより、WP_Queryを用いて柔軟で特定の条件に基づいた投稿情報を取得し、それをループを通して順次処理する一連の手順が実現されます。

    <?php
     
    // クエリの定義
    $wp_query = new WP_Query( $args );
     
    // ループ
    if ( $wp_query->have_posts() ) {
        while ( $wp_query->have_posts() ) {
            $wp_query->the_post();
            // 処理を記述
        }
    }
     
    // 投稿データのリセット
    wp_reset_postdata();
     
    ?>
    

    件数を取得する

    WP_Queryクラスには、投稿の数を特定するためのpost_countプロパティや、全体の投稿数を知るためのfound_postsプロパティが備わっています。

    <!--?php
    $args = array(
      'post_type' =--> 'post'                               //条件を設定する
    );
    $wp_query = new WP_Query($args);                      //条件を入れてサブループを作成する
    $get_num = $wp_query->post_count;                     //データの中から記事の総数を取得する
    $all_num = $wp_query->found_posts;                    //データの中から今表示する記事数を取得する
    echo "全" . $all_num . "件中、" . $get_num . "件を表示";//用意したデータを表示する
    ?>
    

    上記の場合だと「全◯◯件中、△件を表示」といった形で出力できます。

    カスタムフィールドで絞り込む

    <?php
    // 条件の設定
    $args = Array(
        'post_type' => 'post',      // 投稿タイプの条件設定
        'post_status' => 'publish', // 公開された投稿、または固定ページを表示する
        'posts_per_page' => 10,     // 表示する投稿数(-1を指定すると全投稿を表示します)
        'meta_key' => 'key',        // カスタムフィールドのキーを指定する
        'meta_value' => 'value',    // カスタムフィールドの値を指定する
        'orderby' => 'meta_value',  // ソートする基準となる項目を指定する
        'order' => 'DESC'           // ソートの並び順を指定'DESC' 降順、'ASC' 昇順
    );
     
    // クエリの定義
    $wp_query = new WP_Query( $args );
     
    // ループ
    if ( $wp_query->have_posts() ) {
        while ( $wp_query->have_posts() ) {
            $wp_query->the_post();
            // 処理を記述
        }
    }
     
    // 投稿データのリセット
    wp_reset_postdata();
     
    ?>
    

    カスタムタクソノミーの投稿を絞り込む

    <?php
    // 条件の設定
    $args = Array(
        'post_type' => 'post',                       // 投稿タイプを指定する
        'tax_query' => array(
            array(
                'taxonomy' => 'color',               // タクソノミーを指定する
                'field' => 'slug',                   // term_id(デフォルト),name,slug のいずれかを指定する
                'terms' => array( 'red', 'blue' ),   // ターム(文字列かIDを指定)
                'include_children' => true,          // 階層を持つタクソノミーの場合に、子孫タクソノミーを含めるかどうか
                'operator' => 'IN'                   //  ‘NOT IN’ で指定したタームを除外する
            ),
        ),
    );
     
    // クエリの定義
    $wp_query = new WP_Query( $args );
     
    // ループ
    if ( $wp_query->have_posts() ) {
        while ( $wp_query->have_posts() ) {
            $wp_query->the_post();
            // 処理を記述
        }
    }
     
    // 投稿データのリセット
    wp_reset_postdata();
     
    ?>
    

関連する投稿

このコラムを書いた人

Misato

AdvisorDirectorDesignerFront-end-engineer

ホームページに関するお困りごと、
ご不明点があればお気軽にお問い合わせください!

お問い合わせ

Copyright © 2024
ホームページ制作 サポート| メディアプライムスタイル 埼玉
All Rights Reserved.