Trick # 245 | Dieser Beitrag beinhaltet 1086 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
WordPress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich haarig. Also habe ich kurzerhand selbst ein wenig getüftelt und mit PHP-Code ein eigenes Kategorie-Widget erstellt. Das können Sie auch.
Der Code, welchen Sie benötigen, ist ziemlich einfach gestrickt. Solcherlei Scripts hinterlege ich im Plugin «Insert PHP Code Snippet». Die Codes aus dessen Bibliothek kann ich dann ganz einfach per Shortcode exakt dort ausführen lassen, wo ich möchte. Es gibt noch andere, ähnliche Plugins – das erwähnte ist einfach mein Favorit.
Kopieren Sie also folgenden PHP-Code und legen Sie ihn in Ihrem Snippet-Plugin ab:
<?php $categories = get_categories();
foreach ($categories as $category) {
echo '<a class="category-list" href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a> ';
}Der Code sucht (auf Zeile 3) nach den existierenden Kategorien. Natürlich mit Klarnamen und auch gleich mit Link. Ausserdem habe ich die CSS-Klasse «category-list» hinterlegt, mit welcher ich später besser stylen kann.
Zunächst sieht das Ergebnis des obigen Codes so aus:
Sonderlich hübsch ist das nicht. Hier kommt nun meine CSS-Klasse «category-list» ins Spiel.
PHP-Code mit CSS stylen
In meinem Falle habe ich das Aussehen wie folgt festgelegt. Sie können natürlich variieren und den angepassten CSS-Code unter Design/Customizer/Zusätzliches CSS in das CSS-Stylesheet Ihres Child-Themes einfügen:
.category-list {
font-size: 15px;
background-color: #293280;
color: #ffffff !important;
padding: 10px 18px;
border-radius: 10px;
display: inline-block;
margin-bottom: 10px;
border: 1px solid #293280;
}
.category-list:hover {
background-color: #59b14b33;
color: #293280 !important;
}Nun präsentiert sich das Endergebnis so:
Jetzt noch den Shortcode aus meinem PHP-Plugin in ein Text- oder HTML-Widget kopieren – und gut ist.
Variante: Tags statt Kategorien
Vielleicht verwenden Sie eher Schlagworte statt Kategorien. Natürlich lassen sich mit wenig Änderungen am PHP-Code auch diese ausgeben.
Etwa so:
<?php $tags = get_tags();
if ($tags) {
foreach ($tags as $tag) {
echo '<a class="tag-list" href="' . get_tag_link( $tag->term_id ) . '">' . $tag->name . '</a> ';
}
}Auch kein Hexenwerk. Sieht dann so aus:
Im Beispiel wird der folgende CSS-Block verwendet, den Sie im Backend unter Design/Customizer/Zusätzliches CSS einfügen können:
.tag-list {
font-size: 15px;
background-color: #293280;
color: #ffffff !important;
padding: 10px 18px;
border-radius: 10px;
display: inline-block;
margin-bottom: 10px;
border: 1px solid #293280;
}
.tag-list:hover {
background-color: #59b14b33;
color: #293280 !important;
}Schlagwörter
Akkordeon-Modul Audio-Modul Bild-Modul Blog-Modul Button-Modul Code-Modul Countdown-Modul Filterbares Portfolio Galerie-Modul Handlungsaufruf-Modul Kontaktformular-Modul Login-Modul Menu-Modul Portfolio-Modul Posttitel-Modul Registerkarten-Modul Seitenleisten-Modul Slider-Modul Suche-Modul Testimonial-Modul Text-Modul Umschalter-Modul Video-Modul
Werbung
Werbung
