So fügen Sie Taxonomie-Bilder (Kategorie-Symbole) in WordPress hinzu

Das Hinzufügen von Taxonomiebildern oder Kategorie-Icons zu Ihrer WordPress-Website kann dazu beitragen, dass sich Kategorien abheben.

WordPress bietet jedoch standardmäßig keine Option zum Hochladen dieser Bilder. Es werden nur Kategorien- oder Taxonomie-Namen auf den Archivseiten angezeigt. Das kann schlicht und langweilig aussehen.

In unserem Tutorial zeigen wir Ihnen, wie Sie Taxonomie-Bilder oder Kategorie-Icons zu WordPress hinzufügen. Sie lernen auch, wie Sie diese auf Ihren Archivseiten anzeigen, um Ihre Website ansprechender und benutzerfreundlicher zu gestalten.

Warum Taxonomiebilder in WordPress hinzufügen?

Standardmäßig enthält Ihre WordPress-Website keine Option zum Hinzufügen von Bildern für Ihre Taxonomien, wie z. B. Kategorien und Tags (oder andere benutzerdefinierte Taxonomien).

Es verwendet überall Taxonomienamen, einschließlich der Kategoriearchive oder Taxonomie-Archivseiten.

Das sieht langweilig aus.

Wenn Ihre Taxonomie-Seiten viel Suchverkehr erhalten, möchten Sie sie vielleicht ansprechender gestalten.

Wir haben gesehen, wie langweilige, textlastige Seiten in ansprechende verwandelt wurden, nur durch das Hinzufügen relevanter Bilder. Das liegt nicht daran, dass die Bilder besonders waren, sondern daran, dass Menschen visuelle Hinweise gegenüber Text bevorzugen.

Sie können Taxonomiebilder oder Kategorie-Icons hinzufügen, um diese Seiten benutzerfreundlicher und ansprechender zu gestalten.

Ein gutes Beispiel dafür ist eine Seite wie NerdWallet, die Kategorie-Icons in ihrem Header verwendet:

Sie können es auch verwenden, um schöne Navigationsbereiche auf Ihrer Homepage zu erstellen.

Hier ist ein Beispiel von der Website von Bankrate:

Nichtsdestotrotz schauen wir uns an, wie man Taxonomiebilder in WordPress einfach hinzufügt.

Taxonomie-Bilder in WordPress einfach hinzufügen

Das Erste, was Sie tun müssen, ist das Plugin Categories Images zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie einfach zur Seite Beiträge » Kategorien gehen. Sie werden feststellen, dass das Plugin ein Platzhalterbild für Ihre vorhandenen Kategorien anzeigt.

Um Ihr eigenes Kategorie-Icon auszuwählen, müssen Sie auf den Link „Bearbeiten“ unter einer Kategorie klicken.

Scrollen Sie auf der Seite "Kategorie bearbeiten" nach unten, und Sie finden ein Formular zum Hochladen Ihres eigenen Taxonomie-Bildes.

Klicken Sie einfach auf die Schaltfläche „Bild hochladen/neu hinzufügen“, um das Bild hochzuladen, das Sie für diese spezielle Kategorie verwenden möchten.

Vergessen Sie nicht, auf die Schaltfläche 'Kategorie hinzufügen' oder 'Aktualisieren' zu klicken, um Ihre Änderungen zu speichern.

Als Nächstes können Sie den Vorgang wiederholen, um Bilder für andere Kategorien hochzuladen. Sie können auch Bilder für Ihre Tags und andere Taxonomien hochladen.

Das Problem ist nun, dass Sie nach dem Hinzufügen der Bilder, wenn Sie eine Kategorieseite besuchen, Ihr Kategoriebild dort nicht sehen werden.

Um es anzuzeigen, müssen Sie Ihr WordPress-Theme oder Child-Theme bearbeiten oder den Code mit dem WPCode-Plugin hinzufügen.

Wir zeigen Ihnen beide Methoden, und Sie können eine wählen, die Ihnen einfacher erscheint.

Option 1. Kategoriebild-Icons mit WPCode anzeigen (empfohlen)

Diese Methode ist einfacher, da Sie nicht herausfinden müssen, welche Theme-Datei Sie ändern müssen, und Sie können den Code sicher hinzufügen, ohne Ihre Website zu beschädigen.

Es wird auch für Benutzer empfohlen, die ein Block-Theme mit Unterstützung für den Website-Editor verwenden.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zur Seite WPCode » + Snippet hinzufügen und klicken Sie auf die Schaltfläche Snippet verwenden unter dem Feld 'Ihren benutzerdefinierten Code hinzufügen (Neues Snippet)'.

Geben Sie im nächsten Bildschirm Ihrem Snippet einen Titel, der Ihnen hilft, es zu identifizieren.

Wählen Sie danach PHP-Snippet als Ihren Code-Typ aus.

Kopieren Sie im Feld Code-Vorschau den folgenden Code-Schnipsel und fügen Sie ihn ein:

if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 

Scrollen Sie dann nach unten zum Abschnitt "Einfügen" und wählen Sie "Shortcode" als Einfügemethode.

Sie werden feststellen, dass WPCode automatisch einen Shortcode anzeigt. Sie können jedoch auch einen benutzerdefinierten Shortcode erstellen, um ihn sich leichter merken zu können.

