WordPress Tag Cloud anzeigen/einfügen und CSS Styling

Die Tag Cloud wird auch heute noch gerne genutzt um die Gewichtung einzelner Kategorien bzw. Themenbereiche einer Seite grafisch darzustellen. Das geht heute über die Widgets in der Sidebar aber um die Tag-Cloud an einer beliebigen Stelle im Theme anzeigen zu lassen, greift man lieber direkt zum Code und fügt ihn in den Template Dateien ein.

Mit dem nachfolgenden HTML- und PHP-Code fügst Du die Tag-Cloud einfach in deine vorhandenen Theme Dateien ein und mittels des CSS-Script verpasst du dem ganzen einen ansprechendes Styling.

So fügst Du die WordPress Tag-Cloud ein

Ganz einfach geht dies mit dem Codeschnipsel <?php wp_tag_cloud(); ?> den man in den Theme Dateien einfügt, doch das ist für Anfänger und sieht meist doof aus.

Wir verfeinern die Funktion deshalb ein wenig und machen ein array daraus. So können wir mehrere Werte übergeben die das Aussehen der Tag-Cloud beeinflussen.

<div class="tag-cloud">				
<?php wp_tag_cloud( array(
   'orderby'  => 'name', // Alphabetische Anordnung nach Name des Tags
   'order'    => 'ASC', // Sortierung (ASC aufsteigendes Alphabet, DESC absteigend)
   'taxonomy' => 'post_tag', // Tags innerhalb eigener Taxonomie anzeigen
   'number'   => '45', // Maximale Anzahl der angezeigten Tags
   'smallest' => '6', // Schriftgröße für die Darstellung des seltensten Tags
   'largest'  => '30', // Schriftgröße für die Darstellung des meistgenutzten Tags
   'unit'     => 'px', // Einheit für die Größendarstellung (px steht für Pixel)
) ); ?>
</div>

Weitere Anpassungen der Tag Cloud sind möglich. Siehe hier

CSS Styling der Tag Cloud in einem modernen Design

Damit deine Tag Cloud auch gut aussieht, musst Du nur noch ein bißchen CSS in die style.css deines Themes einfügen. Am besten fügst Du das CSS am Ende deiner style.css Datei ein. So überschreibt es evtl. vorhandene vorherige Stylings.

In die stylesheet.css Datei einfügen:

.tag-cloud a{
    color:#fff;
    font-weight:bold;
    text-decoration:underline;
    text-transform:lowercase;
    display:block;
    padding:5px 8px;
    margin-right:6px;
    margin-bottom:6px;
    float:left;
    background:#9BC2FF;
    border-radius:10px;
    border:1px solid #000;
}

.tag-cloud a:hover{
    text-decoration:none;
    color:#000;
    background:#fff;
}

So schaut es dann aus:

Tag Cloud anpassen

Im Array kann man noch weitere Anpassungen der WordPress Tag Cloud einstellen. Zum Beispiel einzelne Tags ausblenden/einblenden über die include und exclude Funktion. So können einzelne Tags angezeigt oder aber nicht angezeigt werden in der Tag Cloud.

Nachfolgend ist eine Liste mit Anpassungsmöglichkeiten der Tag Cloud. Eingefügt werden diese wie oben im ersten Beispiel des Arrays erläutert.

'format'     => 'flat', // oder als Liste mit "list"
'separator'  => "\n", // wie sollen die einzelnen Tags getrennt werden (Komma oder | z.B.)
'exclude'    => '11', // Post id / Page id 11 ausblenden
'include'    => '12', // Post id / Page id 12 anzeigen
'link'       => 'view',
'taxonomy'   => 'post_tag', // möglich wäre z.B. auch der Wert category um Kategorien als Cloud anzuzeigen
'post_type'  => '', // post, page
'echo'       => true,
'show_count' => 0,

Weitere Informationen dazu gibt es in der Tag Cloud Reference der WordPress Organisation.

Getagg0rt mit: Wordpress, Wordpress Tips