Så här addar du images för taxonomi (Category Icons) i WordPress

Om du lägger till taxonomibilder eller kategoriikoner på din WordPress-webbplats kan du få kategorierna att sticka ut.

WordPress erbjuder dock inte ett alternativ för att uppladda dessa bilder som standard. Det visar bara namn på kategorier eller taxonomier på sidorna i arkivet. Det kan se enkelt och tråkigt ut.

I vår poradnik visar vi dig hur du lägger till taxonomibilder eller kategoriikoner i WordPress. Du kommer också att lära dig hur du visar dem på dina sidor i arkivet, vilket gör din webbplats mer engagerande och användarvänlig.

Varför lägga till taxonomies images i WordPress?

Som standard innehåller din webbplats i WordPress inget alternativ för att lägga till bilder för dina taxonomier, t.ex. kategorier och taggar (eller någon annan anpassad taxonomi).

Det använder taxonominamn överallt, inklusive arkiven för kategorier eller sidor med taxonomiarkiv.

Det här ser tråkigt ut.

Om dina sidor med taxonomi får mycket söktrafik kanske du vill göra dem mer tilltalande.

Vi har sett tråkiga, texttunga sidor omvandlas till engagerande sidor bara genom att lägga till relevanta bilder. Det beror ej på att bilderna var speciella, utan på att människor föredrar visuella signaler framför text.

Du kan lägga till taxonomibilder eller ikoner för kategorier för att göra dessa sidor mer användarvänliga och engagerande.

Ett bra exempel på detta är en site som NerdWallet som gillar att använda kategori icons i sin header:

Du kan också använda den för att skapa 111111 sektioner för navigation på din startsida.

Här är ett exempel från Bankrates webbplats:

Med detta sagt, låt oss nu titta på hur du enkelt kan lägga till taxonomibilder i WordPress.

Lägg enkelt till images för taxonomi i WordPress

Det första du behöver göra är att installera och aktivera pluginet Categories Images. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering kan du helt enkelt gå till sidan Posts ” Categories. Du kommer att notera att pluginet kommer att visa en placeholder image för dina befintliga kategorier.

Om du vill välja en egen icon för en kategori måste du clicka på Edit-länken under kategorin.

På sidan Redigera kategori, rulla ner längst ner, så hittar du ett formulär för att uppladda din egen taxonomibild.

Klicka bara på knappen ”Upload/Add New Image” för att ladda upp den image som du vill använda för viss kategori.

Glöm inte att klicka på knappen ”Lägg till kategori” eller ”Uppdatera” för att spara dina ändringar.

Därefter kan du upprepa processen för att uppladda bilder för andra kategorier. Du kan också ladda upp bilder för dina taggar och alla andra taxonomier också.

Nu är problemet att när du har lagt till bilderna, om du besöker en kategorisida, kommer du inte att se din kategoribild där.

För att visa den måste du redigera ditt WordPress-tema eller barntema eller lägga till koden med tillägget WPCode.

Vi visar dig båda metoderna, och du kan välja den som verkar enklast för dig.

Alternativ 1. Display Category Image Icons med hjälp av WPCode (rekommenderas)

Den här metoden är enklare eftersom du inte behöver ta reda på vilken fil i temat som ska ändras och du kan lägga till koden på ett säkert sätt utan att förstöra din webbplats.

Det rekommenderas också för användare som använder ett block theme med support för site editor.

Först måste du installera och aktivera tillägget WPCode. Mer information finns i vår poradnik om hur du installerar ett tillägg till WordPress.

Efter aktivering, gå till WPCode ” + Add Snippet-sidan och klicka på knappen Use Snippet under boxen ’Add Your Custom Code (New Snippet)’.

På nästa vy ger du fragmentet kodu en rubrik som hjälper dig att ID:a det.

Därefter väljer du PHP snippet som din code type.

