Skip to content

Alles für WordPress, Webentwicklung — und mehr

☁️ So zeigst du eine Schlagwortwolke in WordPress an: manuelle Methode und eingebauter Block

☁️ So zeigst du eine Schlagwortwolke in WordPress an: manuelle Methode und eingebauter Block

Schlagwortwolken: dieses Element in der Seitenleiste, das viele installieren und dann vergessen. Mechanisch, „einfach damit es da ist". Das ist ein Fehler: Eine gut gestaltete Wolke sammelt interne Navigationsklicks genauso effektiv wie ein Navigationsmenü. Besonders auf Websites mit Hunderten von Beiträgen, wo die Kategorienavigation nicht mehr hinterherkommt.

Das Problem: Das Standard-Widget „Schlagwortwolke" ist kaum konfigurierbar. Schriftgröße, allenfalls. Farben, keine. Form, eine flache Linkliste, die man lieber nicht herzeigt. Wenn das Theme keine Styles dafür vorgesehen hat, ist das Ergebnis deprimierend.

Glücklicherweise bietet WordPress zwei Wege: den manuellen Aufruf von wp_tag_cloud() direkt in den Theme-Dateien und den nativen Block „Schlagwortwolke" in Gutenberg. Der erste gibt vollständige Kontrolle über das Markup, der zweite funktioniert, wenn Sie etwas Schnelles und Code-freies brauchen. Wir behandeln beide im Folgenden mit lauffähigen Snippets, Screenshots und Video.

💡 Kurzüberblick:

  • Fügen Sie wp_tag_cloud() in sidebar.php oder footer.php ein, um eine Schlagwortwolke an beliebiger Stelle zu erhalten
  • Gestalten Sie die Ausgabe per CSS: Schaltflächen mit Hintergründen, abgerundeten Ecken und Hover-Effekten
  • Nutzen Sie den Block „Schlagwortwolke" im Gutenberg-Editor (drei Klicks, null Code)
  • Sehen Sie sich das Video-Tutorial zur Einrichtung direkt aus dem WordPress-Administrationsbereich an

Manuelle Ausgabe über wp_tag_cloud()

WordPress enthält die Funktion wp_tag_cloud() seit Version 2.3. Sie sammelt alle Schlagwörter der Website, zählt die Nutzungshäufigkeit und erzeugt eine Wolke, in der die Schriftgröße jedes Schlagworts proportional zur Anzahl der Beiträge ist, die es enthalten. Der Aufruf wird direkt in eine Theme-Datei eingefügt, dort, wo die Wolke erscheinen soll.

Grundlegendes Snippet für sidebar.php, footer.php oder ein eigenes Template:

1<?php
2wp_tag_cloud( array(
3 'smallest' => 8,
4 'largest' => 22,
5 'unit' => 'pt',
6 'number' => 45,
7 'orderby' => 'name',
8 'order' => 'ASC',
9 'taxonomy' => 'post_tag',
10 'format' => 'flat',
11) );

Was die Parameter bedeuten (vollständige Liste in der WordPress-Dokumentation):

smallest und largest: minimale und maximale Schriftgröße. Standard sind 8 und 22 Punkt. Wenn die Spanne unharmonisch wirkt, grenzen Sie sie ein (zum Beispiel 10 und 18).

unit: Maßeinheit. Standard ist pt, aber jede CSS-Einheit wird akzeptiert: px, em und rem. Für Bildschirme sind Pixel gebräuchlicher.

number: wie viele Schlagwörter angezeigt werden. Null bedeutet „alle". In der Praxis sind 45 bis 50 ausreichend; sonst wird die Wolke zu einem Durcheinander hunderter unterschiedlich großer Links.

orderby: Sortiermethode. name ergibt alphabetische Reihenfolge, count zeigt die häufigsten zuerst. Die Kombination von orderby => 'count' mit order => 'DESC' setzt beliebte Schlagwörter an den Anfang.

taxonomy: die Taxonomie. Standard ist post_tag, aber Sie können category oder eine benutzerdefinierte Taxonomie aus einem Onlineshop einsetzen, um eine Wolke aus Kategorien oder Produktschlagwörtern zu erhalten.

format: Ausgabeformat. flat (Links durch Leerzeichen getrennt), list (Aufzählungsliste) oder array (ein Array für die weitere PHP-Verarbeitung).

