前回の続きです。
前回はサイドバーを作って、タグクラウドなウィジェットを入れてみました。
↓以下のように、属する投稿の数に応じて文字サイズの大きさが異なって表示されます。
これはこれで分かりやすいと言えばそうかもしれないのですが、
見た目的にはどちらかと言えば独特だし、なんかスッキリとしない感があります。
しかし管理画面で設定できるのはタクソノミーの種類や数の表示だけ・・・。
どうにか調整できないものかと調べてみたら、こちらを発見!
widget_tag_cloud_args なフィルターでカスタマイズできるようです。
ちなみに設定可能な項目は以下の通りです。
wp-includes/category-template.php の wp_tag_cloud() でやってますね。
$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',
'post_type' => '',
'echo' => true,
'show_count' => 0,
);
ということで、文字サイズが変化しないようにカスタマイズします。
サイズの最小と最大値を同じにしてしまえばOK。
functions.php に以下のコードを追加しました。
add_filter( 'widget_tag_cloud_args', function( $args, $instance ) {
$args['smallest'] = 15;
$args['largest'] = 15;
$args['unit'] = 'px';
return $args;
}, 999, 2 );
さらに見た目を調整するためのCSSを書いておきました。
.widget-list .widget {
text-align: center;
}
.tagcloud {
display: flex;
flex-wrap: wrap;
}
.tag-cloud-link {
border: 1px solid silver;
border-radius: 1em;
flex: auto;
margin: 0 .25em .5em .25em;
}
で、
↓こんな感じになりました。それなりに見やすくなったのではないかと思います。
次回に続きます。