カスタム投稿も対応！固定ページに貼り付けるだけで使える新着一覧をショートコードで作成【Wordpress】 │ Triple Threat(トリプルスレッド)

こんばんわ。たいそん(@ttaison)です。

wordpressで新着一覧を表示させたい時、どのように表示させていますか？

テーマ内の新着一覧表示の機能を使う？
それとも直接phpテンプレートに、新着一覧表示させるコードを書き込む？

上記のような方法でも悪くないんですが、その新着一覧表示をいろんな場所に使いまわしたいとなると、ひと工夫しないとうまくいきません。

というわけで今回は、固定ページの好きな場所に貼り付けるだけで使える新着一覧表示のショートコードを紹介いたします！

1. そもそもショートコードとは？
2. 新着一覧表示させるショートコード
3. 新着一覧表示するショートコードのカスタマイズ
4. カスタム投稿の新着一覧を表示したい場合
5. まとめ

そもそもショートコードとは？

WordPressの公式では下記のように紹介しています。

ショートコード API は、投稿や固定ページで使える WordPress のショートコードを作るための関数のシンプルなセットです。
ショートコード API

シンプルすぎてわからん　笑

少し補足すると、名前をつけた関数をショートコードという[]に囲まれた部品に変換し、
そのショートコードを好きな場所に貼り付けることで、関数で設定したとおりの表示を展開してくれる便利な機能です。

まだわかりづらいですかね？笑
実際にコードを書いてみましょう。

新着一覧表示させるショートコード

では、さっそく。

function getNewItems($atts) {
	extract(shortcode_atts(array(
		"num" => '',	//最新記事リストの取得数
		"cat" => ''	//表示する記事のカテゴリー指定
	), $atts));
	global $post;
	$oldpost = $post;
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	$retHtml='<div class="post_flex">';
    foreach($myposts as $post) :
    $cat = get_the_category();
    $catname = $cat[0]->cat_name;
    $catslug = $cat[0]->slug;
        setup_postdata($post);
         $retHtml.='<div class="topItemList">';
        $retHtml.='<span class="news_thumb"><a href="'.get_permalink().'">';
        if(has_post_thumbnail()){ $retHtml.=get_the_post_thumbnail($page->ID,'medium');
}else{
$retHtml.='<span class="noimg"><i class="fa fa-camera" aria-hidden="true"></i></span>';}
$retHtml.='</a></span>';
	$retHtml.='<div class="post_desc">';
	$retHtml.='<span class="news_date">'.get_the_date().'</span>';
        $retHtml.='<span class="news_title"><a href="'.get_permalink().'">'.the_title("","",false).'</a></span>';
        $retHtml.='</div>';
        $retHtml.='</div>';
    endforeach;
	$retHtml.='</div>';
	$post = $oldpost;
	wp_reset_postdata();
	return $retHtml;
}
add_shortcode("bloglist", "getNewItems");

ひとまず、すぐ使えるように最低限の説明をします。
使い方は以下の順番で設定してください。

このコードをfunctions.phpに設置する
固定ページの新着一覧表示をしたい場所に[bloglist]を設置
新着の表示数や、特定カテゴリーの記事のみ表示したい場合は引数を指定する　例：[bloglist num=”4″ cat=”2″]

このコードは、functionで定義したgetNewItemsという名前の関数プログラムを、最下部のadd_shorcodeでbloglistという名前に設定し、[bloglist]で展開することができるようにしています。

また、引数（今回の場合numとcat）を設定することで、新着記事の表示数（num）とカテゴリー（cat）の指定をすることができます。

注意点としては、catにはカテゴリー名ではなく、カテゴリーIDを設定すること。カテゴリーIDはカテゴリーの編集で該当カテゴリーの編集画面を開くと、url欄に記載されています。

新着一覧表示するショートコードのカスタマイズ

さて、次はショートコードで表示する内容を変えたい場合のカスタマイズ方法を紹介します。
上記コードの中で出力している内容はすべて$retHtmlで設定されています。

抜粋すると、

$retHtml='<div class="post_flex">';
    foreach($myposts as $post) :
    $cat = get_the_category();
    $catname = $cat[0]->cat_name;
    $catslug = $cat[0]->slug;
        setup_postdata($post);
         $retHtml.='<div class="topItemList">';
        $retHtml.='<span class="news_thumb"><a href="'.get_permalink().'">';
        if(has_post_thumbnail()){ $retHtml.=get_the_post_thumbnail($page->ID,'medium');
}else{
$retHtml.='<span class="noimg"><i class="fa fa-camera" aria-hidden="true"></i></span>';}
$retHtml.='</a></span>';
	$retHtml.='<div class="post_desc">';
	$retHtml.='<span class="news_date">'.get_the_date().'</span>';
        $retHtml.='<span class="news_title"><a href="'.get_permalink().'">'.the_title("","",false).'</a></span>';
        $retHtml.='</div>';
        $retHtml.='</div>';
    endforeach;
	$retHtml.='</div>';

この部分ですね。
これらを展開したときの姿が下記のとおり。

<div class="post_flex">
<div class="topItemList">
<span class="news_thumb"><a href="記事のURL"></a></span>//この部分はサムネイル表示部分で、画像がなかった場合はnoimgクラスのタグが表示される
<div class="post_desc">
	<span class="news_date">記事公開日</span>
	<span class="news_title"><a href="記事のURL">記事のタイトル</a></span>
</div>
</div>
</div>

基本的に$retHtmlでくくられた部分が順繰りに出力されていきます。

なのでカスタマイズする場合は、このretHtml内のhtmlタグ部分を編集し、使ってみてください。

※ちなみに$retHtmlがたくさんあるのは管理がしやすいよう分けているだけなので、連なっている$retHtmlの部分は、すべて一つの$retHtmlにまとめても出力できます。

注意点としては、htmlタグを修正する際に誤って下記の部分を消してしまわないこと。

‘.phpのテンプレートタグ.’

htmlタグの各所にあると思いますが、この’..’で囲われた部分はphpの出力部分なので、囲いが消えると作動しなくなります。
修正する時はこの点に注意して内容を編集してください。

カスタム投稿の新着一覧を表示したい場合

「カスタム投稿とはなんぞや？」
という方は、まずこちらの記事をご覧ください。

カスタム投稿タイプ作成プラグインの決定版「Custom Post Type UI」Wordpress

通常の投稿は上記のコードで表示できますが、カスタム投稿を一覧表示したい場合は少し編集が必要です。
抜粋すると、

$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	$retHtml='<div class="post_flex">';
    foreach($myposts as $post) :
    $cat = get_the_category();

この部分。

get_postsと$catの部分を以下のように編集します。

$myposts = get_posts('post_type=カスタム投稿のスラッグ&numberposts='.$num.'&order=DESC&orderby=post_date&taxonomy=カスタム投稿のスラッグ&term='.$cat);
	$retHtml='<div class="blogs_flex">';
	foreach($myposts as $post) :
	$cat = get_the_terms($post->ID,'表示したいカテゴリーのスラッグ');//get_the_categoryをget_the_termsに変更

カスタム投稿のスラッグと表示したいカテゴリーのスラッグは、それぞれ作ったカスタム投稿の該当するデータを設定してください。

以上で設定は完了です。