【WordPress】【小技】タグのデザインをオシャレにカスタマイズする方法

投稿記事でよく見かけるタグ。その記事での主なキーワードをタグとして分類してタグごとに記事の検索ができる便利な機能です。

WordPressでタグを出力させるためには、決まったコードを入れれば簡単に表示できますが、このままですとなんだか味気ない印象を受けるのではないでしょうか。

そこで、投稿タグのデザインをもっとオシャレにカスタマイズする方法を紹介します。

※この記事はWordPressでテーマの自作を試みている初心者の方向けとなっています。

WordPressでタグを表示してみよう

タグの出力自体は非常にシンプル

投稿画面にタグを表示させるために、今回はsingle.phpを編集していきます。

タグを出力させるためには、表示させたい箇所に<?php the_tags(); ?>という一行を入れます。

そうすると、↓のようなタグが出現します。

このまま使用することもできますが、せっかくなのでサイトの色合いに合わせてつい押したくなるボタンをカスタマイズしていきます。

今回は↓のようにタグごとにボタンが四角く囲われていて、マウスを当てると色が変わるようなデザインにしていきたいと思います。

タグにクラスを与える

上の図のようにカスタマイズするためには、タグのキーワード一つ一つにクラスを与えて、それに対してcssで装飾して行く必要があります。

しかし、ブラウザのデベロッパーツールを参照しますと、例えば以下のように自分でクラスを作成して、そのクラス名に直接cssを指定しても思うような結果になりません。実際に私自身も苦戦しました。

<div class="tag-list">
  <?php the_tags(); ?>
</div>

デベロッパーツールでの出力↓

調べてみたところ、こちらのサイトに書かれている方法が非常に参考になりましたので、今回はこの方法でやってみます。

まず、functions.phpに以下のコードを入れます。

function add_class_the_tags($html){
	$postid = get_the_ID();
	$html = str_replace('<a','<a class="contents-tag"',$html);
	return $html;
}
add_filter('the_tags','add_class_the_tags',10,1);

今回は、クラス名をcontents-tagとします。こちらは適宜変更してください。

もう一度、デベロッパーツールを参照してみると以下のようにタグ一つ一つにクラスが与えられているのが分かると思います。

デザインを整える

cssへの記述

style.cssを開き、↓の内容を記述します。

.tag-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 30px;
}
.contents-tag:hover {
	background: #556b2f;
	color: #fff;
	border: 1px solid #bbb;
}
.contents-tag::before {
	font-family: "dashicons";
	content: "\f323";
}

Dashiconsを読み込ませる

各タグの項目の前にはアイコンを表示させていますが、今回はDashiconsというWordPressで用意されているアイコンを使用していきます。

Dashiconsを使用するためにはfunctions.phpに、↓の内容を記述します。

function load_dashicons() {
	wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'load_dashicons' );

これでDashiconsが使えるようになりました。

Dashiconsからアイコンを選ぶ

上のcssを見てみると、Dashiconsはfont-family: "dashicons";を指定した後に、使用したいアイコンのコードを指定しているのが分かると思います。

今回の例は、\f323"のアイコンを指定していますが、もしも他のアイコンに変えたい場合は次の方法で設定できます。

①Dashiconsのサイトからアイコンを選びます。

②Copy CSSを押し、指定のコード（content: "\****";）とfont-family: "dashicons";をcssに貼り付けます。

タグとタグの間に入っている文字や記号を非表示にする

これでアイコンの表示や各項目を四角く囲うことができました。

しかし、今のままですと↓のように「タグ：」やタグとタグの間にカンマが入ってしまっています。

スッキリとした見た目にしたいため、これらを取り除いていきます。やり方はとっても簡単です。

はじめに、single.phpでタグの表示を編集した際に↓のコードを入れたと思います。

<div class="tag-list">
  <?php the_tags(); ?>
</div>

この<?php the_tags(); ?>を<?php the_tags('', '  '); ?>に変えます。

こうすることで、先頭の「タグ：」とカンマを非表示にすることができます、

まとめ

今回のポイント

本日は以上となります。

最後までお読みくださりありがとうございました。

Follow @punibastet