投稿に紐づけたタグのみをリスト出力するショートコードの作り方（例）

WordPressにはタグクラウドという、サイトに登録されているタグの一覧を紐づく投稿の数で文字の大小を表現するブロックがあります。

これはこれで本文の途中や下に入れたり、ブロックテーマならサイドバー様のものを作って入れたりすれば回遊性のアップにつながると思いますが、全部のタグが表示されるので、現在の投稿と関連性のあるものという感じの表現ではないためクリックされるの？という疑問が残りますね。

そこで今回は、ショートコードを使ってその投稿に設定したタグのみをタグアーカイブページへのリンク付きで表示させるコード例を紹介します。

以下が実際に表示させた例です（この投稿で設定した「ショートコード」というタグのみが表示されています）。

• ショートコード

投稿に紐づけたタグのみをリスト出力するショートコード

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

function pwcn_custom_tag_list_shortcode() {
	// 現在の投稿のIDを取得
	$post_id = get_the_ID();
    
	// 投稿に紐づくタグを取得
	$tags = get_the_tags($post_id);
    
	// タグが存在する場合
	if ($tags) {
		$output = '<ul class="pwcn-tax-auto-link">';

		foreach ($tags as $tag) {
			// タグのアーカイブリンクを作成
			$tag_link = get_tag_link($tag->term_id);
			$output .= '<li><a href="' . esc_url($tag_link) . '">' . esc_html($tag->name) . '</a></li>';
		}

		$output .= '</ul>';
        
		return $output;
	}
    
	return '';
}
add_shortcode('pwcn-tag-list', 'pwcn_custom_tag_list_shortcode');

上記例の表示スタイルでよければ以下のコードを有効化しているテーマのstyle.cssへ貼り付けます。

ul.pwcn-tax-auto-link {
	display: flex;
	list-style-type: none;
	padding-left: 0;
	border: 1px solid #eee;
	padding: var(--wp--preset--font-size--small);
	border-radius: 4px;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
}

ul.pwcn-tax-auto-link a {
	margin: var(--wp--preset--font-size--small);
}

スタイルはサイトに合わせて調整してください

あとは以下のショートコードを任意の場所（ブロックテーマであれば投稿テンプレートの本文の下など）に挿入すれば、投稿に紐づけたタグのみがタグアーカイブページへのリンクと共にリスト表示されます。

[pwcn-tag-list]

結構簡単なコードで実装できますので試してみてくださいね。