Die Funktion kann bedenkenlos an jeder Stelle im Theme platziert werden. Wenn Sie eine separate Seitenvorlage mit der Wolke benötigen, erstellen Sie page-tagcloud.php, fügen Sie den wp_tag_cloud()-Aufruf zwischen get_header() und get_footer() ein und weisen Sie dieses Template dann im Administrationsbereich einer Seite zu.

Schlagwörter per CSS gestalten

Die Funktion gibt rohes HTML aus: Schlagwörter innerhalb von <a>-Elementen, umschlossen von <div class="tagcloud">. Ohne CSS ist das ein Wirrwarr unterschiedlich großer Links. Die folgenden Styles machen daraus ordentliche Schaltflächen:

Schlagwortwolke-Tags als kompakte Schaltflächen gestaltet
1.tagcloud a {
2 display: inline-block;
3 padding: 4px 10px;
4 margin-right: 7px;
5 margin-bottom: 7px;
6 background: #f0f0f0;
7 color: #555;
8 font-size: 11px;
9 font-weight: bold;
10 text-transform: lowercase;
11 border-radius: 5px;
12 border: 1px solid #ccc;
13 text-decoration: none;
14}
15.tagcloud a:hover {
16 background: #e0e0e0;
17 color: #000;
18 text-decoration: none;
19}

Das CSS ist minimal und zielgerichtet: inline-block hält die Schaltflächen in der Zeile, margin-bottom gleicht Zeilenumbrüche aus und border-radius rundet die Ecken. Der graue Hintergrund und die zurückhaltende Textfarbe kollidieren mit keiner Markenfarbpalette. Beim Darüberfahren dunkelt die Schaltfläche dezent nach.

Fügen Sie diesen Code in die style.css Ihres Child-Themes oder in das Feld „Zusätzliches CSS" des Customizers ein („Design" → „Customizer" → „Zusätzliches CSS"). Die zweite Option ist sicherer: Die Styles gehen beim nächsten Theme-Update nicht verloren.

Tipp: Wenn die Wolke in der Seitenleiste und in einem eigenen Template unterschiedlich aussehen soll, umschließen Sie den Aufruf mit einem zusätzlichen <div class="custom-tagcloud"> und setzen Sie die Styles mit doppelter Spezifität: .custom-tagcloud .tagcloud a { ... }.

Eingebauter Block „Schlagwortwolke" in Gutenberg

Schlagwortwolke-Block im WordPress-Gutenberg-Editor

Wenn Sie keine Theme-Dateien bearbeiten möchten, bietet WordPress eine eingebaute Lösung. Seit Version 5.8 enthält der Block-Editor einen Block „Schlagwortwolke", der sich ohne eine einzige Codezeile in jeden Beitrag oder jede Seite einfügen lässt.

Das Hinzufügen erfolgt auf dem üblichen Weg: Klicken Sie im Editor auf „+", suchen Sie nach „Schlagwortwolke" und ziehen Sie den Block an die gewünschte Stelle. Der Block übernimmt automatisch alle Schlagwörter der Website, sortiert sie alphabetisch und skaliert die Schriftgröße proportional zur Nutzungshäufigkeit. Die Seitenleiste bietet folgende Einstellungen:

  • Anzahl der Schlagwörter (Standard 45, maximal 100)
  • Aktivierung eines Beitragszählers neben jedem Schlagwort
  • Umschalten zwischen Schlagwörtern und Kategorien über das Taxonomie-Dropdown

Der Block funktioniert in jedem modernen Theme, unterstützt Gruppen und Spalten und wird über dieselben CSS-Regeln aus dem ersten Abschnitt gestaltet. Das ist der einfachste Weg, eine Schlagwortwolke auf eine Seite zu bringen: Editor öffnen, Block hinzufügen, veröffentlichen. Keine Plugins, keine functions.php.

📺 Video: Schlagwortwolke in WordPress konfigurieren

Ein kurzes Tutorial zum Hinzufügen und Konfigurieren einer Schlagwortwolke direkt aus dem WordPress-Administrationsbereich:

⁉️🤔 Häufig gestellte Fragen

Kann ich eine Schlagwortwolke anzeigen, ohne PHP-Dateien zu bearbeiten?

