複数の投稿タイプを混ぜた新着投稿などを表示するためのショートコード作り

WordPressのブロックエディターに標準で搭載されているブロック類は、本当に何をするのにも事足りるものとなりつつあるのですが、なぜないんだろう？と感じるのが、投稿一覧用のブロックです。

あれ？クエリーループもあるし、最近の投稿ブロックもあるのでは？と思った方、正解です！といいたいところですが、この2つには以下のような足りない部分があると個人的には感じます。

まずクエリーループブロックについては

• 複数の投稿タイプからの抽出ができない
• タイトルはタイトルブロックを使うので、見出しタグ以外の選択肢がない
• 並び替えは公開日かタイトル順のみで、最終更新日での並び替えができない
• サイドバーなど細い部分への表示はCSSなどでの半ば複雑な調整が必要

といった不都合と思う部分があり、最新の投稿ブロックでは、

• 投稿タイプは「投稿」のみ、他の投稿タイプの選択も、混合もできない
• 並び替えは公開日かタイトル順のみで、最終更新日での並び替えができない

といった不都合と感じる部分があります。

これを補うために、専用のプラグインをとも考えるものの、ブロックテーマでは使えない「ウィジェット」として追加するものだったり、簡単に表示の調整ができるよう、テンプレートなどがたくさん用意されていて、多分余分なスタイルコードなどをいっぱい吐き出すんだろうなぁと推測するものがほとんどで、しかもカスタム投稿タイプで使えたり、混合させたりできるものがほとんどなく、なかなかいいものは見つかりませんでした。

そこで、WordPressの関数を使って自分でリストを作り、ブロックで作るのは無理なのでショートコードで出力するようにしてみよう！というのが本ページの内容です。

とはいえ、結構柔軟な条件で表示できるようにしているので、結構使い勝手いいかもなんて個人的には思っています（笑）ので、同じ悩みを抱える誰かの参考になれば幸いです。

このカスタマイズでは、有効化しているテーマのfunctions.phpへのコード追加を行います。不慣れな方や、トラブル発生時に対処が困難な方は、別の方法をお探しください（不具合等起きても一切責任は負いません）

2024年3月28日追記

クエリーループブロックで何とかしたいという方は、以下のページの方法で実現できるかも知れませんので試してみてください。

一覧用テンプレート内のクエリーループブロックで複数の投稿タイプを含めて表示させるようにする方法

表示サンプル

以下が今回紹介するコードで実装した場合の表示サンプルです。ブロックテーマのサイドバーとなる部分へ単純にアイキャッチ画像とタイトルを表示させるというものですので、本文へ挿入すると非常に素っ気ない感じです（笑）。でも、カスタマイズして日付や抜粋など表示させるようにすれば本文へ表示してもそれなりな感じにはできるでしょう。

ちなみに紹介するプログラムではちょっと色気？を出して、同一カテゴリーから抽出する、いわゆる関連投稿というのも表示できるようにしています。以下が関連投稿のサンプルです。上の最終更新日順の一覧サンプルと見比べれば出力される内容の違いが確認できると思います。

本ページで紹介していくプログラムは、可能な限り少ないコードで構成していますから理解しやすいかと思いますし、見た目を決めるスタイルコードも最小限にしているので、動作が遅くなったりする心配は少ないと思います。

プログラムコードと解説

基本プログラム

有効化しているテーマのfunctions.phpへ追加するコードです。

一応デザイン部分（後述）を除き、コピペしてショートコードを挿入すれば一覧表示はされるようになると思います。

コードの後で簡易解説をしますので、内容を十分に理解してからの実装をおすすめします

function sample_simple_post_list_sc_with_image($atts){
/***** ショートコードパラメーター（引数） *****/
/* 定義 */
$atts = shortcode_atts(
	array(
		'num' => '',
		'type' => '',
		'key' => '',
		'sort' => '',
		'related' => '',
	),$atts);

/* パラメーターの有無によって条件分岐 */
//表示数（パラメーターなし、未設定の場合は10件）
	$number = $atts['num'];
	if(!empty($number)){
		$num_set = $number;
	}else{
		$num_set = '10';
	}

//投稿タイプ（パラメーターなし、未設定の場合は「投稿」のみ）
	$posttype = $atts['type'];
	if(!empty($posttype)){
		$post_key = $posttype;
	}else{
		$post_key = 'any';
	}

//並び順（パラメーターなし、未設定の場合は「降順」）
	$sort_key = $atts['sort'];
	if(!empty($sort_key)){
		$sort_value = $sort_key;
	}else{
		$sort_value = 'desc';
	}

//並び替え（パラメーターなし、未設定の場合は「最終更新日」）
	$order_key = $atts['key'];
	if(!empty($order_key)){
		$key_value = $order_key;
	}else{
		$key_value = 'modified';
	}

//関連投稿として抽出するか（パラメーターなし、「1」以外の場合は紐づけない）
	$related_key =$atts['related'];
	if(($related_key) == '1'){
		$catarg = get_the_category();
		$cat_key = $catarg[0]->cat_ID;
	}else{
		$cat_key = '';
	}

/***** 一覧の出力 *****/
/* 抽出条件を定義（パラメーターの値を反映） */
$args = array(
	'post_type' => explode( ',', $post_key ), 
	'posts_per_page' => $num_set,
	'order' => $sort_value,
	'orderby' => $key_value,
	'no_found_rows' => true,  //ページャーを使う時はfalseに。
	'cat' => $cat_key,
 );

//新規クエリーの定義
	$the_query = new WP_Query( $args );

//ショートコードでクエリーの内容を出力する（ここから）
ob_start();//出力する内容の宣言ここから
/* ob_start(); return ob_get_clean();で囲まないと、ページ先頭に出力されるので注意 */

// 表示する内容
if ( $the_query->have_posts() ) {//出力するものがあるかどうか
	echo '<ul class="side-post-ul">';

	while ( $the_query->have_posts() ) {//抽出した数だけ繰り返す

		$the_query->the_post();
			//項目を変数化
				$title = esc_html( get_the_title() );
				$url = esc_url(get_the_permalink() );
				$image = get_the_post_thumbnail($post, array( 75, 75),array( 'class' => 'ha-list-thumb' ));

		echo '<li><a href="'.$url.'">' .$image.'<span>'.$title. '</span></a></li>';
	}

	echo '</ul>';

} else {//出力するものがない場合のメッセージ
	esc_html_e( 'コンテンツはありません' );
}

// この関数で抽出したデータをクリア
wp_reset_postdata();


return ob_get_clean();//出力する内容の宣言ここまで
//ショートコードでクエリーの内容を出力する（ここまで）
}
add_shortcode('sample-posts-list','sample_simple_post_list_sc_with_image');

