Els menús de navegació wordpress depenen del tema que escolleixis. La gran majoria accepten menús diversos sent els més habituals un menú primari i un altre de secundari. Normalment es posicionen horitzontalment en la capçalera , però també es poden ubicar de forma vertical en els laterals. Els menús de navegació són elements claus alhora de guiar el visitant per les diferents seccions del teu lloc web. Utilitzar un disseny clar i senzill, afavoreix l’exploració.
En aquesta entrada aprendràs a crear menús de navegació amb wordpress des de l’editor de menús. Els punts a explicar són:
- Com crear menús des de zero i com editar-los
- Afegir submenús i desplegables
- Com afegir pàgines
- Com afegir enllaços externs al menús
- Les opcions de pantalla i l’ajuda.
Com crear (i editar) els menús de navegació wordpress mitjançant el personalitzador
1. Els detalls del tema wordpress
Com a exemple pràctic del que explicaré, utilitzaré el tema gratuït Twenty Fourteen que permet instal·lar dos menús: el primari en la capçalera frontal i el secundari en la barra lateral esquerra.
Per esbrinar quants menús té un tema abans d’instal·lar-ho, ho podem consultar en els detalls del tema:
Per això s’ha d’accedir al menú d’administració del tauler wordpress: Aparença > Temes
Els menús del tema exemple,
2. Personalitzant els menús de navegació
En el tauler d’administració wordpress accedeix al personalitzador de menús dins de: Aparença > Menús
El personalitzador et permet crear menús de navegació SENSE PROGRAMAR en HTML. Les opcions que hi ha són:
- Edició dels menús: Permet editar el menú o crear-ne de nous.
- Ubicació dels menús: Permet assignar (o canviar) una posició als menús creats.
- Opcions de pantalla: Mostra tots els elements que es poden incloure dins del menú com pàgines, entrades, categories o enllaços personalitzats. També activa (o desactiva) les opcions avançades dels elements de navegació .
- Ajuda: Mostra l’ajuda de wordpress associada als menús i referencies d’enllaços externs on trobar més informació al respecte (en anglès).
3. Edició: Crea o edita menús
En el caixetí de l’esquerra, tenim tots els elements possibles que poden afegir-se al menú, classificats segons tipus (pàgines, entrades, etc). En l’exemple es veu com afegim la pàgina ‘Qui Som’ al menú que hem anomenat ‘Superior’. Seleccionem la pàgina i cliquem ‘Afegeix al menú’ per incorporar l’element al menú.
Per fixar l’element afegit, cal prémer el botó blau ‘Desa el menú’.
En el caixetí de la dreta desplegant la barra de l’element afegit i tenim a l’abast la resta de paràmetres a configurar:
- Tipus d’element: En aquest cas l’element de navegació enllaça amb la pàgina ‘Qui Som’.
- Etiqueta de navegació: Títol de l’element de navegació que pot ser diferent del nom del document enllaçat.
- Títol de l’atribut:Informació addicional que es veu quan es passa el ratolí per sobre de l’element.
- Destinació de l’enllaç: Obrir l’enllaç en una finestra o pestanya nova.
- Classes CSS: Afegeix les classes CSS per canviar l’aspecte dels enllaços amb les fulles d’estil.
- Relació amb l’enllaç (XFN): Afegeix l’atribut HTML rel=’ ‘ a l’enllaç que indica la relació entre l’element i el document enllaçat. Originàriament es va dissenyar per assignar la notació XFN a l’enllaç que és una forma d’especificar relacions humanes dins dels enllaços. Avui dia s’utilitza més per assignar un ‘nofollow‘ als enllaços externs de pagament, de poca confiança o que no interessa que rebi part del del ‘PageRank‘ del teu lloc web.
- Descripció: Descripció llarga de l’element enllaçat que alguns temes suporten.
- Ubicació dins del menú: Podem ubicar l’element on ens convingui més (principi, final, mig, etc). Fins i tot, el podem inserir dins d’un altre element, fent un desplegable.
- Suprimir l’element de navegació: Només esborra l’element de navegació. No el document enllaçat.
Trobaràs més informació en el còdex wordpress, però aquí ho tens tot resumit.
4. Reorganitza els elements de navegació arrastrant i deixant anar
Un cop tens el menú complert els elements de navegació es poden moure i re-organitzar amb el ratolí com si fossin blocs gràfics amb la més que coneguda característica del arrastrar i deixar anar (drag and drop).
També els pots inserir, creant submenús desplegables,
Aquest menú es veuria així:
5. Gestió de les ubicacions dels menús
Aquesta pestanya permet assignar les barres de navegació a la posició primaria o secundària, segons el tema. El Twenty Fourteen de l’exemple permet posicionar o bé en la capçalera superior o en la barra lateral esquerra.
6. Opcions de pantalla: Control dels elements de navegació i els seus atributs
Amb el botó d’Opcions de pantalla podem controlar els elements a incloure dins dels menús,
i també els atributs a configurar després,
7. Afegir enllaços personalitzats al menú de navegació
Per afegir enllaços personalitzats, abans cal haver activat l’opció de pantalla que ho permet.
Llavors només cal afegir la direcció URL que vulguem enllaçar,
i després incloure-la dins el menú,
Així és com és com es crea l’enllaç a la pàgina d’inici en el menú de navegació.
8. Selecció de menús a editar
Si desitges editar els menús que has creat, només els has de seleccionar en el desplegable dins de la pestanya d’edició,
9. La pestanya Ajuda
Desplega la pestanya ajuda si necessites trobar més informació al respecte,
i fins aquí s’ha acabat l’explicació teòrica. Ara a practicar!