【初心者向け】制作の幅が広がる！　Wordpressの超基本、WP_Query()をもっと深く知ろう！

みなさんこんにちは。エンジニアの橋本です。
今回は初心者の中でも、Wordpressでサイトを制作した経験のある方におすすめな情報をお届けします。
それはWordpressで制作した人は一度は使ったことはあるのではないでしょうか、WP_Query()についてです。
投稿を取得する際に使用するこちらは、ネット上にも数多くの情報があり、コピペで少し書き換えて投稿を呼び出せたといった成功体験を積んでいる方も多くいらっしゃると思います。
基本的な使い方は別の機会にご紹介するとして...今回は知っておくと便利なWP_Query()の基本的な使い方と、意外な使い方をご紹介させていただきます！
WP_Query()について1から勉強するのも大変だよーと言った方向けに、ある程度ピックアップさせていただきますので、こちらで色々と学んでいただければ幸いです！

まずは基本系

まずは基本形です。
下記のような指定が多いのではないでしょうか。

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged'): 1;
$the_query = new WP_Query(array(
    'post_status' => 'publish',
    'post_type' => 'post_type_slug',
    'paged' => $paged,
    'posts_per_page' => 10,
    'orderby' => 'date',
    'order' => 'DESC'
));
if($the_query->have_posts()):
    while ($the_query->have_posts()):
        $the_query->the_post();
        the_title();
    endwhile;
endif;

これで任意の投稿が取得できますね。
しかしながら、任意の投稿が取得できるようになったかもしれませんが、初心者のみなさんはこの中身を説明できるでしょうか。確かにWEB制作の現場において、すべてのプログラムを理解せよ...といったことはハードルが高く感じるかもしれません。

ですがこちらはWordpressの要。
しっかり覚えていくことを推奨させてください。
今回大事にしたい点は、下記の部分です。

$the_query = new WP_Query(array(
    'post_status' => 'publish',
    'post_type' => 'post_type_slug',
    'paged' => $paged,
    'posts_per_page' => 10,
    'orderby' => 'date',
    'order' => 'DESC'
));

主に取得する投稿を決定する部分ですね。
詳細は、下記の通り。

• post_status => 公開状態について
• paged => 現在のページネーション情報について
• orderby => どの項目でソートするか
• order => 昇順なのか、降順なのか

これらの指定が、出力結果へ大きな影響を及ぼします。
変な投稿が出ている、出力順番がバラバラ、ページネーションできない…などと言った初心者あるあるは、比較的これらの設定項目への理解不足から発生するケースが多く感じます。
コピペで持ってきたソースに何が書いてあるかは分かりません。
しっかり理解を深めていきましょう！

そして、さらに要になるポイントは下記2つの設定です。

post_type => どの投稿を取得するか
posts_per_page => 何件取得するか

こちらは大きく表示結果に影響するものです。
post_typeは例えば投稿であれば【post】、固定ページであれば【page】とします。こちらを操ることによって、どのページでも好きな投稿を引っ張ってくることができるようになります。(サブループ)
また、何件取得するかはposts_per_pageで管理します。
こちらはデザインによって表示件数は異なるはずですので、しっかりと指定をすることが重要です。
-1と指定すれば全件取得できるので、こちらもぜひ覚えておきましょう！
また、posts_per_pageはページネーションに大きく関連していきます。
こちらの値とページネーションの値で差異があると、あっという間に変な挙動を起こしますので、注意が必要です。
ページネーションのおはなしはまたいずれ。

ここまでがWP_Queryの基本形でした。
ここから、特殊な使用例を、見ていきましょう！

特定の投稿IDのみ取得しない

WP_Query()の引数は、ご紹介の通り配列をセットします。
こちらに色々な指定をすることで、投稿を任意の形で絞り込みます。

'post__not_in' => array()

まずはこちら。
配列の中に投稿IDをセットすることで、特定IDの投稿が取得結果から弾かれます。
このページは出したくないと言った要件は通常のホームページ制作でもあるあるです。そのようなときは、こちらの設定で一発解決！

$the_query = new WP_Query(array(
    // 省略
    'order' => 'DESC',
    'post__not_in' => array(1,2,3) //投稿ID1,2,3を取得しない
));

また、"post__in"の指定をすると、逆に指定されたIDの投稿のみを取得します。
こちらもpost__not_inと同様に、配列に入れることで複数の投稿を設定できますので、何かしらの処理を事前にし、投稿IDを取得しておけばカテゴリやタグなどの括りではない投稿の取得が可能となります。

ランダム投稿取得

こちらは【10個あるおすすめの記事から、2つだけランダムで出したい】、【毎回別のコンテンツを見せたい】など...明確に表示したいものがないけれど、単調になりたくない時には比較的使うかもしれません。
さっそく、下記のコードを見てみましょう。

'orderby'   => 'rand'

やり方はとっても簡単。例にもあるorderbyをrandにすればOKです。
かなり簡単に実装できますので、ぜひ試していただければと思います！

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

こちらは使う機会がない方は、案外知らなかったという声も多い設定です。
使っている方はとってもお世話になっているかと思います。

$the_query = new WP_Query(array(
    // 省略
    'meta_key' => 'city',
    'meta_value' => '船橋'
));

$the_query = new WP_Query(array(
    // 省略
    'meta_query' => array(array(
        'key' => 'city',
        'value' => '船橋',
        'compare' => 'LIKE'
    ))
));

例えば、上記のような形で使用します。
カスタムフィールドは、ACFやSCFを利用している方はなじみがあるかと思いますが、キー(key)が存在します。
絞り込みについても、こちらを利用します。
キーであるcityが船橋と入力されたものを限定して呼び出すことができます。
使い方次第ではとっても便利。
meta_queryを使った下のバージョンでは、より複雑な絞り込みが可能です。
こちらのcompareは、条件の指定を多彩にさせるもの。LIKEであれば【指定した文字列に一致するもの】を検索します。
完全一致ではなくなるので、カテゴリでの絞り込みとは違った使い方が実現できますね！

まとめ

今回はWP_Query()について、まとめさせていただきました！
これらを使いこなすことによって、サブループを使いこなし、より届けるべき情報をエンドユーザーへ案内することが可能となります。
ユーザビリティに直結する部分ですので、ぜひぜひご紹介した以外でも多くの機能を備えたWP_Query()について学んでいきましょう！
それではまた！

↓ この記事をご覧の方へおすすめの記事はこちら ↓

node_moduleの行方は何処！？　Wordpress×Webpackでの構築に潜む罠について

JamstackとWordPress どちらでサイトを作るべき！？

【初心者向け】何がいつ発火するのか理解できる！addEventListenerの基本的な使い方を解説！