Come creare un menu dinamico in WordPress

Pubblicato: 2022-10-23

WordPress è un sistema di gestione dei contenuti (CMS) che ti consente di creare un sito Web o un blog da zero o di migliorare un sito Web esistente. In questo articolo, ti mostreremo come creare un menu dinamico in WordPress. Un menu dinamico è un menu che cambia in base alla pagina che stai visualizzando. Ad esempio, se stai visualizzando una pagina su "Temi WordPress", il menu mostrerà collegamenti ad altre pagine su temi WordPress. Se stai visualizzando una pagina sui "Plugin di WordPress", il menu mostrerà collegamenti ad altre pagine sui plug-in di WordPress. Creare un menu dinamico in WordPress è facile. Innanzitutto, devi creare un menu. In secondo luogo, è necessario aggiungere elementi al menu. Terzo, è necessario assegnare il menu a una posizione. In quarto luogo, devi aggiungere il codice al tuo tema WordPress. Iniziamo con il primo passaggio: creare un menu.

Nella parte 2 di questa serie, facciamo un ulteriore passo avanti creando menu di navigazione dinamici. Imparerai come creare menu condizionali in base alla loro posizione in Block Visibility utilizzando il componente aggiuntivo Pro. Un tema del blocco viene utilizzato per creare parti del modello basate sui principi del blocco. Questo tutorial ti guiderà attraverso i passaggi necessari per creare un menu di navigazione secondario nella pagina "Escursioni". È semplice come fare clic sull'editor del sito per modificare l'intestazione del sito Web. Utilizzando il controllo Posizione nel plug-in Blocca visibilità, possiamo anche limitare la posizione del menu secondario. Nella Knowledge Base, selezionare l'opzione Posizione e quindi fare clic sull'icona con i puntini di sospensione per abilitarla.

Ora possiamo limitare la visibilità del blocco alla pagina Escursionismo utilizzando il controllo della posizione, che consente un maggiore controllo sulla visibilità. La regola Post ci indica di selezionare un tipo di post di Pagina e un tipo di pagina "Escursionismo". Nella configurazione della regola risultante, è necessario seguire quanto segue. Sulla homepage del nostro sito demo, saremo in grado di accedere a un nuovissimo menu condizionale. Il resto di questo articolo deve essere completato. È possibile ottenere ciò utilizzando una varietà di regole e set di regole. Per questa demo, abbiamo scelto un esempio semplice.

Per creare un nuovo menu, vai su Aspetto. Fai clic su "Crea menu" se desideri creare un menu secondario, "Il mio menu personalizzato" se desideri creare un menu personalizzato per una posizione specifica e "Menu secondario" se desideri creare un menu secondario per un'altra posizione. Dopo aver aggiunto alcune voci al menu, salvarlo (ad esempio, voce di menu 1, voce di menu 2 e voce di menu 3).

Come posso creare un menu dinamico nel tema personalizzato di WordPress?

Credito: wisdmlabs.com

Un modo per creare un menu dinamico in WordPress è utilizzare la funzione wp_nav_menu. Questa funzione ti consentirà di creare un menu che viene generato automaticamente in base alla struttura del tuo sito web. Puoi anche utilizzare questa funzione per creare un menu personalizzato specifico per il tuo tema.

Seguendo questi passaggi, puoi creare un menu di navigazione semplice e dinamico in WordPress. Il passaggio principale consiste nel registrare il menu di navigazione utilizzando la funzione register_nav_menus(). Per eseguirlo, devi prima registrarlo nel file functions.php nel tuo tema figlio e quindi utilizzare l'hook 'init'. In questo esempio, sfrutteremo il menu dell'intestazione principale. Il plug-in Nav Menu è disponibile su WordPress.org e ti consente di assegnare menu diversi a utenti diversi in base al loro ruolo. Possiamo anche utilizzare questo plugin per registrare più menu contemporaneamente. Nel passaggio precedente, possiamo definire lo stile del menu di navigazione in base al design del sito facendo riferimento a classi CSS personalizzate nella chiamata alla funzione WP_nav_menu.


Come creare un menu di intestazione dinamico in WordPress

Per creare un menu di intestazione dinamico in WordPress, dovrai prima creare un menu personalizzato. Per fare ciò, vai alla sezione Menu nel pannello di amministrazione di WordPress e fai clic sul collegamento Crea nuovo menu. Immettere un nome per il menu e fare clic sul pulsante Crea menu. Successivamente, dovrai aggiungere elementi al tuo menu. Per fare ciò, fai clic sul link aggiungi elementi e seleziona le pagine o i post che desideri aggiungere al tuo menu. Dopo aver aggiunto tutti gli elementi che desideri, fai clic sul pulsante del menu Salva. Il menu dell'intestazione dinamica è ora pronto per l'uso.

