Condimentați meniul WordPress cu pictograme Webtimiser
- Ultima actualizare la 18 septembrie 2020
- Sonia Rieder
- Wordpress - Sfaturi și tutoriale
- 1
Navigarea este o parte foarte importantă a unui site web și poate fi ușor adaptată în WordPress. În plus față de font sau culoare, pictogramele pot fi folosite și pentru a proiecta elementele individuale de meniu. Vă explic pas cu pas cum puteți crea un meniu WordPress cu pictograme folosind exemplul temei Twenty Fifteen.
1. Creați o temă pentru copii
Pentru ca modificările din foaia de stil să nu se piardă la actualizarea unei teme, trebuie mai întâi să creați o temă copil.
Puteți găsi instrucțiuni detaliate despre cum să faceți acest lucru în articolul meu Crearea unei teme pentru copii WordPress.
Alternativ, puteți, desigur, să utilizați, de asemenea, un plugin sau personalizatorul pentru propriul dvs. CSS în WordPress.
2. Adăugați pictograme în meniu
Tema Twenty Fifteen include Pictogramă Font Genericons, pe care o voi folosi în acest ghid. Dacă doriți să utilizați meniul WordPress cu pictograme dintr-o altă bibliotecă de fonturi, poate fi necesar să le integrați în prealabil.
Iată un scurt fragment pentru integrarea Font Awesome. Cu peste 500 de pictograme, acest font de pictograme este mult mai extins și încorporat rapid în WordPress. Pentru a face acest lucru, pur și simplu adăugați următorul fragment de cod în fișierul functions.php:
Apoi, puteți utiliza și pictogramele Font Awesome pentru elementele de meniu. Doar stilurile CSS trebuie adaptate diferit față de aceste instrucțiuni.
Pasul 1: activați opțiunile avansate ale meniului
În WordPress puteți atribui o clasă CSS separată fiecărui element de meniu. Pentru a face acest lucru, trebuie mai întâi să activați proprietățile avansate ale meniului.
Pentru a face acest lucru, mergeți mai întâi la tabloul de bord Design> Meniuri.
Acolo veți găsi proprietățile avansate ale meniului oarecum ascunse în panou Opțiuni în vârf.
Acum bifați caseta Clase CSS. Apoi, puteți atribui o clasă CSS separată fiecărui punct de navigare. Și astfel îl puteți stiliza individual.
Pasul 2: introduceți clasa CSS
Biblioteca de fonturi de pictograme Genericons este deja integrată în tema WordPress Twenty Fifteen. De aceea folosesc aceste pictograme pentru a evidenția elementele de meniu.
Pentru elementul de meniu Acasă aleg pictograma genericon-acasă. Așa că intru clase CSS în noul câmp: genericon genericon-home
Pentru celelalte elemente de meniu, puteți vizualiza pictogramele disponibile pe site-ul web genericons.com.
Pur și simplu faceți clic pe pictograma dorită și apoi pe Copiați HTML. Apoi veți primi codul pentru pictogramă într-o fereastră pop-up.
Pentru meniul meu de exemplu, am selectat următoarele pictograme:
- Acasă: genericon genericon-home
- Contact: genericon genericon-mail
- Blog: genericon genericon-image
Pasul 3: adaptați foaia de stil
Pentru ca pictogramele să fie poziționate corect în fața elementelor de meniu, trebuie introduse câteva instrucțiuni CSS.
Următoarele stiluri CSS sunt acum incluse în fișier stil.css.
În funcție de gustul dvs., puteți specifica și culoarea icoanelor și dimensiunea acestora.
Meniul WordPress finalizat cu pictograme
Adăugați pictogramele meniului WordPress prin plugin/temă
Icoanele sau imaginile pot fi, desigur, adăugate și la meniurile WordPress folosind un plugin! Există câteva pluginuri pentru acest lucru, cum ar fi Pictograme meniu. Cu acesta vă puteți condimenta meniul fără CSS.
Dar unele teme permit, de asemenea, integrarea icoanelor ca standard. Folosesc tema OceanWP și aici pot adăuga o pictogramă sau o imagine la meniu cu un clic.
OceanWP: includeți pictograme în meniu cu un clic
Yoast SEO pentru WordPress: Instrucțiuni și sfaturi