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

問題

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;
    } );
} )();

参考サイト

.tag-link-size-1 みたいなクラス名をつけてくれていれば、CSS のみで対応できるのに……。 ↩
「WordPress タグクラウドフォントサイズ」で Google 検索すると、この方法が載っている参考サイト 1 よりも上位に、wp-includes/category-template.php を編集している（ダメゼッタイ）記事や、上記のように CSS で固定しているだけの記事が引っかかってしまうので、この記事を新規に起こしました。 ↩
WordPress のコーディング規約を見直していたところ、add_filter() のコールバックにクロージャーを渡すのは禁止されていたので（remove_filter() で削除できなくなるため）、修正しました（2020-08-17）。 ↩