タグクラウドのウィジェットを使うと、タグをサイドバーやフッターなどに表示できますが、タグの数が増えてくると、一覧にして見たり、印刷してチェックしたくなります。
全てのタグを表示する方法はいろいろありますが、今日はお手軽にできるレシピをご紹介します。
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>に装飾クラスを設定しています。ここは、きちんとリスト形式にしていただいても結構です。
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 を与えてやってみてください。
また、カテゴリーなどの一覧にも応用できます。