WordPressのタグクラウドの表示がおかしい

2015年12月13日カテゴリー : WordPress コメント : 0

　WordPress に限った話ではありませんが、WordPress はセキュリティを高めたりユーザービリティを高めるために頻繁にアップデートを行います。安全にブログを運用するためには必ず最新版を使うこと、という教えを守って更新ボタンをぽちっとするのは良いことなのですが、これにより今までちゃんと表示されていたものがおかしくなるというのはよくあることです。

こちらは先日までちゃんと表示されていたサイドバーのタグクラウドなのですが、

20151213_1

WordPress のバージョンを 4.4 にしたところ、こうなりました。

20151213_2

問題の切り分け

　WordPress が吐き出す HTML ソースを確認すると、サイドバーのウィジェットであれば出力される ASIDE タグや H2 のタイトルタグが出力されずにタグクラウド本体が出力されてしまっています。最初は WordPress の不具合なのかなと疑っていたのですが、テーマを Twenty Fifteen に変更して試したところ、問題なく出力されているので原因がテーマであることがわかりました。

<ASIDE class="widget widget_tag_cloud" id="tag_cloud-2">
    <H2 class="widget-title">タグ</H2>
    <DIV class="tagcloud">
        <A href="https://naokixtechnology.net/tag/sample1">サンプル1</A>
        <A href="https://naokixtechnology.net/tag/sample1">サンプル1</A>
                                ・
                                ・
                                ・
    </DIV>
</ASIDE>

・

</DIV>

</ASIDE>

本来なら出力される HTML ソースが出力されないので、CSS で指定したスタイルが適用されない事態になっている訳です。

原因

　こちらのリンク先を参考にしました。リンク先を読んじゃったら当ブログの説明はいらないかもしれない。てへぺろ☆

WordPress 4.4とタグクラウド | afainu.action.mark2

　気にせず進めますが、原因は function.php に記述したタグクラウドをカスタマイズするフィルターフックです。タグクラウドの大きさや表示件数をカスタマイズしたい場合、function.php に次のようなフィルターフックを記述していると思います。

function my_tag_cloud_filter($args) {
    $myargs = array(
        
        (ここにカスタマイズしたいものを連想配列で指定する)
        
    );
    return $myargs;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

function my_tag_cloud_filter($args) {

$myargs = array(

(ここにカスタマイズしたいものを連想配列で指定する)

);

return $myargs;

}

add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

ネットで調べると、よく見かける指定方法です。当ブログの場合、次のように指定していました。

function my_tag_cloud_filter($args) {
    $myargs = array(
        'smallest' => 11, // 最小文字サイズは 11pt
        'largest' => 11, // 最大文字サイズは 11pt
    );
    return $myargs;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

function my_tag_cloud_filter($args) {

$myargs = array(

'smallest' => 11, // 最小文字サイズは 11pt

'largest' => 11, // 最大文字サイズは 11pt

);

return $myargs;

}

add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

　タグクラウドは、よく使われるタグは文字を大きく表示し、あまり使われていないタグは文字を小さく表示するのが一般的です。私はこのデコボコ感があまり好きではないので、使用頻度にかかわらず大きさを一定にする設定にしています。

　ちなみに、widget_tag_cloud_args でフィルターフックしてタグをカスタマイズできるパラメータの一覧はこちらから確認することができます。

テンプレートタグ/wp tag cloud – WordPress Codex 日本語版

対策

　先ほど紹介したリンク先で詳しく述べられてますが、連想配列 $myargs を直接 return してしまうと、WordPress コアの wp-includes/widgets/class-wp-widget-tag-cloud.php 内で wp_tag_cloud 関数の引数をすべて上書きしてしまうので、wp_tag_cloud 関数の echo パラメータが初期値の true になってしまい、ASIDE や H2 でラッパーされる前に出力されてしまうのだそうです。

これを防ぐには次のように記述します。

function my_tag_cloud_filter($args) {
    $myargs = array(
        'smallest' => 11, // 最小文字サイズは 11pt
        'largest' => 11, // 最大文字サイズは 11pt
    );
    $args = wp_parse_args($args, $myargs);
    return $args;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

function my_tag_cloud_filter($args) {

$myargs = array(

'smallest' => 11, // 最小文字サイズは 11pt

'largest' => 11, // 最大文字サイズは 11pt

);

$args = wp_parse_args($args, $myargs);

return $args;

}

add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

　まずはカスタマイズしたいパラメータの連想配列を作り、その配列と元の配列をマージして、マージしたものをリターンしてあげればちゃんと表示されるようになるはずです。そして、これがちゃんとした指定方法のようです。

ちなみに、このように記述しても一応動作はします。

function my_tag_cloud_filter($args) {
    $myargs = array(
        'smallest' => 11, // 最小文字サイズは 11pt
        'largest' => 11, // 最大文字サイズは 11pt
        'echo' => false
    );
    $args = wp_parse_args($args, $myargs);
    return $args;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');