webentwicklung-frage-antwort-db.com.de

Wie füge ich eine Klasse zum Tag Cloud Widget hinzu?

Ich versuche derzeit, Stile zu den Links im Tag-Cloud-Widget hinzuzufügen, von denen ich sehe, dass sie wp_tag_cloud() verwenden, um die Cloud selbst auszugeben. Die Argumente in wp_tag_cloud () enthalten keinen Klassennamen, was ich möchte, da die Gestaltung des title-Attributs nicht sehr effizient ist und nicht viel Wachstum zulässt. Zum Beispiel:

.widget .tagcloud a[title~="1"]{
    color: red;
  }
  .widget .tagcloud a[title~="2"]{
    color: yellow;
  }
  .widget .tagcloud a[title~="9999"]{
    color: purple;
  }

Ich habe den wp_generate_tag_cloud_data-Filter gefunden, der so aussieht, wie ich es möchte, aber mir muss etwas fehlen, da er keine Wirkung hat. Folgendes habe ich bisher:

add_filter( 'wp_generate_tag_cloud_data', 'my_tag_cloud_data', 10, 1 );

function my_tag_cloud_data($tags_data){

foreach ( $tags as $key => $tag ) {
    $tag_id = isset( $tag->id ) ? $tag->id : $key;
    $tag_class= 'tag-link-' . $tag_id;

    $count = $counts[ $key ];
    $real_count = $real_counts[ $key ];

    if ($real_count > 20){
        $tag_class= 'tag-link-' . $tag_id . ' x-large';
    } elseif ($real_count > 15){
        $tag_class= 'tag-link-' . $tag_id . ' large';
    } elseif ($real_count > 7){
        $tag_class= 'tag-link-' . $tag_id . ' medium';
    } elseif ($real_count > 1){
        $tag_class= 'tag-link-' . $tag_id . ' small';
    } else {
        $tag_class= 'tag-link-' . $tag_id . 'x-small ';
    }

    if ( $translate_nooped_plural ) {
        $title = sprintf( translate_nooped_plural( $translate_nooped_plural, $real_count ), number_format_i18n( $real_count ) );
    } else {
        $title = call_user_func( $args['topic_count_text_callback'], $real_count, $tag, $args );
    }

    $tags_data[] = array(
        'id'         => $tag_id,
        'url'        => '#' != $tag->link ? $tag->link : '#',
        'name'       => $tag->name,
        'title'      => $title,
        'slug'       => $tag->slug,
        'real_count' => $real_count,
        'class'      => $tag_class,
        'font_size'  => $args['smallest'] + ( $count - $min_count ) * $font_step,
    );
}

return $tags_data;

}

Ich habe versucht, mit der Priorität zu spielen und sie in eine Funktion zu packen, die an den Init-Hook gebunden ist, aber ohne Erfolg. Ich wäre sehr dankbar, wenn mir jemand sagen könnte, was ich hier falsch mache.

filterswidgets
2
mantis

Sie möchten nur einen Klassennamen basierend auf der Anzahl hinzufügen. Ihr oben stehender Code sieht so aus, als hätten Sie ihn von irgendwoher kopiert/eingefügt, aber das alles brauchen Sie nicht.

Ich habe das gerade mit wp_generate_tag_cloud_data(# L869) und wp_tag_cloud() getestet und es funktioniert.

Leider repräsentiert die kleine count für eine einfache Test-Site wie meine die größte Anzahl von Tags für mich. Möglicherweise möchten Sie Ihre Größen basierend auf einem normalisierten font_size hinzufügen. Machen Sie im Wesentlichen ein bisschen Mathe, um es in 0-1 zu verwandeln, und wählen Sie Ihre Klassen mit diesem Wert aus - nicht count .

add_filter( 'wp_generate_tag_cloud_data', 'my_tag_cloud_data', 10, 1 );

function my_tag_cloud_data( $tags_data ) {

    foreach ( $tags_data as $key => $tag ) {

        // get tag count
        $count = $tag [ 'real_count' ];

        // adjust the class based on the size
        if ( $count > 20 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag x-large';
        } elseif ( $count > 15 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag large';
        } elseif ( $count > 7 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag medium';
        } elseif ( $count > 1 ) {
            $tags_data [ $key ] [ 'class' ] .= ' tag small';
        } else {
            $tags_data [ $key ] [ 'class' ] .= ' tag x-small ';
        }
    }

    // return adjusted data
    return $tags_data;
}

CSS

<style>
    .tag.x-large {
        color: red;
    }
    .tag.large {
        color: green;
    }
    .tag.medium {
        color: blue;
    }
    .tag.small {
        color: yellow;
    }
    .tag.x-small {
        color: orange;
    }
</style>
0
jgraup