【WordPress】タグクラウドのカスタマイズ（投稿数の表示など）

2020/04/19

デフォルトのタグウィジェットのカスタマイズを調べました。せっかくなのでまとめます。

カスタマイズはフィルターフック widget_tag_cloud_args で

タグクラウドは内部でwp_tag_cloud()をコールします。その際の引数にwidget_tag_cloud_argsフックが使用されているので、ここでだいたいの指定を反映させることができます。

PHP

function my_widget_tag_cloud_args( $args ) {
	$args['largest']  = 1;
	$args['smallest'] = 1;
	$args['unit']     = 'em';
	$args['format']   = 'list';

	return $args;
}
add_filter( 'widget_tag_cloud_args', 'my_widget_tag_cloud_args', 10, 1 );

渡された引数はそのままwp_tag_cloud()で使用されるため、使用できるキーとデフォルト値はwp_tag_cloud()のものを確認します。デフォルトは以下。

PHP

$args = array(
	'smallest'                  => 8,
	'largest'                   => 22,
	'unit'                      => 'pt',
	'number'                    => 45,
	'format'                    => 'flat',
	'separator'                 => "\n",
	'orderby'                   => 'name',
	'order'                     => 'ASC',
	'exclude'                   => null,
	'include'                   => null, 
	'topic_count_text_callback' => default_topic_count_text,
	'link'                      => 'view',
	'taxonomy'                  => 'post_tag',
	'echo'                      => true,
	'show_count'                  => 0,
	'child_of'                  => null,
);

また、ここでは触れませんがget_terms()にもそのまま引数が渡るので、get_terms()で使用できる引数も指定することができます（上記'child_of'とか）。

できること

フォントサイズの変更

smallest：一番小さい（件数が少ない）タグのフォントサイズ
largest：一番大きい（件数が多い）タグのフォントサイズ
unit：フォントサイズの単位

デフォルトだと使用頻度の高いものほど大きく、少ないものほど小さく表示されます。aタグのstyle属性でfont-sizeが直接指定されます。以下のように、em単位で設定しておけばcssから指定できるので便利かなと思います。

PHP

$args['smallest'] = 1;
$args['largest']  = 1;
$args['unit']     = 'em';

表示するタグの数の変更

number：表示するタグ数…0を指定すると上限なし

PHP

$args['number'] = 0;

フォーマット（HTMLタグ）の変更

format：表示方法の指定
separator：formatが'flat'の場合の区切り文字

format で指定できる値

'flat'：タグをseparatorで区切る
'list'：タグをclass='wp-tag-cloud'付きのul内に表示
'array'：タグのデータを配列で返す

'array'はデフォルトのタグウィジェットの場合は使いません。

separatorは'flat'の場合のみ出力されます。CSSからきれいに整形するならseparatorは空白にしておくのが良いのではないでしょうか。「タグクラウドのタグの間に謎の隙間が空く」みたいなことでお悩みの場合は以下のようにしてやると良いと思います。

PHP

$args['format'] = 'flat'
$args['separator']  = '';

順番の変更

orderby：タグの並べ方。'name'（あいうえお順）／'count'（投稿数順）から選択
order：タグの並び順。'ASC'（昇順）／'DESC'（降順）／'RAND'（ランダム）

デフォルトは'name'＋'ASC'で、検索性は高いと思います（そういう主旨ならnumberは0の方が良いと思います）。

よく使うタグを見てほしい／タグが多いので表示数を制限するなら'count'＋'DESC'が良いかなと。'RAND'は毎回変わるのでユーザーが戸惑う気はします。

PHP

$args['orderby'] = 'count';
$args['order']  = 'DESC';

タグクラウドに含めるタグ／含めないタグをホワイトリスト／ブラックリストで直接指定する

exclude：タグクラウドから除外するタグをブラックリスト方式で指定
include：タグクラウドに表示するタグをホワイトリスト方式で指定

特定のタグをタグクラウドに出したくない場合はexclude、特定のタグだけでタグクラウドを作りたい場合はincludeを使用。いずれもカンマ区切りでterm_idを指定。

以下はterm_idが3と5のタグを除外する場合の例。

PHP

$args['exclude'] = 3,5;

topic_count_text_callback

wp_generate_tag_cloud()に渡す引数で、コード読む限りaria-label属性をカスタマイズするっぽいです。

aria-label属性はタグをマークアップするHTMLに付与されるアクセシビリティ向けの属性で、デフォルトで「タグ名（N個の項目）」と表示されます。

デフォルトで問題なさそうだったのであんまりじっくりコードを追えていませんが、パッと見で何をするものなのか分かり辛いと思うので参考までに書きました。

