Wie man Tags in WordPress formatiert

Mit WordPress können Sie Ihre Inhalte in Taxonomien sortieren. Standardmäßig enthält es Kategorien und Tags. Während Kategorien zum Sortieren von Inhalten in verschiedene Abschnitte verwendet werden können, können Tags verwendet werden, um Inhalte in spezifischere Themen zu sortieren. Sie können auf Ihrer Site verwendete Tags in einer Tag-Cloud oder in einem Listenformat anzeigen. In diesem Artikel zeigen wir Ihnen, wie Sie Tags in WordPress formatieren.

Anzeigen aller Tags mit Post Counts in WordPress

Einige beliebte Websites zeigen ihre beliebtesten Tags als Themen auf ihrer Archivseite oder im Fußzeilenbereich. So können Sie alle Ihre Post-Tags mit der Anzahl der Posts und ohne die Tag-Cloud anzeigen.

Als Erstes müssen Sie diesen Code kopieren und in die Datei functions.php oder das standortspezifische Plugin Ihres Themas einfügen.

 Funktion wpb_tags () $ wpbtags = get_tags (); foreach ($ wpbtags als $ tag) $ string. = 'term_id).' "> '. $ tag-> name.' '. $ tag-> count.' '." \ n "; return $ string;  add_shortcode ('wpbtags', 'wpb_tags'); 

Dieser Code zeigt einfach alle Ihre Tags mit der Anzahl der Beiträge neben ihnen an. Um es auf Ihrer Archivseite oder in einem Widget anzuzeigen, müssen Sie diesen Shortcode verwenden:

[wpbtags]

Wenn Sie nur diesen Code verwenden, werden nur die Tag-Links und die Anzahl der Beiträge neben ihnen angezeigt. Es wird nicht schön aussehen. Fügen wir CSS hinzu, um es hübsch zu gestalten. Kopieren Sie dieses CSS und fügen Sie es in das Stylesheet Ihres Themes ein.

 .Tagbox Hintergrundfarbe: #eee; Rahmen: 1px fest #ccc; Marge: 0px 10px 10px 0px; Zeilenhöhe: 200%; Auffüllen: 2px 0 2px 2px;  .taglink padding: 2px;  .tagbox a, .tagbox a: besucht, .tagbox a: active Textdekoration: keine;  .tagcount Hintergrundfarbe: grün; Farbe weiß; Position: relativ; Polsterung: 2px;  

Fühlen Sie sich frei, das CSS an Ihre Bedürfnisse anzupassen. So sah es auf unserer Demo-Site aus:

Styling-Tags in Post-Meta-Informationen

Einige WordPress-Designs zeigen Tags unter den Post-Metadaten-Informationen mit Veröffentlichungsdatum, Autor und anderen Meta-Links an. Einige Themen können jedoch möglicherweise überhaupt nicht formatiert werden, oder Sie möchten sie möglicherweise anders formatieren.

Mal sehen, wie wir Tag-Links unter einem Beitrag in WordPress gestalten können.

Zuerst müssen Sie die CSS-Klasse ermitteln, die von Ihrem WordPress-Theme zum Anzeigen von Tags verwendet wird. Klicken Sie dazu mit der rechten Maustaste auf Tags und wählen Sie inspect element aus dem Browser-Menü.

Dadurch wird der Browserbildschirm aufgeteilt, um das Entwickler-Tool-Feld unterhalb der Webseite anzuzeigen. In der Entwickler-Toolbox sehen Sie die CSS-Klasse, die von Ihrem WordPress-Design zum Anzeigen von Tags verwendet wird.

Im obigen Screenshot können Sie sehen, dass das Design verwendet wird Begriffe für die CSS-Klasse. Jetzt werden wir diese Klasse in unserem Stylesheet des untergeordneten Themes verwenden, um das Standarddesign-CSS zu überschreiben.

 .Begriffe a, .terms a: besucht, .terms a: aktiv background: #eee; Rahmen: 1px fest #ccc; Grenzradius: 5px; Textdekoration: keine; Polsterung: 3px; Marge: 3px; Text-Transformation: Großbuchstaben;  .terms a: hover Hintergrund: # a8281a; Farbe: #FFF;  

Fühlen Sie sich frei, CSS an die Farben Ihres Themas anzupassen. So sahen die Tags auf unserer Demo-Site aus:

Möglicherweise bemerken Sie den Unterschied zwischen den beiden Screenshots außer den CSS-Änderungen. Außerdem haben wir Tags in Tagged geändert und die Kommas zwischen den Tags entfernt. Wie haben wir das gemacht??

Wir haben the_tags () geändert; Template-Tag in unserer single.php-Datei wie folgt:

Wenn Sie die Anzahl der angezeigten Tags auf 5 oder etwas anderes beschränken möchten, lesen Sie in diesem Artikel nach, wie eine begrenzte Anzahl von Tags nach dem Posting angezeigt wird.

Wir hoffen, dieser Artikel hat Ihnen beim Gestalten von Tags in WordPress geholfen. Fühlen Sie sich frei, mit dem CSS zu experimentieren, bis Sie das gewünschte Ergebnis erhalten.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie unseren YouTube-Kanal für weitere WordPress-Video-Tutorials. Sie finden uns auch auf Google+ und Twitter.