ショートコード1つで特定カテゴリの記事を固定ページに表示させる【WordPress】
WordPressで固定ページを作成している際に、「ここにあの記事一覧を表示させられたら便利なのにな。」と悩んだことはないでしょうか。
ハードコーディングで表示させるのも一つの手段ですが、常に最新情報を表示させておきたい場面などにおいては、情報管理の観点から考えて、その後のメンテナンスがあまりにも工数がかかりすぎるため現実的ではありません。
そこで、固定ページ中でありながら、特定カテゴリの投稿記事の一覧を表示させてみたいと思います。
目次
今回想定する要件
表示させたいページ：固定ページ
表示させたい記事：指定するカテゴリに属する記事一覧
表示させたい記事数：指定可にする
表示させる情報：記事タイトル、記事の投稿日、記事のサムネイル
その他：プラグインは使わずショートコードのみで作成する。ショートコードは極力簡略化してシンプルにする
ショートコードの作成
// 特定のカテゴリ記事を指定した記事数表示
function Cat_Post ( $arg = array ()) {
extract ( shortcode_atts ( array ( 'category' => '1', 'posts_per_page' => '5' ), $arg ));
$posts = get_posts ( array ( 'posts_per_page' => $posts_per_page, 'category' => $category ));
$html = Html_Tag($posts);
return $html;
}
add_shortcode('catpost', 'Cat_Post');
function Html_Tag ( $posts ) {
$html = '<ul class="blog-list">';
foreach ( $posts as $post ) {
$html .= '<li>';
$html .= '<div class="img">' . get_the_post_thumbnail($post->ID, 'medium') . '</div>';
$html .= '<div class="data">' . date ( 'Y.m.d', strtotime ( $post->post_date ) ) . '</div>';
$html .= '<div class="title"><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></div>';
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}HTML部分はサムネイル、投稿日、タイトルを表示するようにしています。このあたりも要望などによって任意にカスタマイズして良いと思います。
CSS
ul.blog-list { display:flex; flex-wrap:wrap;}
ul.blog-list li { width:30%; text-align:center;}CSSは表示したいレイアウトによって自由に書いて良いと思います。↑では横並びの最低限の部分だけ書いています。
ショートコードの記述
[catpost category='xxx' posts_per_page='xxx']固定ページの表示したい部分に上記のショートコードを入力します。
categoryには該当カテゴリのIDを、posts_per_pageには表示件数を半角数字で入力します。
表示例
このように、固定ページの任意の場所に、指定したカテゴリ・記事数で表示ができました。
ショートコードのHTML部分やCSSをカスタマイズすることでさらに自由に記事一覧を表示せることができます。
まとめ
今回は「WordPressで固定ページの好きなところに任意のカテゴリの記事一覧を表示させる方法」としてお届けしました。
これを活用することで、固定ページ内でも最新記事を動的に入れ替える仕組みが作れますので、ぜひ参考になれば幸いです。
