Wie man Tags in WordPress einfach gestaltet (mit Beispielen)

Möchten Sie die Tags in WordPress so gestalten, dass sie besser zur Geltung kommen?

Tags helfen Ihnen, Ihre Inhalte in Themen zu organisieren. Sie sind wie Hashtags für Ihre WordPress-Blogbeiträge und helfen den Nutzern, weitere Inhalte zu entdecken.

In diesem Artikel zeigen wir Ihnen, wie Sie Tags in WordPress ganz einfach gestalten können, um mehr Nutzerinteresse und Seitenaufrufe auf Ihrer Website zu erhalten.

Wie man Tags in WordPress anzeigt

WordPress verfügt über zwei Haupttaxonomien, die Kategorien und Tags genannt werden. Während Kategorien für die Hauptbereiche Ihrer Inhalte verwendet werden, können Sie mit Tags Inhalte in spezifischere Themen sortieren.

Viele beliebte WordPress-Themes zeigen standardmäßig Tags am oberen oder unteren Rand Ihrer Beiträge an.

Sie können jedoch auch Tags auf Archivseiten, in der Fußzeile, in Seitenleisten und fast überall in WordPress anzeigen.

Um eine Tag Cloud in Ihre Beiträge, Seiten und Sidebar-Widgets einzufügen, können Sie einfach den Block „Tag Cloud“ hinzufügen.

In einer Tag-Cloud erhält jeder Tag eine andere Schriftgröße, die sich nach der Anzahl der Beiträge richtet. 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 zur Verfügung stehen. Was aber, wenn Sie Ihre Tags noch weiter anpassen möchten? Wir zeigen Ihnen, wie.

Schauen wir uns an, wie man Tags in WordPress einfach gestalten kann.

Gestaltung der Standard-Tag-Cloud in WordPress

Nachdem Sie den Tag Cloud-Block zu einem Beitrag oder einer Seite hinzugefügt haben, können Sie ihn durch Hinzufügen von benutzerdefiniertem CSS anpassen.

Der Tag-Cloud-Block enthält automatisch von WordPress generierte Standard-CSS-Klassen, die zur Gestaltung verwendet werden können.

Um Ihrer WordPress-Website benutzerdefinierte CSS hinzuzufügen, gehen Sie einfach auf die Seite Erscheinungsbild “ Anpassen und wechseln Sie auf die Registerkarte Zusätzliches CSS.

Sie können damit 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 Klasse .tag-link-position verwenden, um den Stil an die Position der Links anzupassen. Tags mit mehr Beiträgen sind höher positioniert 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:

Gestalten von Beitrags-Tags in WordPress

Neben der Gestaltung Ihrer Tag-Clouds können Sie auch die Post-Tags, die in den einzelnen Blogbeiträgen angezeigt werden, gestalten. Normalerweise werden sie in Ihrem WordPress-Theme oben oder unten im Beitragstitel oder im Beitragsinhalt angezeigt.

Sie können mit der Maus über die Tags fahren und mit der rechten Maustaste auf das Tool Inspect klicken, um die von Ihrem WordPress-Theme verwendeten CSS-Klassen anzuzeigen.

Danach können Sie diese CSS-Klassen in Ihrem eigenen CSS verwenden. Im Folgenden finden Sie einen Beispielcode, der auf CSS-Klassen in unserem Testthema basiert:

.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 standardmäßige Tag-Cloud-Block ist einfach zu verwenden, aber einige fortgeschrittene Benutzer möchten ihn vielleicht anpassen, um mehr Flexibilität zu haben.

Mit dieser Methode können Sie Ihre eigenen HTML- und CSS-Klassen hinzufügen, die die Tag-Cloud umgeben. Damit können Sie das Erscheinungsbild der Tag-Cloud an Ihre eigenen Anforderungen anpassen.

Kopieren Sie zunächst diesen Code und fügen Sie ihn in die Datei functions.php Ihres Themes oder in ein Code-Snippets-Plugin ein:

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 Code Snippets Plugin für WordPress. Damit können Sie ganz einfach benutzerdefinierten Code in WordPress hinzufügen, ohne die functions.php-Datei Ihres Themes zu bearbeiten, sodass Sie Ihre Website nicht beschädigen.

Um loszulegen, installieren und aktivieren Sie das kostenlose WPCode-Plugin. Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, gehen Sie im WordPress-Dashboard zu Code Snippets “ Snippet hinzufügen.

Fahren Sie dann mit der Maus über die Option „Eigenen Code hinzufügen (neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“.

Von hier aus können Sie einen Titel für das Snippet oben auf der Seite hinzufügen. Das kann alles sein, was Ihnen hilft, sich zu erinnern, wofür der Code ist.

Fügen Sie dann den obigen Code in das Feld „Codevorschau“ ein und wählen Sie im Dropdown-Menü „PHP Snippet“ als Codetyp aus.

Danach schalten Sie einfach den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken auf die Schaltfläche „Snippet speichern“.

Dieser Code fügt einen Shortcode hinzu, der alle Ihre Tags mit der Anzahl ihrer Beiträge daneben anzeigt.

Um sie 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 Anzahl der Beiträge daneben angezeigt. Fügen wir nun etwas CSS hinzu, damit es besser aussieht. Kopieren Sie einfach dieses benutzerdefinierte CSS und fügen Sie es auf Ihrer 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 nach Belieben an Ihre Bedürfnisse anpassen. 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 interessieren Sie sich auch für unseren Leitfaden zum Erstellen von benutzerdefinierten Landing Pages in WordPress oder für diese Liste mit praktischen WordPress-Tipps, -Tricks und -Hacks.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.