この記事にはプロモーションが含まれています。

【WordPress】各カテゴリーに紐づくすべてのタグ一覧を出力する

2024-06-052024-06-18

ケケンタ

WordPressで各カテゴリに紐づいているすべてのタグを一覧で出力したいけど、やり方が分からない……！

今回はこのようなお悩みをお持ちの方に向けて

WordPressで各カテゴリーに紐づく
すべてのタグ一覧を出力する方法

をご紹介します。

WordPressでは以下のような条件なら簡単に出力が可能です。

投稿に紐づくカテゴリー
カテゴリーに紐づく投稿
投稿に紐づくタグ
タグに紐づく投稿

しかし、

「カテゴリーに紐づくタグ」や「タグに紐づくカテゴリー」を出力する場合、ひと手間必要になります。

ケケンタ

今回はこの内、フッターなど、特定のページに依存せずどこのページでもすべてのカテゴリーごとに紐づいているタグの一覧を出力する方法をご紹介します。

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

【ソースコード】各カテゴリーに紐づいているタグの一覧を出力する方法

まずは先に今回の回答であるソースコードを提示させていただきます。

以下のソースコードを「カテゴリー×タグ一覧」を表示したい箇所に記述することで、「各カテゴリーに紐づいているタグの一覧」を出力することが可能です。

<?php 
	/** 
	 * ■ 処理の流れ（大枠）
	 * １．全カテゴリーを取得
	 * ２．各カテゴリーごとに紐づいている投稿を全取得
	 * ３．２で取得した投稿に紐づいているタグを全取得
	 */

	$html = '';  // HTML出力用変数の初期宣言
	
	/**
	 * １．全カテゴリーを取得
	 */
	$categories = get_categories();  
	foreach( $categories as $category ) {

		// HTML先頭（カテゴリごとにdiv要素で区切る）
		$html = '<div>';

		/**
		 * ２．各カテゴリーごとに紐づいている投稿を全取得
		 */
		$args = [
			'category' => $category->term_id,
            'posts_per_page' => -1 // 取得投稿数を「全件」にする　※デフォルトだと5件なので注意
		];
		$category_posts = get_posts( $args );

		// カテゴリーリンクをHTMLに配置
		$html .= '<p><a href="'. get_category_link( $category->term_id ) . '">'. $category->name . '</a></p>';

		/**
		 * ３．２で取得した投稿に紐づいているタグを全取得
		 */
		// タグ重複チェック用配列
		$checked_tag = array();
		foreach( $category_posts as $cat_post ){

			// 各記事のタグを全出力する
			$tags = get_the_tags($cat_post->ID);
			/**
			 * ３-２．記事にタグが登録されているか判定し、登録されていれば全てのタグをリンクとして出力する
			 */
			if( $tags ){  							
				foreach( $tags as $tag ){
					if( in_array( $tag->name, $checked_tag) ){
						// 重複しているタグはスキップ
						continue;
					} else {
						// タグ重複チェック用
						array_push( $checked_tag, $tag->name );

						// タグリンクをHTMLに配置
						$html .= '<p><a href="'. get_tag_link( $tag->term_id ) . '">' . $tag->name . '</a></p>';
					}
				}
			}
		}
		// HTMLを出力
		$html .= "</div>";
		echo $html;
	}
?>

HTMLはハイライト行で生成しています。
レイアウト調整したい場合はその辺りをいじっていただき、CSSをお当て下さい。

出力の様子

上記のソースコードで出力されるHTMLの構成

<div>
  <p><a href="カテゴリアーカイブページへのリンク">カテゴリ名</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ名１</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ名２</a></p>
    ．
    ．
    ．
  <p><a href="タグアーカイブページへのリンク">タグ名Ｎ</a></p>
</div>

<div>
  <p><a href="カテゴリアーカイブページへのリンク">カテゴリ名</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ名１</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ名２</a></p>
    ．
    ．
    ．
  <p><a href="タグアーカイブページへのリンク">タグ名Ｎ</a></p>
</div>


<!-- これ以降もカテゴリの数だけdivタグの塊が出力される -->

【解説】画像説明

ケケンタ

基本的にはソースコードに記載してあるコメント自体が解説になっていますが、イメージしづらい部分もあるかと思いますので画像も使用して解説をしたいと思います。

まず、処理の大枠は次の通りです。

処理の大枠の流れ

全カテゴリーを取得
各カテゴリーごとに紐づいている投稿を全取得
②で取得した投稿に紐づいているタグを全取得　→　一覧出力

前述したように、WordPressでは直接「カテゴリー×タグ」のような関係の情報を一発で取得することが難しいです。

しかし、「投稿」を間に介することで、「カテゴリー×タグ」の関係性を持つ情報を取得することが可能です。

今回の「データ構造」と「処理」のイメージ図

このように

全カテゴリーを取得し、
各カテゴリーに紐づく投稿を取得し、
その投稿たちに紐づくタグを取得し、取得したタグたちを（重複を削除しつつ）出力する

といった流れを踏むことで

今回の主題である「各カテゴリーに紐づいているタグの一覧を出力する」を実現することが可能です。

また、各投稿で同じタグが登録されているとタグ一覧で重複が発生してしまうため、以下の部分で一度出力したタグは2回目の出現からは出力しないよう制御しています。

<?php 

　～省略～

		/**
		 * ３．２で取得した投稿に紐づいているタグを全取得
		 */
		// タグ重複チェック用配列
		$checked_tag = array();
		foreach( $category_posts as $cat_post ){

　　　　　　～省略～

			/**
			 * ３-２．記事にタグが登録されているか判定し、登録されていれば全てのタグをリンクとして出力する
			 */
			if( $tags ){  							
				foreach( $tags as $tag ){
					if( in_array( $tag->name, $checked_tag) ){
						// 重複しているタグはスキップ
						continue;
					} else {
						// タグ重複チェック用
						array_push( $checked_tag, $tag->name );

						～省略～
					}
				}
			}
		}

　　　　～省略～

	}
?>