Cum să adăugați imagini de taxonomie (pictograme de categorii) în WordPress

Adăugarea imaginilor de taxonomie sau a pictogramelor de categorie pe site-ul dvs. WordPress vă poate ajuta să evidențiați categoriile.

Cu toate acestea, WordPress nu oferă o opțiune de a încărca aceste imagini în mod implicit. Afișează doar numele categoriilor sau taxonomiilor pe paginile de arhivă. Acest lucru poate arăta simplu și plictisitor.

În tutorialul nostru, vă vom arăta cum să adăugați imagini de taxonomie sau pictograme de categorie la WordPress. Veți învăța, de asemenea, cum să le afișați pe paginile de arhivă, făcând site-ul dvs. mai captivant și mai ușor de utilizat.

De ce să adăugați imagini de taxonomii în WordPress?

Implicit, site-ul dvs. WordPress nu include o opțiune pentru a adăuga imagini pentru taxonomiile dvs., cum ar fi categoriile și etichetele (sau orice altă taxonomie personalizată).

Folosește nume de taxonomii peste tot, inclusiv arhivele de categorii sau paginile de arhivă ale taxonomiilor.

Arată plictisitor.

Dacă paginile tale de taxonomie primesc mult trafic de căutare, s-ar putea să vrei să le faci să pară mai captivante.

Am văzut pagini plictisitoare, pline de text, transformate în pagini captivante doar prin adăugarea de imagini relevante. Nu pentru că imaginile erau speciale, ci pentru că oamenii preferă indicii vizuale în locul textului.

Puteți adăuga imagini de taxonomii sau pictograme de categorii pentru a face aceste pagini mai ușor de utilizat și mai captivante.

Un bun exemplu în acest sens este un site precum NerdWallet, care folosește pictograme de categorii în antetul său:

Îl puteți folosi, de asemenea, pentru a crea secțiuni de navigare frumoase pe pagina de pornire.

Iată un exemplu de pe site-ul Bankrate:

Acestea fiind spuse, să vedem cum să adăugăm imagini de taxonomii în WordPress cu ușurință.

Adăugați ușor imagini de taxonomie în WordPress

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Categories Images. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, puteți pur și simplu să accesați pagina Postări » Categorii. Veți observa că pluginul va afișa o imagine implicită pentru categoriile dvs. existente.

Pentru a alege propria pictogramă de categorie, trebuie să faceți clic pe linkul Editare de sub o categorie.

Pe pagina Editare categorie, derulați în jos până la sfârșit și veți găsi un formular pentru a încărca propria imagine de taxonomie.

Pur și simplu faceți clic pe butonul „Încărcați/Adăugați o imagine nouă” pentru a încărca imaginea pe care doriți să o utilizați pentru acea categorie particulară.

Nu uitați să faceți clic pe butonul „Adăugare categorie” sau „Actualizare” pentru a salva modificările.

Apoi, puteți repeta procesul pentru a încărca imagini pentru alte categorii. Puteți încărca imagini și pentru etichetele dvs. și pentru orice alte taxonomii.

Acum, problema este că, după adăugarea imaginilor, dacă vizitați o pagină de categorie, nu veți vedea imaginea categoriei acolo.

Pentru a o afișa, va trebui să editați tema WordPress sau tema copil sau să adăugați codul folosind pluginul WPCode.

Vă vom arăta ambele metode și puteți alege una care vi se pare mai ușoară.

Opțiunea 1. Afișarea pictogramele categoriilor folosind WPCode (Recomandat)

Această metodă este mai ușoară, deoarece nu va trebui să vă dați seama ce fișier de temă să modificați și puteți adăuga codul în siguranță fără a vă strica site-ul.

Este recomandat și pentru utilizatorii care folosesc o temă bloc cu suport pentru editorul de site.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru mai multe detalii, consultați tutorialul nostru despre instalarea unui plugin WordPress.

După activare, accesați pagina WPCode » + Adăugare Snippet și faceți clic pe butonul Utilizare Snippet sub caseta „Adăugați codul dvs. personalizat (Snippet nou)”.

Pe ecranul următor, dați fragmentului un titlu care să vă ajute să-l identificați.

După aceea, selectați fragment PHP ca tip de cod.

În caseta Previzualizare cod, copiați și lipiți următorul fragment de cod:

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
} 

Apoi, derulați în jos la secțiunea Inserare și alegeți Scurtcod ca metodă de inserare.

