【WordPress】タグクラウドのリンクに好きなclassを追加する

おちです。

少し前に作ったタグクラウド、「各要素に同じクラスつけたらDIVで囲ったりCSSセレクタ使わず選択できるから便利だよなー。」と思ってやってみたら意外とはまったのでメモ。

It’s how to add new class each link in tag cloud. Add a filter in functions.php of your theme.

wp_tag_cloud()の外側をいじるのは少し厄介

タグクラウドそのもののパラメータは簡単に書き換えられるのですが、外側を囲う <a> 要素を変えようと思ったら結構面倒臭いことに気がつきました。

【category-template.php】
$a[] = "<a href='$tag_link' class='tag-link-$tag_id' title='" . esc_attr( $title_attribute ) . "' style='font-size: " .
str_replace( ',', '.', ( $smallest + ( ( $count - $min_count ) * $font_step ) ) )
. "$unit;'>$tag_name</a>";

記述自体はWordPress本体の category-template.php line 776 付近にあるので ここ書き換えればなんぼでも実現するんですが、コアファイルには余り手を入れたくありません。

とりあえず

class='tag-link-$tag_id'

ここにクラスを追記すれば良いことは自明。

タグクラウド

タグクラウドの<a>パラメータに追記する

任意の同一なクラスを追加する / add new class

【function.php】
// タグクラウドのclass追加
function ozTagCloud_add_class( $taglinks ) {
  $tags = explode('</a>', $taglinks);
  $regex = "#(.*tag-link[-])(.*)(' title.*)#e";
    foreach( $tags as $tag ) {
    $tagn[] = preg_replace($regex, "('$1$2 ozHoge'.'$3')", $tag ); // change ozHoge
    }
  $taglinks = implode('</a>', $tagn);
  return $taglinks;
}
add_filter ( 'wp_tag_cloud', 'ozTagCloud_add_class' );

最初に正規表現で該当部分をピックアップ、その後クラス名を挿入して前後をまとめてます。このときのクラス名は ozHoge 。

クラス名を「tag-link-tagID」から「tag-link-slug」に変える

ついでにもう一個。

【function.php】
// タグクラウドのクラス名をIDからSlugに変更
function ozTagCloud_slug_class( $taglinks ) {
  $tags = explode('</a>', $taglinks);
  $regex = "#(.*tag-link[-])(.*)(' title.*)#e";
    foreach( $tags as $tag ) {
    $tagn[] = preg_replace($regex, "('$1'.get_tag($2)->slug.'$3')", $tag );
    }
  $taglinks = implode('</a>', $tagn);
  return $taglinks;
}
add_filter ( 'wp_tag_cloud', 'ozTagCloud_slug_class' );

参考:display tag slug as class per link in tag cloud – WordPress Development

ほぼそのままですが、tag-link-id という形式のクラス名を tag-link-slug に変えます。たとえば タグID が1番である machine というタグがあったとしたら、デフォルトだと tag-link-1 になるところが tag-link-machine になります。

機能的には数字と全く同じものですが、スラッグの方が人が見て判るので管理が楽かも?カレントだけ目立たせたり、色々な使い方が出来ると思います。

作業上の注意

例によって function.php を書き換えるときはバックアップをお忘れなく。
wp_tag_cloud() を挿入するテーマファイルに書き込めばフィルタが限定的に働きますよん。

ちなみに肝心のタグクラウドは誰も使ってくれないのでサイトマップの方に押し込めました。でもタグって概念が好きなんですよ。ディレクトリ型分類の良さを存分に味わった上で串刺し検索も好き。分類楽しい。

それではまた!

【 関連記事 】

自作タグクラウドWordPressのタグクラウドをたった1行で自作・改造する色々

wp_tag_cloud() で作るタグクラウドカスタマイズ。