【WordPress】WP_Queryを使ったサブループで記事の一覧を表示するコード

WP_Queryを使ったサブループのコード

以下本サイトのトップページで使っているコードを記載します。(※2019年12月1日時点のものです)

上記コードは本サイトのテーマに合わせてカスタマイズしているので、必要な箇所だけ抜き取って使うとそれっぽい表示になると思います。

コードにコメントが少ないので以下に細かい箇所の補足を記載します。

記事をリクエストするWP_Query

上記コードで取得する記事の条件を指定しています。
条件には色々な種類がありますので、詳細は下記をご覧ください。

参考: 関数リファレンス/WP Query – WordPress Codex 日本語版

記事の有り無しを判定するhave_posts関数

一行目のifの条件分岐と四行目のwhileのループ条件にhave_postsを使っています。

一行目のhave_posts

一行目のhave_postsはWP_Queryの結果として「記事はあるの?」ということを判定している箇所になります。
もし記事がなければ、今回のコードでは処理を記載していないのですが末尾の下記箇所の処理を行います。

四行目のhave_posts

四行目のhave_postsもWP_Queryの結果として「記事はあるの?」ということを判定している箇所になります。
違いはifで使うかwhileで使うかの違いしかないのですが、have_postsは特殊な関数で、ループの中で呼び出すと永久ループして処理がうまくいかないみたいなので注意が必要です。

参考: 関数リファレンス/have posts – WordPress Codex 日本語版

get_permalink関数で記事のリンクを取得

get_permalinkで記事のURLを取得します。
aタグのhref属性にget_permalinkの結果を出力することで、記事へのリンクを設定します。

参考:テンプレートタグ/get permalink – WordPress Codex 日本語版

get_the_post_thumbnail_url関数でサムネイルの有り無しを取得してサムネイルのURLも取得する

一行目のifの条件分岐で「記事にサムネイル画像は設定されているの?」ということを判定しています。
サムネイルが設定されていれば二行目を処理して、設定されていなければ四行目を処理します。

get_the_post_thumbnail_url関数は記事のサムネイルのURLを出力するので、imgタグのsrc属性に関数の結果を出力することで、サムネイル画像を指定しています。
もしサムネイル画像がなければ、あらかじめメディアファイルに用意していたno image用の画像を表示します。

メディアファイルへの画像のURLはwp_upload_dir関数を使って「wp_upload_dir()[‘baseurl’]」と指定すると、WordPressのuploadsフォルダまでのパスを出力してくれるのでかなり便利です。

参考:テンプレートタグ/get the post thumbnail – WordPress Codex 日本語版

get_the_date関数で記事の投稿日を取得

get_the_date関数で記事の投稿日を取得します。
パラメータのYは年、nは月、jは日を出力します。
パラメータの指定によって出力する内容は変わりますので、詳細は下記記事をご覧ください。

参考1:日付と時刻の書式 | WordPress.org 日本語
参考2:テンプレートタグ/get the date – WordPress Codex 日本語版

get_the_category関数で記事に設定したカテゴリーの一覧を取得

get_the_category関数で記事に設定したカテゴリーの一覧を取得します。
※カテゴリーは複数設定できるので、ここで取得するのはカテゴリーの「一覧」になります。

四行目で記事にカテゴリーが設定されているかどうかを確認して、五行目のforeachでカテゴリーの一つを取り出して、十行目のechoでaタグを出力しています。
aタグに指定するhref属性には、get_category_link関数で出力したカテゴリーアーカイブへのリンクを設定します。
get_category_link関数はカテゴリーのタームIDを指定するとアーカイブページのURLを出力するので、取り出したカテゴリー($a_category)のterm_idをパラメータに渡してURLを取得しています。

get_the_title関数で記事のタイトルを取得

get_the_title関数は記事のIDを指定することでタイトルが取得できるので、WP_Queryで取得した記事情報のIDを指定して記事のタイトルを取得しています。

参考:関数リファレンス/get the title – WordPress Codex 日本語版

get_the_excerpt関数で記事の抜粋を取得

get_the_excerpt関数は記事のIDを指定することで記事の抜粋が取得できるので、WP_Queryで取得した記事情報のIDを指定して記事のタイトルを取得しています。
本来は記事の続きがある場合に[…]が表示されるとのことなのですが、私が使っているテーマでは表示されなかったので末尾に[…]の文字を直接入れています。

参考:テンプレートタグ/get the excerpt – WordPress Codex 日本語版

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です