WordPressで、年数別で投稿記事の一覧を表示させたい、それをショートコードで実装したいと思い、その実装方法を先日に投稿しました。
旧記事：WordPress｜ショートコード｜WP_Queryで投稿一覧を表示
しかし読み返すと、いくつかの課題を抱えたものでした。
本記事は、旧記事の訂正版です。
本記事のコードの特徴
-
get_posts()ではなく、WP_Query（）を用いています。 - ショートコードでの実装となります。
実装手順
1）functions.phpへコードの追加
下記のコードを、使用中のWordPressテーマのfunctions.php内へ追加してください。
functions.php
function getPostList($atts)
{
$args = [
'post_type' => 'post',
'posts_per_page' => '-1',
'orderby' => 'meta_value',
'order' => 'DESC'
];
if ($atts['category']) {
$args += ['category__in' => explode(',', $atts['category'])];
}
if ($atts['tag']) {
$args += ['tag__in' => explode(',', $atts['tag'])];
}
if ($atts['year']) {
$args += ['year' => $atts['year']];
}
$wp_query = new WP_Query($args);
$outPut = '';
if ($wp_query->have_posts()) {
$year = null;
$outPut .= '<div class="PostList"><ul>' . PHP_EOL;
while ($wp_query->have_posts()) {
$wp_query->the_post();
if ($year != get_the_date('Y')) {
$year = get_the_date('Y');
$outPut .= '<li id="PostListId_' . $year . '" class="PostList_title">' . $year . '</li>' . PHP_EOL;
}
$date = get_the_date('Y-m-d');
$cats = get_the_category();
$cats_outPut = '';
if ($cats) {
foreach ($cats as $category) {
$cats_outPut .= '<span>' . $category->cat_name . '</span>';
}
}
$tags = get_the_tags();
$tags_outPut = '';
if ($tags) {
foreach ($tags as $tag) {
$tags_outPut .= '<span>' . $tag->name . '</span>';
}
}
$outPut .= '<li id="PostId_' . get_the_ID() . '" class="Post_item">';
$outPut .= '<a href="' . esc_url(get_permalink()) . '" class="Post_link"><div class="Post_body">';
$outPut .= '<div class="Post_meta">';
$outPut .= '<div class="Post_time"><time datetime="' . $date . '">' . $date . '</time></div>';
$outPut .= '<div class="Post_category">' . $cats_outPut . '</div>';
$outPut .= '<div class="Post_tag">' . $tags_outPut . '</div>';
$outPut .= '</div>';
$outPut .= '<div class="Post_title">' . get_the_title() . '</div>';
$outPut .= '</div></a>';
$outPut .= '</li>' . PHP_EOL;
}
$outPut .= '</ul></div>' . PHP_EOL;
}
wp_reset_postdata();
return $outPut;
}
add_shortcode("PostList", "getPostList");
2）記事中へショートコードの追加
任意の記事（ページ）にショートコードを設置してください。
ショートコードは [PostList] です。
以上です。
設置時の出力HTML
こんな感じのHTMLが出力されます。
オプション
ショートコードへ引数を渡し、表示させる投稿を絞り込むことができます。
（現状は年・カテゴリ・タグで絞り込めます。カテゴリ・タグはIDを配列で複数渡すことができます）
絞り込む項目を変更したい場合は、この辺りを変更してください。
↓
functions.php（一部）
$args = [
'post_type' => 'post',
'posts_per_page' => '-1',
'orderby' => 'meta_value',
'order' => 'DESC'
];
if ($atts['category']) {
$args += ['category__in' => explode(',', $atts['category'])];
}
if ($atts['tag']) {
$args += ['tag__in' => explode(',', $atts['tag'])];
}
if ($atts['year']) {
$args += ['year' => $atts['year']];
}
絞り込む項目については、次のサイトが参考になります。
【参考サイト】これは便利！WordPressのWP_Queryでよく使うコードスニペット
【参考サイト】関数リファレンス/WP Query
反省点
旧記事からの反省点（変更点）を記します。
旧記事：WordPress｜ショートコード｜WP_Queryで投稿一覧を表示
日付（日時）の取得は get_the_date()
当初はthe_time（）を用いて日付を取得していましたが、なんか変な挙動をしていました。
get_the_date()へ変更すると、万事OKでした。
ショートコード内の関数は return で返す
ドキュメント**ショートコード API#出力**にも記載されています。
ショートコードハンドラー関数の返り値はショートコードマクロの代わりに投稿コンテンツの出力へ挿入されます。 echo ではなく return を使うようにしてください。echo されたものはすべてブラウザへ出力されますが、ページの適切な箇所に表示されません。
そこで、echoで出力していたものを、今回は変数$outPutを用意して、その中へ出力したいHTMLを追加していき最後にreturn $outPutで返すようにしました。