Creazione di un tema WordPress da HTML statico aggiunta di navigazione

Se hai lavorato con questa serie, ora hai un tema di lavoro con i file modello che hai caricato su WordPress. In questo tutorial, continuerai a lavorare su header.php file che hai creato nella Parte 2. Imparerai come aggiungere un menu di navigazione che può essere modificato tramite la schermata di amministrazione dei menu di WordPress. Per fare ciò dovrai anche creare un nuovo file per il tuo tema: il file delle funzioni.


Cosa ti serve

Per completare questo tutorial, avrai bisogno di quanto segue:

  • il tuo editor di codice di scelta
  • un browser per testare il tuo lavoro
  • un'installazione di WordPress, locale o remota
  • Se stai lavorando localmente, avrai bisogno di MAMP, WAMP o LAMP per abilitare l'esecuzione di WordPress.
  • Se stai lavorando in remoto, avrai bisogno di un accesso FTP al tuo sito più un account amministratore nella tua installazione di WordPress.

1. Registrazione di un menu di navigazione

Per registrare un menu di navigazione, si utilizza il register_nav_menu () funzione, che sarà necessario aggiungere al tema functions.php file.

Poiché il tuo tema non ha ancora questo file, inizi a crearne uno.

Nella cartella del tema, creare un nuovo file vuoto chiamato functions.php.

Apri il nuovo file e aggiungi il seguente:

Hai appena creato la prima funzione del tema, datti una pacca sulla schiena!

Viene chiamata la funzione che hai creato wptutsplus_register_theme_menu (), e ho aggiunto un wptutsplus prefisso all'inizio del nome per garantire che il nome sia unico e non si scontri con altre funzioni registrate dai plugin che potresti eseguire sul tuo sito.

La funzione include il register_nav_menu () Funzione WordPress che crea un menu. La tua funzione viene quindi attivata tramite dentro gancio di azione, il che significa che WordPress eseguirà la funzione quando si inizializza.

Nota: che devi attivare funzioni come questa tramite il gancio corretto o non funzioneranno.

Il register_nav_menu () la funzione ha due parametri:

  • Uno di questi parametri include la posizione del menu. In questo caso, abbiamo chiamato la posizione 'primario'. Lo aggiungerai al tuo header.php file più tardi in modo che WordPress visualizzi il menu corretto.
  • Il secondo parametro è la descrizione del menu. In questo caso, "Menu di navigazione principale". Questo sarà visibile nella schermata di amministrazione del menu '.

2. Impostazione del menu di navigazione

Ora avrai accesso alla schermata del pannello 'Menu', che non era disponibile in precedenza poiché il tuo tema non aveva un menu registrato. In questo momento, i suoi contenuti non sono perfetti, ma presto cambieremo questo:

Mentre crei pagine, post e altri contenuti, puoi aggiungerli al menu di navigazione tramite questa schermata. Aggiungerò due nuove pagine chiamate "Blog" e "Informazioni". Specifico la pagina "Blog" come la pagina in cui i miei post vengono visualizzati tramite la schermata Impostazioni. Puoi creare qualsiasi pagina tu voglia.

Fatto ciò, tornare alla schermata 'Menu' per modificare il menu, aggiungendo le nuove pagine. Una volta trascinate le nuove pagine nel menu, fai clic su "Crea menu" per creare il nuovo menu.

Infine, seleziona "Menu di navigazione principale" sotto Luoghi a tema per garantire che questo menu venga visualizzato come il menu principale che hai appena registrato e salvare il menu.

Nota: Ricorda sempre di salvare il tuo menu dopo aver apportato le modifiche ad esso, diversamente dai widget, i menu non vengono salvati automaticamente da WordPress.


3. Aggiunta del menu al tema

In questo momento, questo menu non sarà ancora visibile sul tuo sito web; è necessario aggiungere il menu al file di intestazione per farlo accadere.

Apri i tuoi temi header.php file e trova questo codice:

E sostituirlo con questo:

Questo aggiunge il menu di navigazione che hai registrato in questo posto nel tema, usando il wp_nav_menu () funzione e specificazione 'primario' (la posizione che hai specificato per il tuo menu quando lo hai registrato) come 'Theme-location'.

Questo è ora riflesso nel menu di navigazione del mio sito:


Riepilogo: i menu non sono solo per l'intestazione del sito!

In questo tutorial, hai imparato come registrare un menu di navigazione, aggiungere elementi e aggiungerlo all'intestazione del sito.

È importante notare che i menu non devono solo essere nell'intestazione del sito. È possibile aggiungere menu in una varietà di luoghi, tra cui:

  • La barra laterale, forse un menu di sezione per una sezione del sito o un elenco di sottopagine della pagina corrente
  • Il piè di pagina: un menu delle pagine di "stampa piccola" o delle pagine più accessibili.
  • Sotto la barra di navigazione principale, forse un menu di sezione immediatamente sotto la navigazione principale.

Puoi aggiungere menu in più punti del tuo tema in uno dei tre modi.

Li ho elencati in ordine crescente di difficoltà:

  • creare menu aggiuntivi tramite la schermata di amministrazione "Menu" e quindi utilizzare il widget "Menu personalizzato" per visualizzarli ovunque nel tema in cui si dispone di un'area widget
  • crea menu aggiuntivi tramite la schermata di amministrazione "Menu" e aggiungili al codice del tema come hai fatto sopra. In questo caso si aggiunge un parametro aggiuntivo all'array chiamato da wp_nav_menu () funzione, specificando il 'menu' parametro come il nome che dai a ciascun menu che crei.
  • registrare più menu usando il register_nav_menus () funzione e aggiungili al posto pertinente nel tuo tema come sopra

Perché non provarlo?


risorse

  • Guida ai menu di navigazione
  • Il register_nav_menu () funzione
  • Il wp_nav_menu () funzione