Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. WordPress

WordPressのテーマを自作する(15)

2021年8月14日 WordPress, プログラミング テーマ自作

 前回の続きです。
前回はサイドバーを作って、タグクラウドなウィジェットを入れてみました。
↓以下のように、属する投稿の数に応じて文字サイズの大きさが異なって表示されます。

タグクラウド1

 これはこれで分かりやすいと言えばそうかもしれないのですが、
見た目的にはどちらかと言えば独特だし、なんかスッキリとしない感があります。 
しかし管理画面で設定できるのはタクソノミーの種類や数の表示だけ・・・。

 どうにか調整できないものかと調べてみたら、こちらを発見!
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;
}

 で、
↓こんな感じになりました。それなりに見やすくなったのではないかと思います。

タグクラウド2

次回に続きます。

関連記事
WordPressのテーマを自作する(23) WordPressのテーマを自作する(22) WordPressのテーマを自作する(21) WordPressのテーマを自作する(20) WordPressのテーマを自作する(19) WordPressのテーマを自作する(18) WordPressのテーマを自作する(17) WordPressのテーマを自作する(16) WordPressのテーマを自作する(14) WordPressのテーマを自作する(13) WordPressのテーマを自作する(12) WordPressのテーマを自作する(11) WordPressのテーマを自作する(10) WordPressのテーマを自作する(9) WordPressのテーマを自作する(8) WordPressのテーマを自作する(7) WordPressのテーマを自作する(6) WordPressのテーマを自作する(5) WordPressのテーマを自作する(4) WordPressのテーマを自作する(3) WordPressのテーマを自作する(2) WordPressのテーマを自作する

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

WordPressのテーマを自作する(14)
WordPressのテーマを自作する(16)

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© katwat