PR

全てのタグ一覧を固定ページに表示する方法

WordPress

タグクラウドのウィジェットを使うと、タグをサイドバーやフッターなどに表示できますが、タグの数が増えてくると、一覧にして見たり、印刷してチェックしたくなります。

全てのタグを表示する方法はいろいろありますが、今日はお手軽にできるレシピをご紹介します。

WordPress 5.x 以上を前提にしています。テーマは何でも構いません。

スポンサーリンク

材料(関数)の準備

使用する関数は get_tags( $args ) と get_tag_link( $tag_id ) です。

タグの一覧を返してくれてる get_tags() の戻り値の型は array です。今回は引数 $args を与えていませんが、$args をオーバーライドしてから get_tags() を呼び出すことで、並び順やグループ分け、除外の指定など、細かい出力制御ができます。初期値は、名前順です。

get_tag_link() は、$tag_id を与えると、そのタグのアーカイブへのURLを返してくれます。戻り値の型は string です。

get_tag() とは違いますので、ご注意。

レシピ(設計とコーディング)

何はともあれ、コードとスタイルの例をご紹介します。

先ほどの関数を用いて、タグの一覧の配列を取得し、全てのタグについて、タグの名前とアーカイブへのリンクを取得して、HTML形式で変数に格納する関数 displayAllTags() を定義してみました。

タグの存在を確認した後、おなじみの foreach() を用いて、一行ずつ<span>~<span><br>の中にアンカータグ<a>~</a>を組み立てています。

ご自身で改造するときは、” と ‘ の区別に気を付けましょう。私は、変数の両隣に { … } を付ける派です。

functions.php

functions.php に追記するコードはこのようにしました。

function displayAllTags() {
	$tags = get_tags();
	$html = '<p>';
	if ( $tags ) {
		foreach ( $tags as $tag ) {
			$taglink = get_tag_link( $tag->term_id );
			$html .= "<span class='tag_display'> <a href='{$taglink}'>";
			$html .= $tag->name."</a></span><br>";
		}
	}
	return( $html.'</p>' );
}
add_shortcode( 'tag_display', 'displayAllTags' );

各タグに、get_tag_link() を用いて、タグ毎の記事の一覧へのリンクを貼っています。$html へのHTMLコードの格納は、この記事を見やすくするために二行に分けています。

できれば、上記の例のように、<div>タグではなく、<p>タグでくくってください。その大きな<p>~</p>内に、タグ毎の<span>~</span>を入れて、<span>に装飾クラスを設定しています。ここは、きちんとリスト形式にしていただいても結構です。

functions.php を編集するときは、もともとのコードをそのままにしておくことと、追記するコードが完全に動作することをローカル環境やテストサイトなどで確認してください。(今はロールバック機能があるから昔ほど怖くないけど)

style.css

子テーマのスタイルシートに追記するクラスは次のとおりです。Font Awesome 5 Free を使っています。( Font Awesome はテーマ側で準備されているか、ご自身で準備の前提)

昔(v4)と違い、font-family をこのように設定してください。また、font-weight を 400 か 900 に必ず設定してください。(Freeの場合) バックスラッシュの部分は「\」マークです。

.tag_display::before {
	color: #deb887;
	font-family:'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f02c';
}

::before 疑似要素で、各タグの先頭にアイコンを付けています。アイコンの種類や色など、お好きなものに変更してください。

固定ページを用意

固定ページをひとつ用意してください。タイトルは「全てのタグ一覧」などとします。お好きな名前でどうぞ。もちろん、投稿ページでもカスタムページでも結構です。

次に、その固定ページに、[tag_display] とショートコードを書いてください。(上記の例の場合) ※ショートコード名は好きな名前を付けてください。add_shortcode() も忘れずに。

その固定ページを保存してください。

できあがりはこちら(実装例)

上記のコードと固定ページをセットして、タグ一覧を表示させました。

一覧を見たり、印刷してチェックしたりするのが便利になりました。(^^♪

今回は、単純な名前順で全てのタグを表示させましたが、様々な条件でタグを表示することができますので、WordPress Codex を参考に get_tags() に $args を与えてやってみてください。

また、カテゴリーなどの一覧にも応用できます。

タグ一覧のようなページは、通常、Google 等の検索エンジンのクローラーが読み込まないように設定します。( noindex と nofollow を指定する等 )

また、警告をもらわないためにも、広告を非表示にすることをお勧めします。