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

【WordPress】特定ページのカテゴリーに紐づくタグを一覧表示する方法

2024-06-112024-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出力用変数の初期宣言
	
	/**
	 * １．そのページのカテゴリー情報を取得
	 */
	$category = get_the_category()[0];

	// HTML先頭
	$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>

解説

ケケンタ

基本的にはソースコードに記載してあるコメント自体が解説になっていますが、イメージしづらい部分もあるかと思いますのでもう少しかみ砕いてご説明します。

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

処理の大枠の流れ

そのページのカテゴリー情報を取得
①で取得したカテゴリーごとに紐づいている投稿を全取得
②で取得した投稿に紐づいているタグを全取得　→　一覧出力

前述したように、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 );

						～省略～
					}
				}
			}
		}

　　　　～省略～

	}
?>