Veți observa că WPCode afișează automat un shortcode. Cu toate acestea, puteți crea și un shortcode personalizat pentru a-l face ușor de reținut.

Apoi, faceți clic pe butonul „Copiere” pentru scurtcodul personalizat.

Puteți folosi acum acest shortcode pentru a afișa imaginea categoriei pe paginile de arhivă.

Adăugarea Shortcode în Editorul Site-ului

Dacă folosești o temă bloc cu suport pentru editorul de site, atunci mergi la pagina Aspect » Editor pentru a lansa Editorul de Site.

Aici, poți adăuga un bloc de shortcode chiar înainte de blocul Titlu arhivă.

Acum lipiți scurtcodul pe care l-ați copiat anterior în blocul de scurtcod.

Nu uitați să salvați modificările pentru a le aplica. Acum puteți vizita pagina arhivei categoriei dvs. pentru a vedea shortcode-ul în acțiune.

Nu vă faceți griji dacă imaginea nu arată corect. Vă vom arăta cum să o remediați mai târziu folosind CSS personalizat.

Opțiunea 2. Afișează manual pictogramele imaginilor categoriilor

Pentru această metodă, va trebui să adăugați codul personalizat în fișierele temei WordPress.

Dacă este prima dată când editați fișiere WordPress, atunci s-ar putea să doriți să consultați ghidul nostru despre cum să copiați și să lipiți cod în WordPress.

Mai întâi, va trebui să vă conectați la site-ul dvs. WordPress folosind un client FTP sau managerul de fișiere al hostingului dvs. WordPress.

Odată conectat, va trebui să găsești șablonul responsabil pentru afișarea arhivei taxonomiei tale. Acestea pot fi fișierele archives.php, category.php, tag.php sau taxonomy.php.

Pentru mai multe detalii, consultați ghidul nostru despre cum să găsești fișierele de editat într-o temă WordPress.

Odată ce ați găsit fișierul, va trebui să îl descărcați pe computer și să îl deschideți într-un editor de text precum Notepad sau TextEdit.

Acum lipiți următorul cod acolo unde doriți să afișați imaginea taxonomiei. De obicei, ați dori să o adăugați înainte de titlul taxonomiei sau eticheta the_archive_title().

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

După adăugarea codului, trebuie să salvezi acest fișier și să-l încarci înapoi pe site-ul tău folosind FTP.

Acum puteți vizita pagina arhivei taxonomiei pentru a vedea cum afișează imaginea taxonomiei. Iată cum arăta pe pagina noastră de arhivă demo.

Acum, s-ar putea să arate încă ciudat, dar nu vă faceți griji. Puteți să-l stilizați folosind CSS personalizat.

Stilarea pictogramele categoriilor cu CSS personalizat

După ce ați adăugat pictograma categoriei sau imaginile taxonomiei în tema WordPress, imaginea dvs. s-ar putea să nu arate foarte bine.

Pentru a remedia acest lucru, va trebui să adăugați cod CSS pentru a-l alinia corect.

Dacă este prima dată când adăugați cod CSS în WordPress, atunci consultați ghidul nostru pentru începători despre adăugarea de CSS personalizat în WordPress.

Iată CSS-ul personalizat pe care l-am folosit pentru imaginea categoriei.

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

În funcție de tema dvs., este posibil să fie necesar să stilizați și elementele înconjurătoare, cum ar fi titlul arhivei, titlul taxonomiei și descrierea.

Am înfășurat pur și simplu titlul și descrierea arhivei taxonomiei într-un element <div> și am adăugat o clasă CSS personalizată. Apoi am folosit următorul cod CSS pentru a ajusta titlul și descrierea.

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

Iată cum a arătat după aceea pe site-ul nostru de test.

Excludeți taxonomiile de la afișarea imaginilor taxonomiilor

Acum, unii utilizatori ar putea dori să folosească imagini de taxonomie doar pentru anumite taxonomii.

De exemplu, dacă aveți un magazin online folosind WooCommerce, atunci s-ar putea să doriți să excludeți categoriile de produse.

Pur și simplu reveniți la pagina Imagini categorii din zona de administrare WordPress și bifați taxonomiile pe care doriți să le excludeți.

Nu uitați să faceți clic pe butonul „Salvare modificări” pentru a vă stoca setările.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați cu ușurință imagini de taxonomie în WordPress. De asemenea, ați putea dori să vedeți aceste utile trucuri și pluginuri pentru categorii pentru WordPress sau articolul nostru despre cum să schimbați ordinea categoriilor în WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.