• Articles
• admin

Ogni sito WordPress è diverso. Questo perché ognuno sceglie un tema diverso o” look and feel ” per il loro sito. Creare un’intestazione e un menu di navigazione in alto in WordPress sarà un processo leggermente diverso per ogni sito.

Qui sto usando il framework tema Genesis per WordPress perché mi piace assolutamente. Tuttavia, ci saranno punti importanti in questo articolo che wil aiutare chiunque con un sito web WordPress.

Questo fa parte di una serie di articoli e video in cui creo un sito web da zero. Per prima cosa ho spiegato come creare un tema figlio per il framework Genesis e poi ho scritto di iniziare a modellare il tema aggiungendo lo sfondo e il logo.

Aggiunta di link Facebook, link Twitter e altre informazioni all’intestazione

Avendo già aggiunto il logo in alto a sinistra dell’intestazione del nostro sito, ora aggiungeremo alcune informazioni extra sul lato destro della nostra intestazione. In questo caso aggiungeremo link Twitter e Facebook, ecc., per mezzo di un widget.

Devo ammettere che ultimamente sono diventato un po ‘pazzo di widget, essendo stato un po’ sprezzante nei loro confronti in passato. Che cosa è un widget? Bene, sono pezzi autonomi di un sito Web che puoi trascinare e controllare tramite un’area di widget facile da usare.

Una delle tante bellezze di Genesis è la sua capacità senza sforzo di widgetize qualsiasi area del sito web. Quindi:

• Se si desidera un diverso ordine di caselle nella barra laterale si può fare in pochi secondi.
• Se si desidera un post in primo piano qui, 5 ultime intestazioni di categoria con le miniature lì sulla home page, si può fare in pochi secondi.
• Se si desidera una barra di ricerca, condivisione sociale, feed Twitter, calendario, tag cloud, ecc., qui, là o dovunque, Lei può farlo in secondi.

Questa funzionalità di back-end intuitiva e facile da usare è particolarmente utile quando si creano siti Web per i clienti che desiderano la capacità di controllare tutte le aree di un sito Web ma non hanno le competenze per farlo.

Ad ogni modo, in questo caso abbiamo bisogno di creare il nostro widget personalizzato e lo facciamo trascinando un widget di testo nell’area destra dell’intestazione nell’aspetto > Interfaccia widget in WordPress.

E in questo widget di testo puoi inserire HTML. Ecco l’HTML che ho messo per questo particolare sito. Ho solo un link alla pagina Facebook, un link Twitter e un numero di telefono.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

E qui è il CSS per lo stile di cui sopra:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

Qui è quello che appare sul lato destro della testa, come un risultato:

Video di aggiunta di voce info e menu di navigazione

In questo video vi mostra come aggiungere il widget per l’intestazione e come stile il menu nella Genesi.

Creazione del menu di navigazione in alto

I menu di navigazione in alto (o “navbar”) erano la rovina della mia esistenza ma ora, con Genesis e WordPress menu, ho sviluppato un sistema davvero semplice per crearli che richiede secondi anziché ore.

Genesis ha già in atto la possibilità di avere un menu di navigazione primario e secondario. Per questo particolare esempio, mi sono liberato del menu di navigazione secondario utilizzando le impostazioni del tema Genesis poiché il client ne voleva solo uno.

Nel video qui sopra vi mostro come ho modificare il CSS per ottenere il menu a guardare come quello nel PSD visivo che ho fatto.

Utilizzando Chrome Developer Tools o il componente aggiuntivo Firebug per Firefox, puoi dire quali selettori nell’HTML vengono utilizzati nel CSS per modellare il menu.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

Come puoi vedere nel video qui sopra, ho aumentato il raggio degli angoli arrotondati, aggiunto uno sfondo sfumato e cambiato il colore del bordo del menu. Quindi ora il menu non sembra il noioso grigio che si ottiene con un’installazione di vanilla Genesis.

Ho anche aggiunto il seguente CSS per cambiare il colore del testo nel menu in bianco.

#nav li a {color: #fff; }

C’è anche la possibilità di modificare lo stile dei collegamenti alla pagina corrente, i collegamenti al passaggio del mouse, i collegamenti alle pagine secondarie e i collegamenti alle pagine secondarie.

Con Genesis, puoi facilmente avere menu a discesa per pagine secondarie (o pagine secondarie) e quindi collegamenti a comparsa per pagine secondarie (o pagine nipoti). È possibile avere questi su entrambi i menu di navigazione primaria e secondaria.

Creazione di pagine, pagine figlio e pagine nipote

Ecco il mio video in cui aggiungo nuove pagine al menu WordPress in modo che appaiano nel menu di navigazione come pagine, pagine figlio (come menu a discesa) e pagine nipote (come flyout).

È possibile scegliere una pagina per essere una pagina figlio o nipote sotto Genitore nell’editor di pagina. E quando guardi le pagine (sotto Pages > Tutte le pagine) le pagine figlio e nipote sono rientrate sotto il loro genitore. Facendo questo darà loro anche un URL logico (ad esempio, www.site.com/music/jazz/charlie-parker dove la pagina “Charlie Parker” è figlio di “Jazz” che è figlio di “Musica”).

Creazione di un menu di navigazione con menu a discesa e fly-out

Per far apparire correttamente queste pagine nel menu di navigazione, devi solo trascinarle nelle rispettive posizioni nei menu di Aspetto >. Ancora una volta, le pagine figlio sono rientrate sotto il loro genitore. Non dimenticare di dare al menu un nome (come “navbar”, ad esempio) e impostarlo come menu di navigazione principale.

Quindi, organizzare le pagine nell’aspetto di WordPress > Nell’area dei menu in questo modo…

… creerà un menu a discesa con fly-out come questo:

Si prega di vedere il video qui sopra per una dimostrazione di questo.

Cosa ne pensi?

Cosa ne pensi di questo metodo di modifica dell’intestazione e del menu di navigazione di un sito web? Lo fai in un modo diverso?