WordPress のタグクラウドをカスタマイズするメモ書きです。
ウィジェットエリアに追加したタグクラウドはデフォルトだとすぐに見難くなってしまいます。なので今回は widget_tag_cloud_args のフック用関数を利用して調整してみました。
デフォルトの状態だとこんな感じだと思います。
デフォルト状態のタグクラウド表示例
表示件数とかスタイルシートを調整してこのようにしてみました。
カスタマイズ後のタグクラウド表示例
今回行ったカスタマイズは以下で説明していきます。
スポンサーリンク
タグクラウドで表示する内容の調整方法
カスタマイズはコアファイルを弄ることなくフィルターフックを利用して行いますが、デフォルトの設定は wp-includes/category-template.php の521行目あたりに記述されています。
function wp_tag_cloud( $args = '' ) {
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
'format' => 'flat', 'separator' => "\n", 'orderby' => 'name', 'order' => 'ASC',
'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'echo' => true
);
$args = wp_parse_args( $args, $defaults );
処理を覗いてみると、wp_tag_cloud 関数に渡された引数 ($args) と、デフォルト値 ($defaults) が wp_parse_args でマージされて表示方法が決定するようです。
この $args に引数を設定するには widget_tag_cloud_args というフィルターフックを利用します。
マージされるので変更したい項目だけを弄ってもよさそうですが、こんな感じに後から変更しそうな設定箇所を functions.php に追加しました。
function custom_tag_cloud() {
$args = array(
'smallest' => 100,
'largest' => 100,
'unit' => '%',
'number' => 30,
'format' => 'list',
'separator' => "\n",
'orderby' => 'count',
'order' => 'DESC'
);
return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud');
引数に渡す設定項目
smallest 最少使用数のタグの表示に使うフォントサイズ (デフォルト: 8) largest 最多使用数のタグの表示に使うフォントサイズ (デフォルト: 22) unit smallest・largest のフォント単位 pt, px, em, % (デフォルト: pt) number 表示するタグの数。0 で無制限 (デフォルト: 45) format タグ表示のフォーマット
flat: スペースで表示 (デフォルト値)
list: class=’wp-tag-cloud’ 付きの ul タグ内に表示separator タグの区切り (デフォルト: “\n”) order タグの表示順
name: タグ名 (デフォルト値)
count: タグの使用数orderby ソート順
ASC: 昇順 (デフォルト値)
DESC: 降順
RAND: ランダム
これでタグクラウドの表示方法が変わりましたので、次にスタイルシートを調整していきます。とりあえず、こんな感じにしてみました。
.wp-tag-cloud li {
margin: 0 5px 5px 0;
margin: 0 0.3571428571428571rem 0.3571428571428571rem 0;
padding: 0 8px;
padding: 0 0.5714285714285714rem;
float: left;
background-color: #f5f5f5;
}
.wp-tag-cloud a {
text-decoration: none;
}
.wp-tag-cloud :hover {
background-color: #b0c4de;
}
これでタグクラウドのカスタマイズは完了です。
意外と簡単にできました。
参考にしたページ