WordPressで、年数別で投稿記事の一覧を表示させたい、それをショートコードで実装したいと思い、その実装方法を先日に投稿しました。
旧記事:WordPress|ショートコード|WP_Queryで投稿一覧を表示
しかし読み返すと、いくつかの課題を抱えたものでした。
本記事は、旧記事の訂正版です。
本記事のコードの特徴
get_posts()
ではなく、WP_Query()
を用いています。- ショートコードでの実装となります。
実装手順
1)functions.phpへコードの追加
下記のコードを、使用中のWordPressテーマのfunctions.php
内へ追加してください。
functions.php
functiongetPostList($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=newWP_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($catsas$category){$cats_outPut.='<span>'.$category->cat_name.'</span>';}}$tags=get_the_tags();$tags_outPut='';if($tags){foreach($tagsas$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
オプション
ショートコードへ引数を渡し、表示させる投稿を絞り込むことができます。
(現状は年・カテゴリ・タグで絞り込めます。カテゴリ・タグは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
で返すようにしました。