Im Laufe der Jahre hat WPBeginner viele Fragen zu Tags erhalten, darunter auch, ob es sich lohnt, WordPress-Tags zu gestalten, damit sie auf einer Seite hervorstechen.
Schlagwörter helfen Ihnen, Ihre Inhalte nach Themen zu organisieren. Sie sind wie Hashtags für Ihre WordPress-Blogbeiträge und helfen Benutzern, mehr Inhalte zu entdecken. Aber unserer Erfahrung nach werden sie möglicherweise übersehen, wenn sie visuell nicht hervorstechen.
In diesem Artikel zeigen wir Ihnen, wie Sie Tags in WordPress einfach stylen können, um mehr Benutzerengagement und Seitenaufrufe auf Ihrer Website zu erzielen.
So zeigen Sie Tags in WordPress an
WordPress verfügt über zwei Haupttaxonomien namens Kategorien und Tags. Während Kategorien für Hauptbereiche Ihrer Inhalte verwendet werden, ermöglichen Tags die Sortierung von Inhalten nach spezifischeren Themen.
Viele beliebte WordPress-Themes zeigen standardmäßig Tags am Anfang oder Ende Ihrer Beiträge an.
Sie können Tags jedoch auch auf Archivseiten, im Footer, in Seitenleisten und fast überall sonst in WordPress anzeigen.
Um eine Tag-Wolke in Ihre Beiträge, Seiten und Sidebar-Widgets einzufügen, können Sie einfach den Block 'Tag-Wolke' hinzufügen.
Eine Tag-Cloud weist jedem Tag eine andere Schriftgröße zu, basierend auf der Anzahl der Beiträge. Sie können auch wählen, ob die Anzahl der Beiträge neben jedem Tag angezeigt werden soll.
Das sind nur die Standardoptionen, die in WordPress verfügbar sind, aber was ist, wenn Sie Ihre Tags noch weiter anpassen möchten? Wir zeigen Ihnen, wie.
Sehen wir uns an, wie man Tags in WordPress einfach gestaltet.
Den Standard-Tag-Cloud in WordPress stylen
Nachdem Sie den Tag-Cloud-Block zu einem Beitrag oder einer Seite hinzugefügt haben, können Sie ihn anpassen, indem Sie benutzerdefiniertes CSS hinzufügen.
Der Tag-Cloud-Block enthält automatisch standardmäßige von WordPress generierte CSS-Klassen, die zur Gestaltung verwendet werden können.
Um benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzuzufügen, gehen Sie einfach zur Seite Design » Anpassen und wechseln Sie zum Tab Zusätzliches CSS.
Sie können mit diesem benutzerdefinierten CSS-Code als Ausgangspunkt beginnen.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Wie Sie sehen können, können Sie die Klasse .tag-link-position verwenden, um den Stil basierend auf der Position der Links anzupassen. Tags mit mehr Beiträgen stehen höher in der Position und Tags mit weniger Beiträgen niedriger.
Wenn Sie möchten, dass alle Tags in Ihrem Tag-Cloud-Block die gleiche Größe haben, können Sie stattdessen das folgende CSS verwenden:
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
So sah es auf unserer Testseite aus:
Styling von Post-Tags in WordPress
Neben der Gestaltung Ihrer Tag-Clouds möchten Sie vielleicht auch die Beitrag-Tags gestalten, die auf Ihren einzelnen Blog-Beiträgen angezeigt werden. Normalerweise würde Ihr WordPress-Theme diese oben oder unten im Beitragstitel oder im Beitragstext anzeigen.
Sie können mit der Maus über die Tags fahren und mit der rechten Maustaste klicken, um das Inspect-Tool zu verwenden, um die CSS-Klassen anzuzeigen, die von Ihrem WordPress-Theme verwendet werden.
Danach können Sie diese CSS-Klassen in Ihrem benutzerdefinierten CSS verwenden. Im Folgenden finden Sie ein Beispielcode basierend auf den CSS-Klassen unseres Test-Themes:
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
So sah es auf unserer Testseite aus.
Erstellen einer benutzerdefinierten Tag-Wolke in WordPress
Der Standard-Tag-Cloud-Block ist einfach zu bedienen, aber einige fortgeschrittene Benutzer möchten ihn möglicherweise anpassen, um mehr Flexibilität zu erhalten.
Diese Methode ermöglicht es Ihnen, eigene HTML- und CSS-Klassen um die Tag-Cloud herum hinzuzufügen. Sie können diese dann verwenden, um das Erscheinungsbild der Tag-Cloud an Ihre eigenen Anforderungen anzupassen.
Das erste, was Sie tun müssen, ist, diesen Code in die functions.php-Datei Ihres Themes oder in ein Code-Snippet-Plugin zu kopieren und einzufügen:
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
Wir empfehlen, diesen Code mit WPCode hinzuzufügen, dem besten Plugin für Code-Snippets für WordPress. Es ermöglicht Ihnen, benutzerdefinierten Code einfach in WordPress hinzuzufügen, ohne die functions.php-Datei Ihres Themes zu bearbeiten, sodass Sie Ihre Website nicht beschädigen.
Um zu beginnen, installieren und aktivieren Sie das kostenlose WPCode-Plugin. Wenn Sie Hilfe benötigen, lesen Sie unser Tutorial dazu, wie man ein WordPress-Plugin installiert.
Sobald das Plugin aktiviert ist, gehen Sie im WordPress-Dashboard zu Code Snippets » Snippet hinzufügen.
Bewegen Sie dann Ihre Maus über die Option 'Fügen Sie Ihren benutzerdefinierten Code hinzu (Neues Snippet)' und klicken Sie auf die Schaltfläche 'Snippet verwenden'.
Von hier aus müssen Sie 'PHP-Snippet' als Code-Typ aus der Liste der angezeigten Optionen auswählen.
Als Nächstes können Sie oben auf der Seite einen Titel für den Ausschnitt hinzufügen. Dies kann alles sein, damit Sie sich daran erinnern, wofür der Code bestimmt ist.
Fügen Sie dann einfach den obigen Code in das Feld „Code-Vorschau“ ein.
Danach müssen Sie nur noch den Schalter von 'Inaktiv' auf 'Aktiv' umlegen und auf die Schaltfläche 'Snippet speichern' klicken.
Dieser Code fügt einen Shortcode hinzu, der alle Ihre Schlagwörter mit ihrer Beitragsanzahl daneben anzeigt.
Um es auf Ihrer Archivseite oder in einem Widget anzuzeigen, müssen Sie diesen Shortcode verwenden:
[wpbtags]
Die alleinige Verwendung dieses Codes zeigt nur Tag-Links und die Beitragsanzahl daneben an. Fügen wir etwas CSS hinzu, um es besser aussehen zu lassen. Kopieren und fügen Sie einfach dieses benutzerdefinierte CSS auf Ihre Website ein.
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
Sie können das CSS gerne an Ihre Bedürfnisse anpassen. So sah es auf unserer Demoseite aus:
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Schlagwörter in WordPress einfach gestalten können. Möglicherweise möchten Sie auch unseren Leitfaden zum Ausblenden oder Gestalten Ihrer Unterkategorien in WordPress lesen oder sich diese Liste mit praktischen WordPress-Tipps, -Tricks und -Hacks ansehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
kzain
Die Gestaltung von Tags in WordPress kann einen großen Unterschied im Gesamterscheinungsbild eines Blogs machen. Ich liebe es, dass Sie den Prozess in einfache Schritte unterteilt haben; die CSS-Beispiele sind wirklich nützlich. Ihr Tipp, ein Child-Theme zu verwenden, um zu vermeiden, dass Anpassungen verloren gehen, wird ebenfalls sehr geschätzt. Jetzt kann ich meinen Tags endlich das Makeover geben, das sie verdienen! Danke, dass Sie Ihre Expertise geteilt und die WordPress-Anpassung für uns alle zugänglicher gemacht haben.
Jiří Vaněk
Als ich diesen Artikel las, verspürte ich den Drang, meine eigene Tag-Cloud zu erstellen. Ich habe Ihren Ausschnitt verwendet, aber die Farben geändert und die Ecken leicht abgerundet. Es funktionierte wie Magie. Es ist schön, Tags in der gleichen Farbe wie das Thema der gesamten Website zu haben. Es mag ein kleines Detail sein, aber es ist sehr angenehm.
Dennis Muthomi
Die Schritt-für-Schritt-Anleitung und die Code-Snippets sind sehr hilfreich
SCHNELLE FRAGE: Wenn ich diese Code-Snippets anwende, um meine Tags zu stylen, und später beschließe, mein WordPress-Theme zu ändern, werden die Tag-Styles dann entsprechend den Standardstilen des neuen Themes geändert, oder bleiben sie bei den Anpassungen, die ich mit diesen Code-Snippets vorgenommen habe?
WPBeginner Kommentare
Das von Ihnen hinzugefügte CSS sollte beibehalten werden, aber Sie müssen das CSS möglicherweise trotzdem bearbeiten, je nachdem, wie das CSS des neuen Themes das Styling beeinflusst und ob es Konflikte gibt.
Dennis Muthomi
Hallo, vielen Dank für die hilfreiche Klarstellung!
Solange ich die Anpassungen mit einigen kleineren Änderungen beibehalten kann, ist das sehr nützlich zu wissen.
Eine weiterführende Frage – wie kann man beim Wechseln von Themes am besten auf CSS-Konflikte prüfen und diese beheben, die die Tag-Formatierung beeinträchtigen?
WPBeginner Support
Wir haben keine spezifische beste Methode, die wir empfehlen würden. Das müssten Sie manuell überprüfen.
Jiří Vaněk
Nur eine Nachfrage zu Dennis' Frage. Ist es besser, CSS mit WP Code hinzuzufügen oder es direkt in die Vorlage einzufügen? Ich gehe davon aus, dass ich die Einstellungen verliere, wenn ich es in die Vorlage einfüge und das Theme ändere, aber wenn ich WP Code verwende, bleiben die Stile auch nach dem Wechsel des Themes erhalten. Ist das richtig?
WPBeginner Kommentare
Korrekt. Dies ähnelt der Verwendung des Abschnitts Zusätzliches CSS im Theme Customizer.
Das heißt, das benötigte CSS unterscheidet sich von Theme zu Theme, daher variiert die Nützlichkeit.
Nikola
Tolle Anleitung, danke!
Wäre es möglich, die Tags nach der häufigsten Verwendung zu sortieren und die Anzahl der angezeigten Tags zu begrenzen?
WPBeginner Support
Im Moment müssten Sie dafür ein Plugin oder benutzerdefinierten Code verwenden, wir haben derzeit keine empfohlene Methode dafür.
Admin
Jemma Pollari
Großartig, danke. Das hat wirklich geholfen.
WPBeginner Support
Glad our guide could help
Admin
Joe Smith
Das ist großartig! Genau das, wonach ich gesucht habe und sehr stilvoll. Nur eine Frage: Wenn ich mehr Platz zwischen den Tags hinzufügen möchte, wie würde ich das CSS modifizieren? Ich habe versucht, mehrere Einstellungen im obigen CSS zu ändern, aber keine davon fügt einfach Leerzeichen zwischen den Tags hinzu.
WPBeginner Support
You would want to increase the padding for what you’re wanting
Admin
Ibiye Ambille
Hallo, ich würde gerne meine Beitrags-Schlagwörter unter das Beitragsbild verschieben
WPBeginner Support
Dafür sollten Sie sich an den Support Ihres spezifischen Themes wenden, da jedes Theme seinen eigenen Speicherort für das Beitragsbild hat.
Admin
Trishah
Ich versuche, eine CSS-Klasse „current“ zu Tags für einen einzelnen Beitrag hinzuzufügen. Die wenigen Lösungen, die ich gefunden habe, scheinen nicht mehr zu funktionieren. Wie mache ich das?
WPBeginner Support
Das würde je nach Ihrem spezifischen Theme variieren. Wenn Sie sich an den Support Ihres Themes wenden, sollten sie Ihnen sagen können, wo Sie diese Klasse für Ihre Tags hinzufügen können.
Admin
uche Peter
Meine Tags werden seriell aufgelistet. Kein Rahmen, nichts, nichts,,, nur Text ... bitte, wie gebe ich ihnen einen Rahmen mit Hintergrundfarbe?
Kingsolomon
Wie wende ich das CSS an, bitte?
Hugo
Meine Tag-Cloud erscheint nicht als Wolke, sondern als Liste, da nach jedem Span ein Zeilenumbruch eingefügt wird. Wie kann ich diese Zeilenumbrüche entfernen?
WPBeginner Support
Hallo Hugo,
Dieser Artikel beschreibt, wie Tags auf verschiedene Arten gestylt werden können. Wenn Sie eine Tag-Cloud wünschen, können Sie das Standard-Widget für Tag-Clouds von WordPress verwenden. Sie können auch das Template-Tag verwenden
1-click Use in WordPress
Admin
bob
Ich verstehe, dass Sie eine andere Seite gezeigt haben, wie man Schlagwörter auf eine bestimmte Anzahl begrenzt, aber wie kann ich das mit diesem Beispiel machen? Es scheint mit der verlinkten Methode in Kombination damit nicht zu funktionieren.
Amy Croson
Ich habe Schwierigkeiten, dies hinzuzufügen, und ich glaube, es liegt daran, dass mein 'Chosen' Theme mich einschränkt. Ich habe alles in meine PHP kopiert und eingefügt, und es gibt Fehler über Fehler. Mir wird gerade mitgeteilt, dass es einen unbekannten Punkt in diesem Detail gibt. Gibt es eine Möglichkeit, dies zu formatieren, ohne die Punkte vor .taglink, .tagbox und .tagcount zu verwenden?
Val Archer
Hallo – ich suche nach einer Möglichkeit, Tags auf einer category-slug.php-Seite aufzulisten. Wissen Sie vielleicht, wo ich dieses Tutorial finden kann?
Bisher habe ich eine Kategorie [sitename]/category/recipes und eine category-recipes.php erstellt.
Ich tagge die Rezepte, z.B. Frühstück, Abendessen usw.
Ich möchte, dass die Tags in category-recipes.php so angezeigt werden. Ich weiß nicht, was ich tue. Ich kopiere aus meiner category.php-Datei.
Archiv für die Kategorie:
Frühstück
jetzt listet es alle Beiträge auf, die mit Frühstück markiert sind, so etwas wie das:
<a href="”>
von / / gepostet in cat_name . ‘ ‘;} ?>
Abendessen
jetzt listet es alle Beiträge auf, die mit Abendessen gekennzeichnet sind, so etwas wie folgt:
<a href="”>
von / / gepostet in cat_name . ‘ ‘;} ?>
[Dann am Ende aller Tags:]
</div
Können Sie mir bitte sagen, wo ich hier Hilfe bekommen kann?
Danke! – Val
WPBeginner Support
Haben Sie versucht, Folgendes hinzuzufügen:
<?php the_tags('gepostet in:', '' ,'' ); ?>Admin
Magistar
Der Code funktioniert gut für eine Tag-Cloud. Ich möchte dies jedoch auf die Beitrags-Tags anwenden (d. h. die mit einem Beitrag verbundenen Tags und deren Anzahl anstelle der großen Liste).
Ich habe etwas mit wp_get_post_tags versucht, aber es hat nicht wirklich funktioniert. Irgendwelche Vorschläge?
WPBeginner-Mitarbeiter
Sie können get_terms anstelle von get_tags verwenden, siehe diese Codex-Seite:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
Das ist großartig, ich habe Ihren Code in ein standortspezifisches Plugin eingefügt – aber gibt es eine Möglichkeit, ihn so zu ändern, dass die Schriftgröße davon abhängt, wie oft der Tag verwendet wird? Irgendwelche Ideen bitte? Danke!
WPBeginner-Mitarbeiter
Ja, das ist möglich. Im ersten Code-Snippet müssten Sie get_tags durch die Funktion wp_tag_cloud ersetzen. So:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Gast
Wie macht man dasselbe mit der benutzerdefinierten Tag-Wolke für Kategorien und benutzerdefinierte Taxonomien?
Terence O'Neill
Hallo Kumpel; Wie mache ich genau dasselbe (Anzeige mit Shortcode) für Kategorien und benutzerdefinierte Taxonomien? Danke für das Tutorial übrigens. Funktioniert wie ein Zauber.