Se creiamo una pagina di menu dinamica con il Metodo della pagina di menu dinamica di WordPress, descritto più avanti in questo tutorial, saremo in grado di cambiarla. Nella navigazione principale, viene utilizzata un'immagine di sfondo per modificare la posizione della voce di menu in base al suo ID. L'uso del tag "span" ci consentirà di nascondere il testo per visualizzare l'immagine di sfondo come la vediamo noi. Il codice che useremo è generato dinamicamente da WordPress, usando una classe speciale chiamata current_page_ancestor, quindi dovrebbe apparire così: Non è stato detto altro. Se vogliamo aumentare il numero di sottopagine, è sufficiente aumentare o diminuire l'impostazione depth=2 in modo che visualizzi un numero illimitato di pagine. Usando i CSS, il collegamento alla pagina corrente, come mostrato nell'immagine qui sotto, è ora molto semplice da visualizzare in grassetto. Passa alla pagina principale con una sezione evidenziata. Evidenzia la pagina figlia del genitore.

WordPress Aggiungi dinamicamente voci di menu

L'aggiunta di voci di menu ai menu di WordPress può essere eseguita tramite la dashboard di amministrazione di WordPress o aggiungendo codice al tema. Se vuoi aggiungere una voce di menu a un menu esistente, accedi semplicemente al tuo sito WordPress e vai alla pagina "Aspetto > Menu". Da lì, puoi aggiungere nuove voci di menu selezionandole dal lato sinistro e facendo clic sul pulsante "Aggiungi al menu". Se desideri aggiungere voci di menu tramite codice, dovrai aggiungere alcune righe di codice al file functions.php del tuo tema. La prima cosa che devi fare è creare una nuova funzione che aggiungerà le voci di menu. Questa funzione può essere nominata come vuoi, ma la chiameremo "my_ custom_menu_items()". All'interno di questa funzione, dovrai utilizzare l'hook del filtro "wp_nav_menu_items" di WordPress. Questo hook ti consente di aggiungere nuovi elementi a un menu esistente. Il codice all'interno della tua funzione sarà simile a questo: function my_custom_menu_items( $items, $args ) { // Fai qualcosa con $items return $items; } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); Il codice sopra aggiungerà una nuova funzione che può essere utilizzata per aggiungere elementi a un menu esistente. La funzione stessa non fa ancora nulla, ma fornisce un framework che puoi usare per aggiungere le tue voci di menu personalizzate. Per aggiungere effettivamente voci di menu, dovrai modificare il codice all'interno della funzione in base alle tue esigenze. Ad esempio, se vuoi aggiungere un link alla tua pagina "Informazioni", devi utilizzare il seguente codice: function my_custom_menu_items( $items, $args ) { $items .= 'About'; restituire $ articoli; } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); Il codice sopra aggiungerà un nuovo collegamento al tuo menu con il testo "Informazioni". Puoi aggiungere tutte le voci di menu che desideri aggiungendo righe di codice aggiuntive all'interno della funzione.

Plugin del menu dinamico di WordPress

Un plugin per menu dinamico di WordPress è un ottimo modo per aggiungere un po' di pepe alla navigazione del tuo sito web. Consentendoti di creare menu che cambiano in base a ciò che i tuoi visitatori stanno guardando, puoi coinvolgerli e tornare per saperne di più.

Come creare menu personalizzati in WordPress

Per creare un menu personalizzato in WordPress, dovrai accedere alla sezione "Aspetto" nella dashboard e selezionare l'opzione "Menu". Da lì, puoi creare un nuovo menu e aggiungere le pagine, le categorie o i collegamenti personalizzati desiderati. Dopo aver salvato le modifiche, puoi assegnare il menu appena creato a una posizione sul tuo sito Web tramite la scheda "Gestisci posizioni".

Vegibit ti dà una comprensione di come creare un tema WordPress. Il menu sarà sotto il nome del sito e l'area dello slogan, ma sarà più in alto rispetto al contenuto del sito. Affinché il menu appaia, dobbiamo prima registrare la posizione nel file functions.php del tema. Crea il nostro menu personalizzato nella dashboard di WordPress. Ora è necessario registrare il nostro nuovo menu con il core di WordPress. Con questa funzione, ora possiamo gestire la posizione della dashboard. Vogliamo che appaia come se provenisse direttamente dalla funzione WordPress_nav_menu().

Nel passaggio successivo, ci collegheremo all'intero elenco di categorie. Potresti essere in grado di ottenere un effetto al passaggio del mouse se muovi il mouse su ciascun collegamento. Per avere un'idea di come funzionerà, abbiamo creato un file style.css. Vogliamo rimuovere la sottolineatura per i collegamenti e i punti elenco da ogni elemento nel nostro elenco, nonché rimuovere il riempimento e il margine da ogni elemento. Nel Riepilogo di WordPress troverai una procedura passo passo per creare un menu personalizzato. Questa è un'eccellente spiegazione di come utilizzare un menu personalizzato in un tema WordPress. Il nostro compito è stato semplificato grazie ad alcune funzioni di WordPress. Una volta che il nuovo menu è stato collegato a WordPress, è stato semplice aggiungere o rimuovere qualsiasi tipo di contenuto desiderassimo da quel menu.

Creazione di un menu personalizzato in WordPress

Dopo aver creato il tuo menu, vai su Aspetto. Sarai in grado di vedere il nuovo menu nella pagina del menu. Non appena lo selezioni, puoi personalizzarlo come meglio credi.