I boxen Code Preview kopierar och klistrar du in följande code snippet:

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
} 

Därefter rullar du ner till sectionen Insertion och väljer Shortcode som metod för Insert.

Du kommer att märka att WPCode automatiskt visar en krótki kod. Men du kan också skapa en anpassad krótki kod för att göra det lätt att komma ihåg.

Klicka sedan på knappen ”Kopiera” för den anpassade krótki koden.

Du kan nu använda denna shortcode för att visa kategorins image på dina archive pages.

Lägga till shortcode i Site Editor

Om du använder ett blocktema med stöd för webbplatsredigerare går du till sidan Utseende ” Redigerare för att starta webbplatsredigeraren.

Här kan du add to ett block med shortcode precis före blocket Archive Rubrik.

Klistra nu in shortcoden som du kopierade tidigare i shortcode blocket.

Glöm inte att spara dina ändringar för att tillämpa dem. Du kan nu besöka din kategori arkiv sida för att se krótki kod i działanie.

Oroa dig inte om bilden inte ser rätt ut. Vi ska visa dig hur du kan poprawka den senare med anpassad CSS.

Alternativ 2. Visa bildikoner för kategorier manuellt

För den här metoden måste du add the custom code to your WordPress theme files.

Om det här är första gången du editerar WordPress-filer kan du läsa vår guide om hur du copy and paste-kod i WordPress.

Först måste du ansluta till din WordPress site med hjälp av en FTP-klient eller filhanteraren på ditt WordPress webbhotell.

När du är ansluten måste du hitta den template som ansvarar för att visa dina taxonomi archives. Detta kan vara archives.php, category.php, tag.php eller taxonomy.php-filer.

För mer detaljer, se vår guide om hur du hittar vilka filer som ska editeras i ett WordPress theme.

När du har hittat filen måste du downloada den till din dator och öppna den i en textredigerare som gillar Notepad eller TextEdit.

Klistra nu in följande kod där du vill visa din taxonomi image. Vanligtvis vill du lägga till den före taxonomi titeln eller the_archive_title() taggen.

<?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
} 
?>

När du har lagt till koden måste du save filen och uploada den till din website med hjälp av FTP.

Du kan nu besöka sidan för taxonomi arkiv för att se hur den visar din taxonomibild. Så här såg det ut på vår sida för demoarkivet.

Nu kan det fortfarande se konstigt ut, men oroa dig inte. Du kan anpassa det med hjälp av anpassad CSS.

Styling av Category Icons med Custom CSS

När du har addat Category Icon- eller Taxonomies-bilderna till ditt WordPress-tema kanske din image inte ser så bra ut.

För att fixa det måste du add to CSS-kod för att justera den korrekt.

Om det är första gången du lägger till CSS-kod i WordPress, ta då en titt på vår guide för nybörjare om att lägga till customize CSS i WordPress.

Här är den custom CSS som vi använde för taxonomi image.

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

Beroende på your theme kan du också behöva styla omgivande element som gillar archive title, taxonomy title och description.

Vi omslöt helt enkelt vårt taxonomi arkiv titel och beskrivning i ett <div> -element och lade till en anpassad CSS-klass. Vi använde sedan följande CSS-kod för att justera titeln och beskrivningen.

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

Så här såg det ut efteråt på vår test website.

Undanta taxonomier från att visa taxonomi-images

Nu kanske vissa användare bara vill använda taxonomi-images för specifika taxonomier.

Om du till exempel run en online store med WooCommerce, då kanske du vill utesluta produktkategorier.

Gå bara tillbaka till Categories Images page i WordPress admin area och kontrollera de taxonomier som du vill utesluta.

Glöm inte att klicka på knappen ”Spara ändringar” för att butik dina inställningar.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till taxonomi-bilder i WordPress. Du kanske också vill se dessa användbara kategorihack och tillägg för WordPress eller vår artikel om hur du ändrar kategoriordningen i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.