menu-wordpress

Creare Menu WordPress Personalizzati



Questa guida ai sistemi di Menu WordPress, introdotti con WP 3.0, affronta le funzioni principali che un utente può aver bisogno di svolgere utilizzando il Menu WordPress editor, quali:

  • Definire un Menu WordPress ,
  • Aggiungere elementi al Menu Wordpress,
  • Personalizzare gli elementi del Menu attraverso le opzioni di ”Etichetta di Navigazione” e di “Attributi di Titolo”,
  • Cancellare gli oggetti del Menu WordPress
  • Creare Menu WordPress multi-livello.

menu-wordpress
Con WordPress 3.6 la pagina del menu è stata aggiornata, ed ora in cima alle pagine dei Menu compaiono due schede:  Modifica Menu e Gestisci Posizioni.

Definire un Menu Wordpress

Avrete bisogno di definire un MenuWordpress prima di lavorarci su. Ecco come procedere:

  1. Effettuate l’accesso nella Bacheca di WordPress
  2. Dal Menu di “Aspetto”, sulla sinistra della bacheca, selezionate l’opzione “Menu”
  3. Aprite l’editor di Menu Wordpress.
  4. Inserite il nome del nuovo Menu Wordpress nell’area Nome Menu
    menu-posizioni
  5. Cliccate su Crea Menu Wordpress. Nel nostro esempio chiameremo il nuovo Menu navMenu, ma voi potete scegliere il nome che più vi aggrada.Assicuratevi che navMenu sia impostato come Menu principale cliccando sul pulsante “Gestisci Posizioni” in cima alla pagina, e controllando che sia il “Assigned Menu”(Menu Assegnato). Nel tema che stiamo usando per l’esempio la posizione assegnata di default (e anche l’unica) è quella di Menu Principale.

Il Menu WordPress editor dovrebbe ora avere un aspetto simile a questa schermata:

menu-wordpress

Aggiungere Elementi al Menu Wordpress

Andremo ora ad aggiungere 6 pagine al nostro nuovo Menu appena creato. Una delle pagine aggiunte sarà la Home del sito.
I passi da seguire sono i seguenti:

  • Cercate il sotto-Menu “Pagine” nell’angolo sinistro dell’area di Menu editor;
  • da qui cliccate su Vedi Tutti i links.
  • Visualizzerete una lista di tutte le pagine attualmente pubblicate sul vostro sito web/blog.
    menu-wordpress-editor
  • Selezionate dunque le pagine che volete aggiungere al Menu barrando la casella al lato di ciascun titolo. Nel nostro esempio useremo le pagine “Home”, “Chi Siamo”, “Un’altra Nuova Pagina”, “Pagina Figlio 1”, “Pagina Figlio 2”, e Livello 1” .
  • Una volta selezionate le pagine da includere, cliccate sul pulsante Aggiungi Menu posizionato in basso a destra del riquadro. Visualizzerete a questo punto una seri di caselle, affiancate a sinistra dai titolo delle pagine che avete scelto.
  • Cliccate su Salva Menu per salvare le modifiche.

Cancellare un elemento dal Menu Wordpress

Per cancellare un elemento dal Menu Wordpress, dovete accedere all’area delle opzioni di quell’oggetto, cliccando sull’icona a forma di freccetta ubicata all’estremità destra del box dell’oggetto, nella finestra principale del WordPress Menu Editor. Facendo click sulla freccetta dovreste visualizzare un a schermata simile a questa:
etichetta-menu-wordpress

Cliccate su Rimuovi (in basso a sinistra); la casella del Menu dell’oggetto dovrebbe sparire. Salvate dunque i cambiamenti fatti cliccando su
Salva Menu.

Personalizzare gli Elementi del Menu WordPress

Tra le voci del Menu degli elementi trovate l’Etichetta di Navigazione e gli Attributi di Titolo
L’Etichetta di Navigazione specifica il titolo con cui l’oggetto del Menu apparirà nel Menu di navigazione, ovvero quello che gli utenti visualizzeranno visitando il vostro sito web Wordpress.

L’opzione Attributi di Titolo specifica il Testo Alternativo per l’oggetto del Menu, che verrà visualizzato dagli utenti posizionando il cursore del mouse sulla voce del Menu, oppure da chi visiterà il sito usando un software screen reader.

