ワンランク上のワードプレス の投稿の表示方法の解説

Webサイト制作
Web開発
サイト制作
ワードプレス
2020.10.29
ワンランク上のWordPressの投稿の表示方法の解説

WEBサイトを運用する上で、ワードプレス 投稿を導入しているサイトが多くなってきている昨今
ワードプレスを学びながらサイトを構築、改修する方も増えていると思います。
ワードプレスではPHP用の関数が用意されている為、かなり自由にカスタマイズできます。
しかし、自由度が高いが故にインターネットでやりたい事を調べても複数の種類の方法・関数が出てきてしまいます。
今回は、ワードプレスの投稿の一覧の表示する方法の違いを説明したいと思います。
状況に合わせた適切な一覧の表示の方法を選択することで、ワードプレスを活用しワンランク上のエンジニアを目指しましょう!

query_postsを使った投稿の表示

まずはquery_posts関数の説明です。
この関数は、ページ内で取得されているデフォルトのWP_Queryの内容を書き換え、再度取得し表示する関数になります。
直接、投稿の一覧を取得する関数ではないのですが、元々ワードプレスは一覧を表示する画面ではデフォルトのWP_Queryで投稿の一覧を取得しています。
ですが、ただ一覧を取得しているだけなので用途に合わない場合が多いです。
query_posts関数を使用してデフォルトのWP_Query取得する投稿の一覧の絞り込み条件をカスタマイズする事で目的の条件の投稿一覧を表示する事が出来ます。
また、この方法はWP_Queryでの投稿の取得ですので、「the_title」や「the_content」等の関数をそのまま使用できるのが特徴となります。
ワードプレスでは最もよく使われている方法かもしれません。

サンプルコード

$args = array(
            'post_type' => 'post' // 投稿タイプ(カスタム投稿等を指定する)
            'category_name'=>'カテゴリ名', // カテゴリ名
            'posts_per_page'=> 3, // 表示件数
            'post_status'=>'publish', // 公開済みコンテンツのみ
            'orderby' => 'date', //新着順
            'order' => 'ASC', // 昇順
);
query_posts($args);

pre_get_postsを使った投稿の表示

次にpre_get_postsの説明です。
この関数は、functions.phpに記載するフックになります。
add_action( ‘pre_get_posts’, 対象ファンクション名 );
このような形で記載する事により、デフォルトのWP_Queryが実行する前に対象のファンクションを実行するフックになります。
ワードプレスにはこの様に様々なタイミングでプログラムを動作させる為のフックが用意されています。
実際に画面に表示する為の記述では無いのですが、結果的に画面表示されている内容を制御出来ます。
こちらの方法も、投稿の取得自体はWP_Queryを利用しているので、「the_title」や「the_content」等の関数をそのまま使用出来ます。
フックを使う事はワードプレスの初心者からの脱却には必須です。

サンプルコード

function test_function( $query ) {
   // 管理画面ではなく、メインクエリであり、検索結果ページである場合
    if ( ! is_admin() && $query->is_main_query() && $query->is_search() ) {
        // queryにsetする形で検索条件を追加する
        $query->set('post_type', 'post'); //投稿タイプを指定
    }
}
add_action( 'pre_get_posts', 'test_function' );

get_postsを使った投稿の表示

最後にget_posts関数の説明です。
この関数は戻り値として投稿の一覧をオブジェクトのリストで取得出来ます。
この関数で取得した投稿の一覧は前の2つとは異なり実際に取得している為、加工がしやすいのが特徴となります。
欠点は、WP_Queryを使用していないので「the_tihle」「the_content」を使う際にpost_idを引数として渡さないと使用できなくなります。
この関数は主に、ページの一覧描画時に各投稿に紐づく別のカスタム投稿一覧を表示する際等に使われます。
WP_Queryを使用しない為、他のWP_Queryに干渉する事が無い為です。
こちらの方法も画面表示はされないので表示したい項目をecho等で表示する必要があります。
この方法はワードプレスよりもよりPHPでの操作に近いものとなります。
PHPを学んでいる方には身近な方法かもしれません。

サンプルコード

$args = array(
            'posts_per_page'   => 3, // 取得件数
            'orderby'          => 'meta_value', //カスタムフィールドでのソートの記載法
            'order'            => 'DESC', // 降順
            'meta_key'        => 'priority', //ソートするカスタムフィールド名
        );
$post_list = get_posts($args);
foreach ($post_list as $post_data) {
        echo $post_data->ID; // 投稿IDを出力
}

まとめ

今回、ワードプレスの投稿の表示方法を3種類解説させていただきました。
この他にもまだまだ投稿の表示の方法は沢山あるのですが、とりあえずこの3つを区別して意識的に使用できるように成る事で
ワードプレスに関してワンランク上のエンジニアに
なれるのではないかと思います。
常に、何故その方法を使うのかを考えていくことで、より洗練されたコードをワードプレスでも作るする事ができるでしょう。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)