WordPress のタグ・クラウド・ウィジェットのフォント・サイズを変更する方法

問題

WordPress 標準のタグ・クラウド・ウィジェットは、フォント・サイズの指定を、以下のようにインラインで行っています。

<div class="tagcloud">
	<a href="https://example.com/tag/Wordpress" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 16.4pt;" aria-label="WordPress (2個の項目)">WordPress</a>
	<a href="https://example.com/tag/PHP" class="tag-cloud-link tag-link-17 tag-link-position-2" style="font-size: 22pt;" aria-label="PHP (3個の項目)">PHP</a>
	<a href="https://example.com/tag/JavaScript" class="tag-cloud-link tag-link-19 tag-link-position-3" style="font-size: 8pt;" aria-label="JavaScript (1個の項目)">JavaScript</a>
</div>

このため CSS のみでは、フォント・サイズの変更は以下のように固定で指定することしかできません¹。

.tag-cloud-link {
    font-size: 16px !important;
}

解決策（PHP）

調べてみると、widget_tag_cloud_args フィルターで指定できるようである²。

functions.php

/**
 * タグ・クラウド・ウィジェットのフォント・サイズを変更.
 *
 * @link https://codex.wordpress.org/Plugin_API/Filter_Reference/widget_tag_cloud_args
 *
 * @param array[string=>string|float|bool] $args - 上記リンクを参照.
 * @return array
 */
function my_theme_change_tag_cloud_font_size( $args ) {
 $args += array(
 'smallest' => 0.5,
 'default' => 0.7,
 'largest' => 1,
 'unit' => 'rem',
 );
 return $args;
}
add_filter( 'widget_tag_cloud_args', 'my_theme_tag_cloud_font_size' );

³

おまけ：解決策（JavaScript）

最初、このフィルターの存在に気づかずに、JavaScript でやろうとして書いたコード。これでも意図通りに機能しますが、上記方法が使えるので、他所のサイトにユーザー・スクリプトを適用する場合ぐらいしか使い道は思いつきませんが……。

// タグ・クラウド・ウィジェットの文字サイズを調整
( () => {
	const tags = document.getElementsByClassName( 'tag-cloud-link' );
	Object.keys( tags ).forEach( key => {
		// HTMLCollection は、そのまま forEach メソッドは使えない 
		
		const minFontSize = 0.6;
		const maxFontSize = 1.2;
		const fontSizeUnit = 'rem';
		const defaultMinFontSize = 8; // pt
		const defaultMaxFontSize = 22; // pt

		const tag = tags[key];
		const originalFontSize = tag.style.fontSize;
		const fontSizeIncrementPercentage =
				( parseInt( originalFontSize )  - defaultMinFontSize ) /
				( defaultMaxFontSize - defaultMinFontSize );

		tag.style.fontSize =
			minFontSize +
			fontSizeIncrementPercentage * ( maxFontSize - minFontSize ) +
			fontSizeUnit;
	} );
} )();

参考サイト

1. WordPressタグクラウドをカスタマイズ：フォントサイズ指定・並び替え – PIXELISTE

• Modify tag cloud widget font size • CSSIgniter
• テンプレートタグ/wp tag cloud - WordPress Codex 日本語版
• NodeListをforEachしたいときのパターン - yuhei blog

1. .tag-link-size-1 みたいなクラス名をつけてくれていれば、CSS のみで対応できるのに……。 ↩

2. 「WordPress タグクラウド フォントサイズ」で Google 検索すると、この方法が載っている参考サイト 1 よりも上位に、wp-includes/category-template.php を編集している（ダメゼッタイ）記事や、上記のように CSS で固定しているだけの記事が引っかかってしまうので、この記事を新規に起こしました。 ↩

3. WordPress のコーディング規約を見直していたところ、add_filter() のコールバックにクロージャーを渡すのは禁止されていたので（remove_filter() で削除できなくなるため）、修正しました（2020-08-17）。 ↩