web-dev-qa-db-ja.com

Wp_tag_cloudで現在のタグを強調表示

私はウェブサイトを構築している最中です、そしてページの1つは用語集になるでしょう。用語集の最初のページには、すべての単語のリストが表示されます。これらは、単語の最初の文字を引き出す「文字」というカスタム分類に割り当てられたカスタム投稿タイプです。

用語集の上に、すべてのletters(A-Z)のwp_tag_cloudである「ナビゲーション」があります。ユーザーはその文字をクリックすると、その文字で始まるすべての単語がページに表示されます。

私が持っている質問は、私が現在見ているタグにcurrent-tagスタイルを追加することができる方法があるということです。

これまでの私のコードはこれまでのところです:

  <!-- Glossary Search -->
  <div class="search-container">
    <div class="container">
      <div class="show-search col-lg-8 col-lg-offset-3">
       <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
          <div class="letter-list row-fluid">  


           <!-- IMPORTANT --> <?php wp_tag_cloud( array( 'taxonomy' => 'letter', 'format' => 'flat', 'hide_empty' => false) ); ?>


            <input type="text" value="Search the Glossary" onblur="if (this.value == '') {this.value = 'Search the Glossary';}" onfocus="if (this.value == 'Search the Glossary') {this.value = '';}" name="s" id="glossarySearch" />
          </div>
      </form>
      </div> <!-- end shows-search -->
    </div> <!-- end container -->
  </div> <!-- end search-container -->

ご協力ありがとうございます。

1

あなたがタグテンプレートの中にいるとき、bodyクラスはterm- {termID}で追加されます、それであなたは "wp_generate_tag_cloud_data"をフックしてクラスが存在するかどうかチェックしそしてカスタムクラスをタグに追加することができます;)

 function tribalpixel_tag_cloud_class_active($tags_data) {

        $body_class = get_body_class();

        foreach ($tags_data as $key => $tag) {
            if(in_array('term-'.$tag['id'], $body_class)) {
                $tags_data[$key]['class'] =  $tags_data[$key]['class'] ." active-tag";
            } 
        }
        return $tags_data;
    }

    add_filter('wp_generate_tag_cloud_data', 'tribalpixel_tag_cloud_class_active');

その後はCSSを使ってスタイルを設定します。

4
Tribalpixel

簡単に見てみると、ソースタグクラウドは現在のタグを説明していないので、それをコードに実装するように簡単に微調整することはできません。しかしタグID - class='tag-link-$tag_id'を含むクラスを出力します。

あなたができることはwp_headにフックすることです、あなたがタグアーカイブにいるかどうかチェックして、必要に応じて現在のIDのために要素をスタイルする小さいインラインCSSブロックを出力します。

3
Rarst