Com Personalitzar Els Menús de Navegació WordPress

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

temes menus wordpress
Temes WordPress: Detalls del tema

Els menús del tema exemple,

Personalitzant temes wordpress: Menús de navegació
Menús Twenty Fourteen

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

Personalitzant temes wordpress: els menús de navegació

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

Personalitzant temes wordpress: els menús de navegació

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ú.

Personalitzant temes wordpress: els menús de navegació
Crear o editar menús: afegir elements al menú de nom ‘Superior’

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:

Personalitzant temes wordpress: els menús de navegació
Desplegable de l’element de navegació
  1. Tipus d’element: En aquest cas l’element de navegació enllaça amb la pàgina ‘Qui Som’.
  2. Etiqueta de navegació: Títol de l’element de navegació que pot ser diferent del nom del document enllaçat.
  3. Títol de l’atribut:Informació addicional que es veu quan es passa el ratolí per sobre de l’element.
  4. Destinació de l’enllaç: Obrir l’enllaç en una finestra o pestanya nova.
  5. Classes CSS: Afegeix les classes CSS per canviar l’aspecte dels enllaços amb les fulles d’estil.
  6. 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.
  7. Descripció: Descripció llarga de l’element enllaçat que alguns temes suporten.
  8. 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.
  9. 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).

Personalitzant temes wordpress: menus
Arrastra i deix anar els elements de navegació.

També els pots inserir, creant submenús desplegables,

personalitzant temes wordpress: menús de navegacióAquest menú es veuria així:

personalitzant temes wordpress: menús de navegació
Aspecte del menú desplegable

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.

personalitzant els menús wordpress: menús de navegació
Gestió de les posicions dels menús de navegació

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,

Personalitzant el temes wordpress: menús de navegació
Opcions de pantalla: Mostra les opcions ocultes dels elements de navegació

i també els atributs a configurar després,

Personalitzant temes wordpress: menús de navegació
Opcions de pantalla: Atributs dels elements de navegació

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,

personalitzant temes wordpress: menús de navegació
Enllaços personalitzats

i després incloure-la dins el menú,

personalitzant temes wordpress: menús de navegació

Així és com és com es crea l’enllaç a la pàgina d’inici en el menú de navegació.

personalitzant temes wordpress: menús de navegació
Enllaç a la Homepage

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ó,

edició de menús de navegació

9. La pestanya Ajuda

Desplega la pestanya ajuda si necessites trobar més informació al respecte,

Personalitzant temes wordpress: menús de navegació

i fins aquí s’ha acabat l’explicació teòrica. Ara a practicar!

Deixa un comentari