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

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

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

ケケンタ

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

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

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

をご紹介します。

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

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

しかし、

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

ケケンタ

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




ケケンタ

ケケンタのITブログでは、WebアプリPHPLaravel)やWeb制作WordPressコーディング)について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください!


運動不足、気になっていませんか?

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです!

ボタンにカーソルを合わせるだけ
カウントダウンが始まるタイマーをご用意してみました!

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい!

タイマースタート

3:00

※運動不足だと連続3分で取り組んでもかなり息が切れます
(僕は加えて気分もちょっと悪くなりました……)
絶対にご無理の無い範囲でお取り組みください!


目次

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

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

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

<?php 
	/** 
	 * ■ 処理の流れ(大枠)
	 * 1.全カテゴリーを取得
	 * 2.各カテゴリーごとに紐づいている投稿を全取得
	 * 3.2で取得した投稿に紐づいているタグを全取得
	 */

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

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

		/**
		 * 2.各カテゴリーごとに紐づいている投稿を全取得
		 */
		$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>';

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

			// 各記事のタグを全出力する
			$tags = get_the_tags($cat_post->ID);
			/**
			 * 3-2.記事にタグが登録されているか判定し、登録されていれば全てのタグをリンクとして出力する
			 */
			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="タグアーカイブページへのリンク">タグ名1</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ名2</a></p>
    .
    .
    .
  <p><a href="タグアーカイブページへのリンク">タグ名N</a></p>
</div>

<div>
  <p><a href="カテゴリアーカイブページへのリンク">カテゴリ名</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ名1</a></p>
  <p><a href="タグアーカイブページへのリンク">タグ名2</a></p>
    .
    .
    .
  <p><a href="タグアーカイブページへのリンク">タグ名N</a></p>
</div>


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

【解説】画像説明

ケケンタ

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

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

処理の大枠の流れ
  • 全カテゴリーを取得
  • 各カテゴリーごとに紐づいている投稿を全取得
  • ②で取得した投稿に紐づいているタグを全取得 → 一覧出力

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

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

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

各カテゴリーに紐づくすべてのタグ一覧を出力する処理のデータ構造
データ構造
各カテゴリーに紐づくすべてのタグ一覧を出力する処理の流れ①
処理の流れ①
各カテゴリーに紐づくすべてのタグ一覧を出力する処理の流れ②
処理の流れ②
各カテゴリーに紐づくすべてのタグ一覧を出力する処理の流れ③
処理の流れ③

このように

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

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

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

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

<?php 

 ~省略~

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

      ~省略~

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

						~省略~
					}
				}
			}
		}

    ~省略~

	}
?>

まとめ

以上が

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

ケケンタ

調べてみると以外にもこの方法を解説している記事を見つけることができず(探し方の問題はあるかと思いますが……)今回ぼくの方で記事にしてみました。

この記事がお役に立ったなら何よりです。

当ブログではその他にもWordPressやWeb制作、PHPのお役立ち情報を発信しているため、ご興味のある方はぜひ他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました!

WordPressで各カテゴリーに紐づくすべてのタグ一覧を出力する方法のアイキャッチ画像

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次