タグ表示の均一化

久々に自分のブログテーマを大幅に変更しました。

テーマは人気のSimplicity2を使わせていただいております、シンプルで凄く使いやすいですね。アドセンスの承認も約1週間ほどでいただく事ができて、スタイルをがらっと変えてました。

そこで、良く見かけるタグクラウドの表示を、現在の状態になるまで、ちょこっと悩みましたので、いろいろな所に同様の内容がUPされており、あまり必要ないかもしれませんが、すこしでも参考になればと、内容はほぼ参考URLと同等となっておりますが、覚書もかねて。。。

デフォルトではタグの文字の大きさがばらばらで、どうもしっくりとこなかったため、ネットで調べて、解決しました。作業前は、必ずバックアップを採取してから、進めて下さい、私の場合も、パラメータ更新後表示しなくなったことも、ふつーにありましたので、十分注意して作業して下さい。特に子テーマの利用をお勧めします。以下の例は子テーマを編集しています。編集の基本は、下記のファイルをコピーするだけで良いと思われますが、自己責任でお願いします。

動作環境

WordPress 4.8.2
Simplicity2 2.6.1.1
Simplicity2 child テーマ20161002
PHP5.6

テーマの編集

外観＞テーマの編集　で各パラメータを追記していきます。

Simplicity2 child: スタイルシート (style.css)

/* Simplicity子テーマ用のスタイルを書く */

/*タグクラウドのデザイン*/
.tagcloud a {
 font-size: 14px !important; /* 文字のサイズ */
 line-height: 1em;
 background: #2098a8; /* 背景色 */
 color: #fff; /* 文字色 */
 display: inline-block;
 white-space: nowrap;
 padding: 8px 8px; /* 文字周りの余白 */
 margin-top: 3px; /* タグ同士の余白 */
 border-radius: 4px; /* 角を少し丸く */
 text-decoration: none;
}
.tagcloud a:hover {
 background: #f9d635; /* マウスホバー時の背景色 */
 color: #2098a8; /* マウスオーバー時の文字色*/
}

.tagcloud a:before {
 font-family: "FontAwesome";
 content: "\f02b"; /* 絵文字のコード */
 padding-right: 4px;
}

Simplicity2 child: テーマのための関数 (functions.php)

//以下にSimplicity子テーマ用の関数を書く

// テーマのタグクラウドのパラメータ変更
function my_tag_cloud_filter($args) {
	$myargs = array(
		'smallest' => 10, // 最小文字サイズは 10pt
		'largest' => 10, // 最大文字サイズは 10pt
		'orderby' => 'count', // count_name
		'number' => 45,  // 一度に表示するのはタグ
		'order' => 'DESC', // 表示順はランダムでDESC_ASC_RAND
	);
	$args = wp_parse_args($args, $myargs);
	return $args;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');