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

## 問題

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

``` HTML
<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-link-size]。

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

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

## 解決策（PHP）

調べてみると、``widget_tag_cloud_args`` フィルターで指定できるようである[^2]。

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

```php: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' );
```
[^ins1]
[^ins1]: [WordPress のコーディング規約](https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/php/#%e3%80%8celseif%e3%80%8d%e3%82%92%e4%bd%bf%e3%81%86%e3%81%93%e3%81%a8%e3%80%82%e3%80%8celse-if%e3%80%8d%e3%81%af%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84)を見直していたところ、add_filter() のコールバックにクロージャーを渡すのは禁止されていたので（remove_filter() で削除できなくなるため）、修正しました（2020-08-17）。


## おまけ：解決策（JavaScript）

最初、このフィルターの存在に気づかずに、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](http://www.panarea-is.com/archives/wordpress%E3%82%BF%E3%82%B0%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%EF%BC%9A%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA/)
* [Modify tag cloud widget font size • CSSIgniter](https://is.gd/UejroV)
* [テンプレートタグ/wp tag cloud - WordPress Codex 日本語版](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_tag_cloud)
* [NodeListをforEachしたいときのパターン - yuhei blog](https://yuheiy.hatenablog.com/entry/2015/11/01/092356)