タグの編集画面へのリンクを表示する

あんま使う機会が分からないですが。WordPressを社内システムっぽく使ったりとか、ユーザー編集型のコンテンツを提供する場合とか？以下のようにすると管理画面のタグ編集画面に飛びます。当然、ログインは求められます。

PHP

$args['link'] = 'edit';

カスタム分類（カスタムタクソノミ）のタグを表示させる

デフォルトの「タグ」ではなく、自分で作ったタクソノミ（タグ・カテゴリー）をタグクラウドに表示します。スラッグで指定。以下はタクソノミmy_taxを表示する例。

PHP

$args['taxonomy'] = 'my_tax';

複数のタクソノミを指定する場合は配列で。以下はデフォルトのタグ（'post_tag'）に加えて自作のmy_taxタグを表示する例。

PHP

$args['taxonomy'] = array('post_tag','my_tax');

投稿数を表示する

PHP

$args['show_count'] = true;

このキーはWordPress4.8.0から追加されたものです。古いブログ記事とかだと、WordPressのコアを編集するような内容が出てきますが、アップデートで上書きされるのでやめましょう（検索上位にいくつか出てきて、これはいかんなと思ったので、この記事を書きました）。独自関数を作る方法が指南されている場合もありますが、4.8以降はフックの引数を投げてやるだけでデフォルトのウィジェットが使えるので、タグクラウドに投稿数が表示したいだけならこの方が楽で良いと思います。

さらに高度なカスタマイズ（wp_generate_tag_cloud_data）

上記は引数を投げてやればOKな方法でしたが、フィルターフックwp_generate_tag_cloud_dataを使ってちょろっとコードを書くと更にいろいろできます。

category-template.php in tags/5.3/src/wp-includes – WordPress Trac

こういう感じのデータが入っています。

wp-includes/category-template.php

$tag_data = array(
	'id' => 209,
	'url' => 'https://example.com/tag/example/',
	'role' => '',
	'name' => 'タグのタイトル',
	'formatted_count' => '1個の項目',
	'slug' => 'example',
	'real_count' => 1,
	'class' => 'tag-cloud-link tag-link-209',
	'font_size' => 1,
	'aria_label' => ' aria-label="タグのタイトル (1個の項目)"',
	'show_count' => ' (1)',
);

a タグの class を変更する

CSSフレームワークとか、命名規則に沿ったclassを与えたい場合に。

PHP

function my_wp_generate_tag_cloud_data( $tags_data ){
	foreach( $tags_data as $key => $tag_data ){
		$tags_data[$key]['class'] = $tag_data['class'] . ' my_tag_cloud_class';
	}
	return $tags_data;
}
add_filter( 'wp_generate_tag_cloud_data', 'my_wp_generate_tag_cloud_data', 10, 1 );

classのところにclass属性の値が入っています。上記サンプルコードでは値を追加しています。別に上書きしても良いとは思います。

一定の投稿数以下のタグをタグクラウドから非表示にする

PHP

function my_wp_generate_tag_cloud_data( $tags_data ){
	foreach( $tags_data as $key => $value ){
		if ($tags_data[$key]['real_count'] <= 1) {
				unset($tags_data[$key]);
		}
	}
	return $tags_data;
}
add_filter( 'wp_generate_tag_cloud_data', 'my_wp_generate_tag_cloud_data', 10, 1 );

real_countのところに投稿数が入っています。上記サンプルコードでは投稿数1以下の場合にタグクラウドのデータから削除しています。

その他

試してないけど出来そうなこと。ゼロから作るよりはラクではないかと思います。多分。

タグのタイトルに特定の文字列が含まれる場合に表示を変える
投稿件数が一定数以上／以下の場合にタグの表示を変える
投稿数カウントの部分のclassやHTMLタグなどを変更

自作タグクラウド

上記で紹介した方法ならちょっとコード書くだけで割といろんなカスタマイズができるし、デフォルトのタグクラウドを使っておけばアクセシビリティ対応とかも良い感じにやってくれるので十分便利だと思います。

…が、それでもどうしても満たせない要求仕様があって自作で頑張るしかない場合もあるかもです。wp_tag_cloud()やwp_generate_tag_cloud()といった関数を使って加工するか、get_terms()で取得してきて作ってもいいと思います（割とシンプルなのでむしろ簡単かもしれない）。

PHP

$terms = get_terms( 'post_tag' );
if ( ! empty( $terms ) && !is_wp_error( $terms ) ){
	echo '<ul>';
	foreach ( $terms as $term ) {
		echo '<li><a href="' . get_term_link( $term ) . '">' . $term->name . '(' . $term->count . ')</a></li>';
	}
	echo '</ul>';
}