子カテゴリーのみのリストを表示させるショートコードの作り方

WordPressのブロックエディターで標準装備されている「カテゴリー一覧」ブロック、簡単にカテゴリーの一覧を表示でき、以下のようなオプションがあります。

• ドロップダウンで表示するかどうか
• 投稿数を表示するかどうか
• 最上位レベルのカテゴリーのみを表示するかどうか
• 空のカテゴリーを表示するかどうか
• 階層を表示するかどうか

ただ、その中の一部カテゴリーの一覧を表示させたい場合には、残念ながらこのブロックでは実現できません。

そこで本ページでは、ショートコードを使って、IDが〇〇という親カテゴリーを持つカテゴリーの一覧を表示させるコードを紹介します。

特定の親カテゴリーを持つカテゴリーのリストを出力するショートコード

プログラムの追加

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

function pwcn_display_child_categories_by_parent($atts) {
	$atts = shortcode_atts( array(
		'parentid' => '', // 親カテゴリーのIDを指定
	), $atts, 'child_categories' );

	$parent_category = get_term_by('id', $atts['parentid'], 'category');

	if ($parent_category) {
		$child_categories = get_categories( 
			array(
				'child_of' => $parent_category->term_id,
				'hide_empty' => true,//空カテゴリーも表示する場合はfalse
			)
		);

		$output = '<ul class="pwcn-cat-list-ul">';

		foreach ($child_categories as $child_category) {
			$link = get_category_link( $child_category->term_id );
			$name = $child_category->name;
			$count = $child_category->count; 

			$output .= '<li class="pwcn-cat-list-li">';
			$output .= '<a href="'. $link .'">';
			$output .= $name .'&nbsp;(&nbsp;'.$count.'&nbsp;)';
			$output .= '</a>';
			$output .= '</li>';
		}

		$output .= '</ul>';

		return $output;
    
	} else {
		return '指定されたIDを持つ親カテゴリーがありません';
	}
}
add_shortcode('pwcn-cat-list', 'pwcn_display_child_categories_by_parent');

追加したら、投稿編集画面などで以下のショートコードを挿入し、「parentid」パラメーターへ親カテゴリーのIDを入力すれば、その親カテゴリーを持つカテゴリーの一覧が件数付で表示できます。

[pwcn-cat-list parentid="14"]

上記コードでは、親カテゴリーのIDがない（未入力や見つからない）場合には、「指定されたIDを持つ親カテゴリーがありません」と表示されるようにしていたり、カテゴリーに紐づくコンテンツがない場合にはリストに出力されないようにしたりしていますので、必要に応じて変更してください。

また、表示されるのは子カテゴリーのみですので、親カテゴリーへのリンクも表示させたい場合にはコードの修正を行ってください。

スタイルの追加

プログラムの追加だけでは、単純なリスト表示しかされないので、スタイルを整えます。

以下がサンプルのスタイルコードです。テーマのstyle.cssへ追加します。

ul.pwcn-cat-list-ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
}

li.pwcn-cat-list-li {
	width: calc(50% - 14px);
	border: 1px solid #000;
	border-radius: 4px;
	padding: 4px;
	text-align: center;
	margin: 4px 2px;
}

li.pwcn-cat-list-li a {
	display: block;
	width: 100%;
	padding: 0;
	text-decoration:none;
	font-weight:700;
}


li.pwcn-cat-list-li:hover,
li.pwcn-cat-list-li a:hover
{
	background: #eee;
}

テーマにスタイルコードが追加できる環境がなければ、以下のコードをfunctions.phpへ追加することでも代用できます。

function pwcn_display_child_categories_by_parent_sytle(){
?>
<style>
ul.pwcn-cat-list-ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
}

li.pwcn-cat-list-li {
	width: calc(50% - 14px);
	border: 1px solid #000;
	border-radius: 4px;
	padding: 4px;
	text-align: center;
	margin: 4px 2px;
}

li.pwcn-cat-list-li a {
	display: block;
	width: 100%;
	padding: 0;
	text-decoration:none;
	font-weight:700;
}


li.pwcn-cat-list-li:hover,
li.pwcn-cat-list-li a:hover
{
	background: #eee;
}

</style>
<?php
}
add_action('wp_head','pwcn_display_child_categories_by_parent_sytle');

スタイルは2列表示させたり、ホーバー時の装飾などをしたりしていますが、サイトに合わせて適宜変更してください