Proviamo ora a personalizzare il Menu dell’elemento del Menu principale “Un’altra Nuova Pagina”. Imposteremo come Etichetta di Navigazione il titolo Pagina 2, e l’Attributo di Titolo sarà “Clicca qui per andare a Pagina 2”.

Provate dunque a seguire i seguenti steps:

  • Cliccate sulla freccetta a destra dell’elemento del Menu principale “Un’Altra Nuova Pagina” per espandere le opzioni del Menu dell’oggetto.
  • Inserite il contenuto scelto nei campi dell’Etichetta di Navigazione e Attributi di Titolo e poi
  • cliccate su Salva Menu per salvare i cambiamenti.

Una volta compiuta quest’operazione, guardate il Menu principale nel Menu editor: il titolo visualizzato per l’oggetto che avete modificato dovrebbe ora corrispondere all’etichetta di navigazione scelta.
Nel nostro esempio dunque la voce dovrebbe essere cambiata da “Un’Altra Nuova Pagina” a “Pagina 2”.

Creare un Menu multi-livello

Per progettare il vostro Menu, potreste provare ad immaginare ogni oggetto del Menu come un titolo di un documento.
In un testo formale, i titoli della sezione principale (Titolo di Livello 1) sono posizionati a sinistra della pagina; i sottotitoli delle sezioni inferiori (Livello 2) sono disposti un po’ più a destra, e così via tutti i tioli di sezioni subordinate all’interno di una sezione superiore (Livello 3,4 ecc) sono disposti sempre più a destra nella pagina.
Il Menu editor di WordPress 3.6 permette di creare Menu multilivello attraverso un’interfaccia molto semplice. Potete trascinare gli oggetti del Menu verso l’alto o verso il basso per cambiare l’ordine di apparizione nel Menu, oppure trascinarli a sinistra o a destra per creare una struttura multilivello.
Per rendere un oggetto del Menu subordinato rispetto ad un altro, trascinate il primo posizionandolo sotto il primo e principale, leggermente più a destra di questo.
In questa sezione ci baseremo sul Menu usato come esempio nella sezione precedente. Il Menu consiste attualmente dunque esclusivamente di elementi principali (Livello 1), come vedete nell’immagine seguente:

struttura-menu-wordpress
Dunque, tenendo a mente come sarebbe la struttura dei titoli di un documento, andiamo ora ad organizzare il nostro Menu multi-livello:

1. Home
2. Chi siamo(About)
3. Pagina 2 (Page2)
3.1 Pagina Figlio 1 (Child Page1)
3.2Pagina Figlio 2(Child Page2)
4. Livello 1(Level1)

Gli elementi principali del Menu saranno Home, Chi Siamo, Pagina 2 e Livello1, mentre Pagina Figlio 1 e Pagina Figlio2 saranno voci subordinate a Pagina 2.

Per ottenere questo risultato procedete così:

  • Posizionate il cursore mouse sul riquadro della Pagina Figlio 1,
  • Tenete premuto mentre trascinate l’oggetto più a destra; poi rilasciate il mouse.
  • Ripetete le stesse azioni anche per Pagina Figlio 2,
  • Assicuratevi poi che entrambe siano posizionate alla stessa distanza dal margine sinistro.

Il vostro Menu WordPress apparirà simile a questo:

struttura-menu-wp

Per concludere salvando le modifiche cliccate sul pulsante Salva Menu; il vostro nuovo Menu dovrebbe ora essere pronto!

Il Menu WordPress in Azione

Abbiamo finalmente imparato come si crea un Menu WordPress. Se il vostro tema supporta i Menu WordPress (in questo esempio abbiamo utilizzato il teme Twenty Twelve, che supporta tale funzione), chi naviga sul sito dovrebbe visualizzare in evidenza solo i quattro elementi principali del Menu. I due oggetti subordinati a Pagina 2 appariranno in un sotto-Menu separato, visualizzabile posizionando il cursore del mouse su Pagina 2(Page2) del Menu principale, così come mostrato nella seguente immagine.
menu-wordpress-front-end

Torna alla Guida WordPress