it-swarm.com.de

Wie füge ich CSS-Klasse zu Cloud-Tag-Ankern hinzu?

Wie füge ich eine CSS-Klasse zu ul und Ankerelement der Tag Cloud hinzu, die mit der Funktion wp_tag_cloud generiert wurden?

Ich möchte, dass die Standardklasse für ul von wp-tag-cloudtag-cloud ist und das Ankertag die Klasse btn btn-xs btn-primary hat.

<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>
4
Ashish

Die Tags werden an dem Tag, an dem ich diese Antwort schreibe (4.7.5), in der neuesten WordPress-Version in ein DIV -Element eingeschlossen, und ihre Klasse ist tagcloud. Daher gehe ich zum nächsten Punkt über, der in der Frage gestellt wird.

Die Tags können mit dem Filter wp_generate_tag_cloud geändert werden. Indem Sie einen preg_replace schreiben, können Sie die Klasse nach Belieben ändern. Hier ist ein Beispiel:

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);
}

Anker haben die Klasse tag-link-X tag-link-position-Y, wobei X und Y Zahlen sind.

3
Jack Johansson

Wir können die Anker-CSS-Klasse auch mit dem Filter wp_generate_tag_cloud_data (4.3+) ändern.

Mit diesem Filter können wir die folgenden Ankerdaten ändern:

  • id
  • url
  • role
  • name
  • title (entfernt in 4.8)
  • slug
  • real_count
  • class
  • font_size
  • formatted_count (hinzugefügt in 4.8)
  • aria_label (hinzugefügt in 4.8)
  • show_count (hinzugefügt in 4.8)

Das style-Attribut ist fest codiert, wie aus der 4.8-Version hervorgeht:

$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']
  );

Beachten Sie, dass wir die Schriftgröße unit ändern können mit:

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

oder z.B. mit dem widget_tag_cloud_args Filter für die Tag Cloud Widgets.

Beispiel:

Hier hängen wir die btn btn-xs btn-primary-Klassen an die Anker in allen Tag-Clouds an:

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

Die Klassen sind in wp_generate_tag_cloud() function fest codiert. Sie haben nur die Möglichkeit, die Ausgabe der endgültigen Zeichenfolge über den wp_generate_tag_cloud-Filter zu ändern.

2
Rarst