プログラムコードの簡易解説

何をしているかは、コードの中にがっつりコメントで入れていますので、だいたい理解いただけると思います。

このコードは、大きく「wp_queryで条件に合うサイト内のコンテンツを抽出する」「wp_queryに渡す条件をショートコードのパラメーター（引数）で与える」という2つのプログラムで成り立っています。

各プログラムの作り方や役割については、自身で検索するなどして調べてください。

引数の項目を足したり、wp_queryの条件を足したり、表示させる内容を変えることで、いろいろな条件での抽出を可能にしたり、表示内容を変えたりできますから、上記コードを基礎にいろいろと試してみると面白いでしょう。

スタイルコード

有効化しているテーマのstyle.cssへ追記します。

プログラムが上記をコピペしたものであれば、前述のサンプルのような体裁になると思います。

ul.side-post-ul {
    padding-left: 0;
    padding-right: 8px;
}

.side-post-ul li {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px;
    border: 1px solid #eee;
    border-radius: 2px;
    width: 100%;
}

.side-post-ul img {
    float: left;
	margin-right:4px;
}


.side-post-ul:after{
clear:both;
}

プログラムとスタイルコードが追加できたら、以下のショートコードを挿入すると、ひとまず以下の条件で一覧が表示されます。

• 表示件数は10件
• 公開されていて、検索から除外されていない投稿タイプ（投稿や固定ページなど）を表示
• 最終更新日を基準に降順（新しい順）に表示

[sample-posts-list num="" type="" key="" sort="" related=""]

各パラメーター（引数）の意義や設定方法は後述する「ショートコードの使い方」を参照ください。

【注意】親テーマへの追加は避けてください

こんなカスタマイズする方なら当然ご存じでしょうが、親テーマ（公式などで配布されているテーマ）そのものにコード類を追加すると、テーマ更新時にカスタマイズ部分がすべて消えてしまいますから、子テーマやフォークしたテーマで実装するようにしましょう。

ちなみにブロックテーマのフォーク（派生化）の仕方は、以下のページで解説していますので、よかったら読みで見てください。

ブロックテーマを派生化（フォーク）して使う方法

ショートコードの使い方

引数（ショートコードパラメーター）に設定できる内容一覧

本ページで紹介したサンプルコードをそのままコピペ（コードは理解して作成したほうがいいので、あまりお勧めしませんが．．）した場合、以下のショートコードを本文やブロックテーマのサイドバーとなる部分へ挿入すると、パラメーター（引数）に基づいて一覧を表示します。

[sample-posts-list num="" type="" key="" sort="" related=""]

「num」「type」「key」「sort」「related」という5つの引数（パラメーター）を受け取れるようにしていて、指定することで次項以降で説明するような各種条件の変更が行えます。

例えば「key」を「rand」に、「related」を「1」にすると、今表示している投稿のカテゴリーに属するものを10件ランダムに表示する、いわゆる関連するコンテンツを表示させることもできるようにしています

「num」（表示数）

表示するリストの数を半角英数字で指定します。

パラメーター（引数）がない、または指定がない場合には10件表示します。

「type」（投稿タイプ）

「post」「page」などの投稿タイプを指定します。「,」で区切ることで複数指定できます。

パラメーター（引数）がない、または指定がない場合には「any(公開されていて、検索対象から除外されていないものすべて)」（通常使用であれば投稿と固定ページ）が指定されます。

「key」（抽出する基準）

言葉選びが難しいのですが、以下のような指定ができます（例です）。

パラメーター（引数）がない、または指定がない場合には「最終更新日」が指定されます。

引数	基準
ID	投稿や固定ページに振られた一意のID基準
author	作者ID基準
title	タイトル名基準
date	公開日基準
modified	最終更新日基準
rand	ランダム抽出
comment_count	コメント数基準
meta_value	カスタムフィールド値基準

「sort」並び替え（並び順、ソート順）

「key」を基に抽出されたものを「ASC（昇順）」「DESC（降順）」のどちらで並び替えるかを指定します。

パラメーター（引数）がない、または指定がない場合には「降順」が指定されます。

「related」（関連性を加味するか）

値を「1」にすると、そのページが属するカテゴリーと同じものの中から抽出します。

パラメーター（引数）がない、または指定がない、もしくは「1」以外が指定された場合には「すべてのカテゴリー」が指定されます。