web-dev-qa-db-ja.com

クラウドタグアンカーにCSSクラスを追加する方法

CSSクラスをulに追加する方法およびwp_tag_cloud関数を介して生成されたTag Cloudのアンカー要素

wp-tag-cloudのulのデフォルトクラスをtag-cloudにし、アンカータグをbtn btn-xs btn-primaryクラスにします。

<ul class="tag-cloud">
   <li><a class="btn btn-xs btn-primary" href="#">Apple</a></li>
   <li><a class="btn btn-xs btn-primary" href="#">Barcelona</a></li>
   <li><a class="btn btn-xs btn-primary" href="#">iPod</a></li>
</ul>
functionswidgets
4
Ashish

タグは、私がこの答えを書いている日（4.7.5）の最新のWordPressバージョンのDIV要素でラップされています、そしてそれらのクラスはtagcloudですので、私は質問で次に尋ねられることに移ります。

タグはwp_generate_tag_cloudフィルタを使って修正できます。 preg_replaceを書くことによってあなたはあなたが望むものにクラスを変えることができます。これが一例です。

add_filter('wp_generate_tag_cloud', 'my_tag_cloud',10,1);
function my_tag_cloud($string){
   return preg_replace('/class="tag-link-.+ tag-link-position-.+"/', 'class="btn btn-xs btn-primary"', $string);
}

アンカーはtag-link-X tag-link-position-Yクラスを持ち、XとYは数値です。

3
Jack Johansson

wp_generate_tag_cloud_data filter（4.3+）を使ってアンカーCSSクラスを修正することもできます。

そのフィルタを使用して、次のアンカーデータを変更できます。

  • id
  • url
  • role
  • name
  • title（4.8では削除）
  • slug
  • real_count
  • class
  • font_size
  • formatted_count（4.8に追加）
  • aria_label（4.8に追加）
  • show_count（4.8に追加）

4.8属性からわかるように、style属性はハードコードされています。

$a[] = sprintf(
    '<a href="%1$s"%2$s class="%3$s" style="font-size: %4$s;"%5$s>%6$s%7$s</a>',
      esc_url( $tag_data['url'] ),
      $tag_data['role'],
      esc_attr( $class ),
      esc_attr( str_replace( ',', '.', $tag_data['font_size'] ) . $args['unit'] ),
      $tag_data['aria_label'],
      esc_html( $tag_data['name'] ),
      $tag_data['show_count']
  );

Font-size unit は次のように変更することができます。

wp_tag_cloud( [ 'unit' => 'rem', 'smallest' => 1, 'largest' => 4 ] );

またはタグクラウドウィジェット用の widget_tag_cloud_args フィルタを使用します。

例：

ここではすべてのタグクラウドのアンカーにbtn btn-xs btn-primaryクラスを追加します。

add_filter( 'wp_generate_tag_cloud_data', function( $tag_data )
{
    return array_map ( 
        function ( $item )
        {
            $item['class'] .= ' btn btn-xs btn-primary';
            return $item;
        }, 
        (array) $tag_data 
    );

} );
3
birgire

クラスはwp_generate_tag_cloud()関数にハードコードされています。あなたの唯一の選択肢は、wp_generate_tag_cloudフィルタを通して最終文字列出力を修正することです。

2
Rarst