Möchten Sie Tags in WordPress so gestalten, dass sie auffälliger aussehen?
Tags helfen Ihnen, Ihre Inhalte in Themen zu organisieren. Sie sind wie Hashtags für Ihre WordPress-Blog-Posts und helfen Benutzern, mehr Inhalte zu entdecken.
In diesem Artikel zeigen wir Ihnen, wie Sie Tags in WordPress einfach stylen können, um mehr Benutzerinteraktion und Seitenaufrufe auf Ihrer Website zu erzielen.
So zeigen Sie Tags in WordPress an
WordPress wird mit zwei Haupttaxonomien geliefert, die als Kategorien und Tags bezeichnet werden. Während Kategorien für Hauptbereiche Ihres Inhalts verwendet werden, ermöglichen Ihnen Tags, Inhalte in spezifischere Themen zu sortieren.
Viele beliebte WordPress-Themes zeigen standardmäßig Tags oben oder unten in Ihren Beiträgen an.
Sie können Tags jedoch auch auf Archivseiten, Fußzeilen, Seitenleisten und fast überall anzeigen, wo Sie möchten.
Um eine Tag-Cloud in Ihre Beiträge, Seiten und Seitenleisten-Widgets einzufügen, können Sie einfach den Tag-Cloud-Block hinzufügen.
Eine Tag Cloud gibt jedem Tag eine andere Schriftgröße basierend auf der Anzahl der Beiträge. Sie können auch die Anzahl der Beiträge neben jedem Tag anzeigen.
Dies sind nur die Standardoptionen in WordPress, aber was ist, wenn Sie Ihre Tags noch mehr anpassen möchten? Wir zeigen Ihnen wie.
Werfen wir einen Blick darauf, wie Sie Tags in WordPress einfach gestalten können.
Die Standard-Tag-Cloud in WordPress gestalten
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 von WordPress generierte Standard-CSS-Klassen, die zum Stylen verwendet werden können.
Um benutzerdefiniertes CSS zu Ihrer WordPress-Site hinzuzufügen, gehen Sie einfach zu Aussehen » Anpassen Seite und wechseln Sie zur Registerkarte Zusätzliches CSS.
Sie können beginnen, indem Sie diesen benutzerdefinierten CSS-Code als Ausgangspunkt hinzufügen.
.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 Sie die .tag-link-position
-Klasse, um den Stil basierend auf der Position der Links anzupassen. Tags mit mehr Beiträgen haben eine höhere Position und Tags mit weniger Beiträgen sind 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:
Post-Tags in WordPress gestalten
Neben der Gestaltung Ihrer Tag-Clouds möchten Sie möglicherweise auch Post-Tags gestalten, die in Ihren einzelnen Blog-Posts angezeigt werden. Normalerweise würde Ihr WordPress-Theme sie oben oder unten im Beitragstitel oder Beitragsinhalt 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. Es folgt ein Beispielcode basierend auf CSS-Klassen zu unserem Testthema:
.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 Cloud in WordPress
Der Standard-Tag-Cloud-Block ist einfach zu verwenden, aber einige fortgeschrittene Benutzer möchten ihn möglicherweise anpassen, damit sie mehr Flexibilität haben.
Mit dieser Methode können Sie Ihre eigenen HTML- und CSS-Klassen hinzufügen, die die Tag-Cloud umgeben. Anschließend können Sie damit das Erscheinungsbild der Tag-Cloud an Ihre eigenen Anforderungen anpassen.
Das erste, was Sie tun müssen, ist diesen Code zu kopieren und in die Datei functions.php Ihres Themes oder in das Site-spezifische Plugin 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' );
Dieser Code fügt einen Shortcode hinzu, der alle Ihre Tags mit ihrer Beitragsanzahl daneben anzeigt. Um es auf Ihrer Archivseite oder in einem Widget anzuzeigen, müssen Sie diesen Shortcode verwenden:
[wpbtags]
Wenn Sie diesen Code allein verwenden, werden nur Tag-Links und die Post-Anzahl daneben angezeigt. Lassen Sie uns etwas CSS hinzufügen, damit es besser aussieht. Kopieren Sie einfach dieses benutzerdefinierte CSS und fügen Sie es in 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; }
Fühlen Sie sich frei, das CSS an Ihre Bedürfnisse anzupassen. So sah es auf unserer Demoseite aus:
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Tags in WordPress einfach gestalten können. Vielleicht möchten Sie auch unseren Leitfaden zum Erstellen benutzerdefinierter Landingpages in WordPress oder diese Liste mit praktischen WordPress-Tipps, -Tricks und -Hacks lesen.