Klicken Sie anschließend auf die Schaltfläche „Kopieren“ für den benutzerdefinierten Shortcode.

Sie können diesen Shortcode jetzt verwenden, um das Kategoriebild auf Ihren Archivseiten anzuzeigen.

Hinzufügen von Shortcodes im Site-Editor

Wenn Sie ein Block-Theme mit Unterstützung für den Website-Editor verwenden, gehen Sie zur Seite Darstellung » Editor, um den Website-Editor zu starten.

Hier können Sie einen Shortcode-Block direkt vor dem Archivtitel-Block hinzufügen.

Fügen Sie nun den zuvor kopierten Shortcode in den Shortcode-Block ein.

Vergessen Sie nicht, Ihre Änderungen zu speichern, um sie anzuwenden. Sie können jetzt Ihre Kategorie-Archivseite besuchen, um den Shortcode in Aktion zu sehen.

Machen Sie sich keine Sorgen, wenn das Bild nicht richtig aussieht. Wir zeigen Ihnen später, wie Sie es mit benutzerdefiniertem CSS beheben können.

Option 2. Kategorie-Bildsymbole manuell anzeigen

Für diese Methode müssen Sie den benutzerdefinierten Code zu Ihren WordPress-Theme-Dateien hinzufügen.

Wenn Sie zum ersten Mal WordPress-Dateien bearbeiten, sollten Sie sich vielleicht unseren Leitfaden ansehen, wie Sie Code in WordPress kopieren und einfügen.

Zuerst müssen Sie sich mit einem FTP-Client oder dem Dateimanager Ihres WordPress-Hostings mit Ihrer WordPress-Seite verbinden.

Sobald Sie verbunden sind, müssen Sie die Vorlage finden, die für die Anzeige Ihrer Taxonomiearchive verantwortlich ist. Dies können die Dateien archives.php, category.php, tag.php oder taxonomy.php sein.

Weitere Details finden Sie in unserem Leitfaden, wie Sie die Dateien finden, die in einem WordPress-Theme bearbeitet werden müssen.

Sobald Sie die Datei gefunden haben, müssen Sie sie auf Ihren Computer herunterladen und in einem Texteditor wie Notepad oder TextEdit öffnen.

Fügen Sie nun den folgenden Code dort ein, wo Sie Ihr Taxonomiebild anzeigen möchten. Normalerweise möchten Sie ihn vor dem Taxonomie-Titel oder dem the_archive_title() -Tag einfügen.

<?php if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 
?>

Nach dem Hinzufügen des Codes müssen Sie diese Datei speichern und mit FTP wieder auf Ihre Website hochladen.

Sie können nun die Taxonomie-Archivseite besuchen, um zu sehen, wie Ihr Taxonomie-Bild angezeigt wird. So sah es auf unserer Demo-Archivseite aus.

Nun, es mag immer noch seltsam aussehen, aber keine Sorge. Sie können es mit benutzerdefiniertem CSS gestalten.

Kategorie-Icons mit benutzerdefiniertem CSS gestalten

Nachdem Sie die Kategorie-Icons oder Taxonomie-Bilder zu Ihrem WordPress-Theme hinzugefügt haben, sehen Ihre Bilder möglicherweise nicht sehr gut aus.

Um dies zu beheben, müssen Sie CSS-Code hinzufügen, um ihn richtig auszurichten.

Wenn Sie zum ersten Mal CSS-Code in WordPress hinzufügen, werfen Sie einen Blick auf unseren Anfängerleitfaden zum Hinzufügen von benutzerdefiniertem CSS in WordPress.

Hier ist das benutzerdefinierte CSS, das wir für das Taxonomie-Bild verwendet haben.

img.taxonomy-img {
    float: left;
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
    padding: 20px;
}

Abhängig von Ihrem Theme müssen Sie möglicherweise auch umgebende Elemente wie den Archivtitel, den Taxonomietitel und die Beschreibung gestalten.

Wir haben unseren Taxonomie-Archivtitel und die Beschreibung einfach in ein <div>-Element eingeschlossen und eine benutzerdefinierte CSS-Klasse hinzugefügt. Anschließend haben wir den folgenden CSS-Code verwendet, um den Titel und die Beschreibung anzupassen.

.taxonomy-title-description {
    display: inline-block;
    padding: 18px;
}

So sah es danach auf unserer Testwebsite aus.

Taxonomien von der Anzeige von Taxonomie-Bildern ausschließen

Nun möchten einige Benutzer Taxonomie-Bilder möglicherweise nur für bestimmte Taxonomien verwenden.

Wenn Sie zum Beispiel einen Online-Shop mit WooCommerce betreiben, möchten Sie möglicherweise Produktkategorien ausschließen.

Gehen Sie einfach zurück zur Seite „Kategorienbilder“ im WordPress-Adminbereich und wählen Sie die Taxonomien aus, die Sie ausschließen möchten.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach Taxonomie-Bilder in WordPress hinzufügen. Möglicherweise möchten Sie auch diese nützlichen Kategorie-Hacks und Plugins für WordPress oder unseren Artikel darüber, wie Sie die Reihenfolge der Kategorien in WordPress ändern, sehen.

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.