Hinzufügen von Taxonomiebildern (Kategoriesymbole) in WordPress

Möchten Sie Taxonomiebilder oder Kategoriesymbole in WordPress anzeigen?

Standardmäßig bietet WordPress keine Option zum Hochladen eines Taxonomiebildes oder eines Kategoriesymbols. Es zeigt einfach nur einen Kategorie- oder Taxonomienamen auf den Archivseiten an.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Taxonomie-Bilder oder Kategorie-Symbole in WordPress hinzufügen können. Wir zeigen Ihnen auch, wie Sie Taxonomie-Bilder auf Ihren Archivseiten anzeigen können.

Warum Taxonomiebilder in WordPress hinzufügen?

Standardmäßig verfügt Ihre WordPress-Website nicht über eine Option zum Hinzufügen von Bildern für Ihre Taxonomien wie Kategorien und Tags (oder jede andere benutzerdefinierte Taxonomie).

Es werden einfach überall Taxonomienamen verwendet, auch in den Kategoriearchiven oder auf den Seiten des Taxonomiearchivs.

Das sieht irgendwie schlicht und langweilig aus.

Wenn Sie viel Suchverkehr auf Ihre Taxonomieseiten erhalten, sollten Sie sie ansprechender gestalten.

Der einfachste Weg, eine Seite interessanter zu gestalten, ist das Hinzufügen von Bildern. Sie können Taxonomiebilder oder Kategoriesymbole hinzufügen, um diese Seiten benutzerfreundlicher und ansprechender zu gestalten.

Ein gutes Beispiel hierfür ist eine Website wie NerdWallet, die in ihrer Kopfzeile Kategorie-Symbole verwendet:

Sie können es auch verwenden, um schöne Navigationsabschnitte auf Ihrer Homepage zu erstellen, wie z. B. bei Bankrate:

Werfen wir also einen Blick darauf, wie man in WordPress ganz einfach Taxonomie-Bilder hinzufügen kann.

Einfaches Hinzufügen von Taxonomiebildern in WordPress

Als Erstes müssen Sie das Plugin “ Categories Images “ installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

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

Um ein eigenes Kategoriesymbol auszuwählen, müssen Sie auf den Link Bearbeiten unterhalb einer Kategorie klicken.

Auf der Seite Kategorie bearbeiten finden Sie ein Formular, mit dem Sie Ihr eigenes Taxonomiebild hochladen können.

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

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

Anschließend können Sie den Vorgang wiederholen, um Bilder für andere Kategorien hochzuladen. Sie können auch Bilder für Ihre Tags und alle anderen Taxonomien hochladen.

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

Um ihn anzuzeigen, müssen Sie Ihr WordPress-Theme oder Child-Theme bearbeiten oder das WPCode-Plugin verwenden, um den Code hinzuzufügen.

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

Option 1. Kategorie-Bildsymbole mit WPCode anzeigen (empfohlen)

Diese Methode ist einfacher, da Sie nicht herausfinden müssen, welche Themedatei 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 Site-Editor-Unterstützung verwenden.

Zunächst müssen Sie das WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung auf die Seite WPCode “ + Snippet hinzufügen und klicken Sie auf die Schaltfläche Snippet verwenden unter dem Feld „Eigenen Code hinzufügen (neues Snippet)“.

Geben Sie Ihrem Snippet auf dem nächsten Bildschirm einen Titel, mit dem Sie es leichter identifizieren können.

Wählen Sie anschließend PHP-Snippet als Codetyp aus.

Kopieren Sie im Feld Codevorschau den folgenden Codeausschnitt 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 als Einfügemethode Shortcode.

Sie werden feststellen, dass WPCode automatisch einen Shortcode anzeigt. Damit Sie sich Ihren Shortcode jedoch leicht merken können, können Sie auch einen eigenen Shortcode erstellen.

Klicken Sie anschließend auf die Schaltfläche Kopieren des benutzerdefinierten Shortcodes.

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

Hinzufügen von Shortcodes im Site-Editor

Wenn Sie ein Block-Theme mit Site-Editor-Unterstützung verwenden, gehen Sie auf die Seite Erscheinungsbild “ Editor, um den Site-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 zu übernehmen. Sie können nun 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 korrigieren können.

Option 1. Kategoriebildsymbole manuell anzeigen

Bei dieser 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 unsere Anleitung zum Kopieren und Einfügen von Code in WordPress ansehen.

Zunächst müssen Sie sich mit einem FTP-Client oder dem Dateimanager Ihres WordPress-Hostings mit Ihrer WordPress-Website verbinden.

Sobald die Verbindung hergestellt ist, müssen Sie die Vorlage finden, die für die Anzeige Ihrer Taxonomiearchive zuständig ist. Dies können die Dateien archives.php, category.php, tag.php oder taxonomy.php sein.

Weitere Details finden Sie in unserer Anleitung, wie Sie herausfinden, welche Dateien Sie in einem WordPress-Theme bearbeiten 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 an der Stelle ein, an der Sie Ihr Taxonomiebild anzeigen möchten. Normalerweise sollten 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
} 
?>

Nachdem Sie den Code hinzugefügt haben, müssen Sie diese Datei speichern und per FTP auf Ihre Website hochladen.

Sie können nun die Seite des Taxonomie-Archivs besuchen, um zu sehen, wie Ihr Taxonomie-Bild angezeigt wird. Hier sehen Sie, wie es auf unserer Demo-Archivseite aussieht.

Jetzt kann es immer noch ein wenig unbeholfen aussehen, aber keine Sorge. Sie können das mit ein wenig benutzerdefiniertem CSS gestalten.

Gestalten von Kategoriesymbolen mit benutzerdefiniertem CSS

Nachdem Sie die Kategorie-Symbole oder Taxonomie-Bilder zu Ihrem WordPress-Theme hinzugefügt haben, sieht Ihr Bild möglicherweise nicht sehr gut aus.

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

Wenn Sie zum ersten Mal CSS-Code in WordPress hinzufügen, werfen Sie einen Blick auf unsere Anleitung für Einsteiger zum Hinzufügen von benutzerdefiniertem CSS in WordPress.

Hier ist das benutzerdefinierte CSS, das wir für das Taxonomiebild verwendet haben.

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

Abhängig von Ihrem Thema müssen Sie eventuell auch die umgebenden Elemente wie Archivtitel, Taxonomietitel und Beschreibung gestalten.

Wir haben einfach den Titel und die Beschreibung unseres Taxonomie-Archivs in ein <div>-Element eingepackt und eine benutzerdefinierte CSS-Klasse hinzugefügt. Wir haben dann den folgenden CSS-Code verwendet, um Titel und Beschreibung anzupassen.

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

Hier sehen Sie, wie es danach auf unserer Test-Website aussah.

Taxonomien von der Anzeige von Taxonomiebildern ausschließen

Einige Benutzer möchten vielleicht nur Taxonomie-Bilder für bestimmte Taxonomien verwenden.

Wenn Sie zum Beispiel ein Online-Geschäft mit WooCommerce betreiben, möchten Sie vielleicht Produktkategorien ausschließen.

Gehen Sie einfach zurück zur Seite Kategorien Bilder im WordPress-Administrationsbereich und markieren Sie die Taxonomien, die Sie ausschließen möchten.

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Taxonomie-Bilder in WordPress einfach hinzufügen können. Vielleicht interessieren Sie sich auch für diese nützlichen Kategorie-Hacks und Plugins für WordPress oder für unsere Tipps, wie Sie mehr Traffic von Suchmaschinen erhalten.

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.