MENU
CLOSE
システム Edit : 2022.02.02 Update : 2024.11.07
ショートコードを使ってWordPressの固定ページに記事一覧を表示する

ショートコードを使ってWordPressの固定ページに記事一覧を表示する

やりたいこと

・固定ページのhtmlエディタを利用してページを作成
・そのページの好きな場所にニュース記事一覧をひっぱってきたり、カスタム投稿タイプの記事から新着記事一覧を表示したい!
今回は一例として、カスタム投稿タイプの記事一覧(FAQの記事一覧)を固定ページに表示する手順をまとめます。
 

手順①:固定ページでショートコードが使えるようにする記述をfunctions.phpに記載

今回は、スタイルシートディレクトリ(現在のテーマ)の中の/parts/ディレクトリの中に、パーツとしてまとめようと思うので、get_stylesheet_directory() . "/parts/$file.phpの記述にしています。
*ここのディレクトリ指定の記述は、自分のテーマに合わせて適宜変更してください。
 

手順②:固定ページで読み込ませるphpファイルを作成

①/parts/ディレクトリの中に、parts-faq.phpを作成。
②そのファイル内で、カスタム投稿タイプ一覧(FAQ記事一覧)を表示させる記述を記載します。

・カスタム投稿タイプ(FAQ)から記事を3件取得
・FAQ記事の中でも、カテゴリidが「20」に所属するFAQのみを表示したいので、指定。
*カテゴリの絞り込みがいらない場合は、’taxonomy’、’field’、’term’の指定はコメントアウトしてもらえればと思います。
 

手順③:固定ページ側で、記事一覧を表示したい箇所にショートコードを記載

先ほどparts-faq.phpという名前でphpファイルを保存したので、読み込むファイル名に「parts-faq」を指定します。
保存して該当の固定ページを開くと、固定ページで作っているページにも関わらず、指定した箇所で動的にFAQの記事一覧が取得できています!
あとは、固定ページのデザインにあわせて、好きなようにcssを指定すれば完成です。
 
汎用的なパーツとして作成すれば、一つの固定ページだけじゃなく、いろんなページでも使いまわせるようになるので、より便利。沢山使う事になりそうなショートコードです。


Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。