Ja, auf mehrere Arten. Am einfachsten geht es mit dem eingebauten Block „Schlagwortwolke" im Gutenberg-Editor: Fügen Sie ihn mit drei Klicks über „+" hinzu, ohne Plugins oder functions.php. Eine weitere Möglichkeit ist das Standard-Widget „Schlagwortwolke" unter „Design" → „Widgets", das in jedem Theme mit Seitenleiste oder Footer-Bereich funktioniert. Beide Methoden nutzen unter der Haube dieselbe Funktion wp_tag_cloud().

Wo sollte ich den wp_tag_cloud()-Aufruf platzieren: in der functions.php oder in einer Template-Datei?

Direkt in einer Template-Datei: sidebar.php, footer.php, page-tagcloud.php oder jeder anderen Datei, die für das Markup zuständig ist. Die Funktion wp_tag_cloud() wird nicht in der functions.php aufgerufen, dort definieren Sie Logik; die Ausgabe geschieht in Templates. Wenn Sie das Verhalten der Funktion anpassen müssen, nutzen Sie den Filter wp_tag_cloud in der functions.php.

Was ist der Unterschied zwischen Schlagwörtern und Kategorien in einer Wolke?

Kategorien sind eine hierarchische Taxonomie, Schlagwörter sind flach. Optisch verschwindet der Unterschied, technisch unterscheidet sich der Aufruf: Für Schlagwörter nutzen Sie taxonomy => 'post_tag', für Kategorien taxonomy => 'category'. Die Funktion bleibt dieselbe: wp_tag_cloud(), Sie übergeben nur den passenden Schlüssel.

Wie begrenze ich die Anzahl der angezeigten Schlagwörter?

Mit dem Parameter number im Array von wp_tag_cloud(). Ein Wert von 0 zeigt alle Schlagwörter; für die meisten Websites sind 30 bis 50 sinnvoll (die Wolke bleibt lesbar und wird nicht zu einem endlosen Linkstrom).

Kann ich einen Beitragszähler neben jedem Schlagwort hinzufügen?

Ja, der Parameter show_count => 1 (verfügbar seit WordPress 4.8) zeigt die Beitragsanzahl in Klammern hinter dem Schlagwortnamen an. Zum Beispiel: „wordpress (42)". Im Gutenberg-Block wird diese Option über einen Schalter in der Seitenleiste aktiviert.

Was tun, wenn das Standard-Widget zu langweilig ist?

Sie haben zwei Möglichkeiten für mehr Kontrolle. Erstens: Rufen Sie wp_tag_cloud() manuell mit eigenen Parametern und eigener CSS-Gestaltung auf, wie in Abschnitt 1. Zweitens: Nutzen Sie den Gutenberg-Block mit denselben CSS-Regeln, wenn Sie keine Theme-Dateien anfassen möchten. Beide Ansätze geben Ihnen vollständige Freiheit: Farben, Abstände, abgerundete Ecken, Hover-Effekte (alles liegt in Ihrer Hand).

Manuelle Methode oder Block: Was wählen Sie für Ihre Aufgabe?

Wenn Ihre Website an Fahrt gewinnt und die Anzahl der Schlagwörter drei Dutzend übersteigt, macht sich eine individuelle Wolke bezahlt. Sie hält Besucher bei der Stange: Jemand klickt ein Schlagwort, landet auf einer kuratierten Sammlung von Beiträgen zu diesem Thema und liest noch ein oder zwei weitere Artikel. Die Seitentiefe wächst ohne Zusatzkosten.

Der Ansatz ist einfach. Wenn Sie sofort eine Wolke brauchen, ohne sich mit Code zu befassen, öffnen Sie den Editor, fügen Sie den Block „Schlagwortwolke" ein und veröffentlichen Sie. Drei Klicks, und das Ergebnis hängt nicht vom Theme ab. Wenn Sie jedes Detail ausfeilen und volle Kontrolle über das Markup erhalten möchten, kopieren Sie das PHP-Snippet aus dem ersten Abschnitt, gestalten Sie es per CSS, und die Wolke wird Teil des Designs statt eines Standard-Platzhalters. Beide Ansätze funktionieren in jedem modernen Theme und kommen sich nicht in die Quere.

Wenn Ihnen dieser Beitrag geholfen hat, den Durchblick zu bekommen, speichern Sie ihn in Ihren Lesezeichen. Und schreiben Sie uns in den Kommentaren, wie Sie die Schlagwortwolke auf Ihrer Website anzeigen: Widget, Block oder manueller Aufruf?