Diamo un'occhiata alla risoluzione di un problema banale che gli sviluppatori incontrano di tanto in tanto. Accade che sui siti sia necessario visualizzare due menu contemporaneamente, che sono interconnessi: uno è il menu orizzontale in alto del 1o livello e il secondo è nella barra laterale del 2o livello. Inoltre, nel menu laterale vengono visualizzate solo le sottovoci per le quali è selezionato l'elemento genitore corrispondente nel menu principale. Ad esempio, se hai un elenco di paesi nell'intestazione del tuo sito, selezionando, ad esempio, Italia, otterrai solo un elenco di città italiane nella barra laterale.
In teoria, puoi implementare un trucco del genere utilizzando una funzione e un codice PHP complicato, ma suggerisco di utilizzare una soluzione già pronta: un widget di menu per WordPress chiamato Advanced Sidebar Menu. Questo è il più semplice possibile e non è necessario apportare alcuna modifica al modello.
Puoi scaricare il plugin da qui o installarlo tramite il pannello di amministrazione. La funzione principale è la creazione e visualizzazione di un menu laterale dinamico, che tenga conto del rapporto “genitore/erede” per pagine e categorie del sito.
Non è necessario effettuare alcuna impostazione aggiuntiva dopo l'installazione; nella sezione “Aspetto” - “Widget” appariranno semplicemente 2 nuovi elementi: Menu Pagine della barra laterale avanzata e Menu Categorie della barra laterale avanzata. Le impostazioni per questi widget di menu per WordPress sono simili, più o meno:
- Titolo: titolo del widget.
- Includi pagina principale: se aggiungere un elemento principale al menu.
- Includi genitore anche senza figli: indica se includere le pagine senza sottopagine.
- Ordina per: opzioni di ordinamento (numero sequenziale, titolo, data).
- Usa lo stile di questo plugin: usa gli stili di stile del plugin.
- Pagine da escludere (ID): pagine da escludere.
- Visualizza sempre le pagine secondarie: visualizza sempre le pagine secondarie.
- Livelli da visualizzare: numero di livelli di menu da visualizzare.
Come puoi vedere nello screenshot qui sopra, per le categorie tutto è sostanzialmente uguale, ma senza ordinamento e livelli. Inoltre, viene aggiunta un'opzione per visualizzare un elemento nella pagina con il testo completo del post (Visualizza categorie su singoli post).
Quindi, nella maggior parte dei casi, devi solo aggiungere un widget di menu per WordPress alla barra laterale e inizierà a funzionare immediatamente. Naturalmente, il sito deve avere una gerarchia corrispondente con sottopagine. Ad essere onesti, non è del tutto chiaro come impostare un menu dipendente per progetti complessi con una pagina genitore, a partire dal 2° livello. La descrizione del modulo dice che devi assegnare una pagina/categoria principale, ma non ho visto nulla di simile nelle impostazioni. D'altra parte, tali situazioni sono estremamente rare; di norma, spesso hai solo 2 menu (laterale e principale), quindi il widget Menu barra laterale avanzata è completamente adatto.
Infine, va notato che il modulo Pro dispone di una versione con impostazioni più avanzate (opzioni di design, stile a fisarmonica per i menu, ecc.). Consiglio agli sviluppatori di dare un'occhiata alla pagina Documenti per sviluppatori dove vengono raccolte informazioni su filtri/funzioni speciali per casi d'uso più complessi del plug-in.
Se hai ancora domande sul menu laterale di WordPress o conosci altri widget di menu adatti per risolvere questo problema, scrivi nei commenti.
Widget menu mega verticale jQuery
- un plugin gratuito progettato per creare un menu a discesa verticale nella barra laterale. Il plugin è destinato in generale a WordPress, ma è chiaramente concepito per l'e-commerce e può essere utilizzato non solo con WooCommerce, ma anche con altri plugin di e-commerce.
Ho visto diversi plug-in diversi per creare diversi tipi di menu strutturati della barra laterale a discesa, ma questo plug-in si distingue. La maggior parte di essi crea automaticamente menu basati su post e categorie di blog, in base alla data e al mese. Comodo se hai solo un blog.
Il plugin in questione ti consente di creare assolutamente qualsiasi menu basato su pagine, prodotti, categorie, tag - qualsiasi cosa! Questo è esattamente ciò di cui hai bisogno per un catalogo di prodotti, anche se dovrai armeggiare un po': gli articoli vengono aggiunti manualmente.
Dopo aver scaricato, installato e attivato il plugin, la prima cosa da fare è creare il menu necessario che verrà visualizzato tramite il plugin. Nelle impostazioni del sito, vai alla scheda “Aspetto” -> “Menu” e creane uno nuovo - beh, diciamo “menu2”. Quindi lo compiliamo come vogliamo, creando elementi nidificati. Puoi sperimentare più tardi, la prima cosa è creare almeno qualcosa. Ogni articolo è realizzato manualmente per riferimento. Cioè, se inserisci una pagina di catalogo nel menu, il collegamento al catalogo funzionerà, ma le posizioni del catalogo non appariranno automaticamente nel menu. Per ottenere il massimo effetto, si consiglia di creare voci di menu a tre livelli, quindi il plugin mostrerà le sue migliori prestazioni.
Una volta creato il menu, è necessario fare in modo che il plugin inizi a visualizzarlo. Vai su “Aspetto” -> “Widget”, trova lì il nuovo widget “jQuery Vertical Mega Menu” e posizionalo nel posto giusto sulla barra laterale. Qui puoi frugare un po’ nelle impostazioni, anche se ora la cosa principale è selezionare il nostro menu precreato “menu2” e fare clic su “Salva”. Il menù è stato realizzato ed è visionabile sul sito!
Menù– uno degli elementi più importanti su qualsiasi sito web. È la semplicità e la facilità di navigazione che determina quanto sarà comodo per un visitatore navigare nel sito. Esistono 2 tipi di menu in WordPress: verticale e orizzontale. In questo articolo prenderemo in considerazione le seguenti domande: Come creare? Come aggiungere un menu a un tema che non ne ha uno? Visualizzazione di menu, creazione di pagine nidificate e impostazioni generali in WordPress.
Un menu orizzontale è integrato nella maggior parte dei temi WordPress moderni. Alcuni modelli ti consentono di definire impostazioni di navigazione aggiuntive, mentre altri no. Per impostazione predefinita, tutte le pagine aggiunte verranno visualizzate nel menu.
Molto spesso, gli utenti WP inesperti si chiedono se come creare un menu a discesa multilivello, sia verticale che orizzontale.
I menu a discesa orizzontali o verticali multilivello vengono implementati assegnando una gerarchia di pagine specifica. Di conseguenza, questo può essere fatto nella fase di creazione o durante la modifica delle pagine nella sezione “Pagine” del pannello di amministrazione di WP, dove puoi trovare un blocco con le seguenti impostazioni:
Pertanto, per creare un annidamento multilivello, è necessario assegnare una pagina principale a un'altra pagina.
Per organizzare la struttura mostrata nello screenshot qui sopra, è stato necessario assegnare la pagina madre “Example Page” alle pagine “Sub 1” e “Sub 2”, nonché le pagine “Sub Sub 1” e “Sub Sub 2 " alla pagina principale "Sub 1". Penso che il principio di costruzione sia chiaro.
Come aggiungere il tuo menu orizzontale
Cosa fare se il tema (modello) non supporta la visualizzazione del menu orizzontale?
I casi di assenza di un menu integrato in un tema sono estremamente rari, ma accadono. Ciò è dovuto al fatto che in tali modelli la funzione di visualizzazione del menu semplicemente non è specificata:
Devi solo aggiungere questa riga nella posizione desiderata nel modello, che si tratti di intestazione, piè di pagina o barra laterale, che si trovano nei file Header.php, Footer.php, Sidebar.php del tuo tema. Vale la pena racchiudere immediatamente la funzione nei tag , questi tag html 5 influiscono sull'ottimizzazione del sito e consentiranno anche di assegnare facilmente gli stili per il menu. Cioè, così:
Ho detto che dovrai assegnare gli stili CSS, questo è abbastanza logico, perché gli sviluppatori del tema non lo hanno fatto e per impostazione predefinita non è presente alcun menu. E coloro che hanno problemi con i CSS possono e incontreranno alcune difficoltà. Consiglierei a queste persone di rivolgersi ai motori di ricerca con la richiesta “menu orizzontale” e trovare gli stili adatti al template del sito.
Ad esempio, pubblicherò una versione di un menu multilivello a discesa nero -. Una volta scaricato il file, aprilo, copia il contenuto e incollalo nel file style.css che si trova nella cartella del tema WordPress. Puoi vedere un menu demo.
Menù verticale di WordPress
Abbiamo sistemato il menu orizzontale, ma con il menu verticale a tendina... tutto è molto più semplice, si implementa tramite plugin. Ce ne sono moltissimi, eccone alcuni:
- Widget del menu della fisarmonica jQuery
- Widget menu mega verticale jQuery
- jQuery Esamina il widget del menu dell'iPod
- Widget del menu mega jQuery
Se il menu a discesa non è necessario, tutto il lavoro si riduce al fatto che devi solo utilizzare il widget "Menù personalizzato", avendolo precedentemente creato.
Come creare un menu in WordPress
Creare un menu è molto semplice, devi andare alla scheda “Aspetto” - “Menu”, inserire un nome e fare clic su “Crea”.
Gli sviluppatori WP si sono presi cura dei propri utenti e hanno fatto di tutto per metterli a proprio agio nell'utilizzo del prodotto, quindi non ci saranno commenti inutili. Utilizzando la colonna di sinistra, puoi aggiungere gli elementi necessari al menu. Questi articoli includono:
- Pagine;
- Collegamenti arbitrari;
- Categorie
Dopo aver aggiunto gli elementi al menu, è necessario creare l'annidamento e organizzare tutti i collegamenti. Questo viene fatto in modo molto semplice: trascinando gli elementi, li disponi nell'ordine desiderato e, se devi specificare la pagina principale, devi trascinare l'elemento desiderato sotto l'elemento principale.
Vuoi creare menu complessi e multilivello per il tuo sito web senza perdere tempo? C'è una soluzione. Assemblare e progettare il menu di un sito web è facile utilizzando plugin speciali per WordPress.
I temi WordPress offrono ottime opzioni per sviluppare fantastici siti Web. Tuttavia, i menu di navigazione moderni sono diversi dai menu utilizzati qualche anno fa. Tuttavia, i temi WordPress continuano a fornire menu che funzionano con il concetto del tema.
Questo non è sempre adatto a siti di grandi dimensioni con molte pagine contenenti una varietà di prodotti o servizi.
Speciali plugin di menu per WordPress ti aiuteranno ad aggiungere una navigazione comoda e adattiva al tuo sito.
Menu reattivi WordPress
Il menu di un sito web è uno degli elementi più importanti poiché ti aiuta a navigare tra le pagine. Un menu definisce le scelte presentate agli utenti. Facendo clic sulla voce di menu selezionata, l'utente accede a una pagina Web specifica o esegue un'azione.
Sia dal punto di vista estetico che della navigazione, un menu visivamente accattivante è fondamentale per la progettazione del sito web.
I menu sono disponibili in diversi tipi e idealmente puoi sceglierne uno in base al numero di pagine e al design generale del tuo sito.
Orizzontale vengono visualizzati nella parte superiore della pagina web, con lo spazio rimanente riservato al contenuto principale. È intuitivo, poiché la maggior parte delle persone preferisce leggere il testo in orizzontale.
Verticale usato da solo o in combinazione con un menu orizzontale. Utilizzato principalmente quando il contenuto non può essere posizionato orizzontalmente sull'intera pagina.
Menu a discesa può essere utilizzato sia in orizzontale che in verticale. Separano le voci visibili del menu principale dalle voci del sottomenu che appaiono solo al passaggio del mouse.
Menù mega sono grandi pannelli bidimensionali raggruppati per opzioni di navigazione. Si tratta di un concetto relativamente nuovo che sta guadagnando popolarità perché il menu completo è immediatamente visibile senza doverlo scorrere. È una combinazione di menu semplici e menu a discesa, simili alla barra multifunzione di Microsoft Office.
Plugin del menu WordPress
Oggi ti presenteremo i plugin che ti consentono di creare solo l'ultimo tipo di menu.
WordPress stesso fornisce funzionalità integrate per la creazione di diversi tipi di menu. Tuttavia queste funzioni sono generali e non consentono l'implementazione di mega menu.
Speciali plugin WordPress si integrano con il sistema di menu WordPress esistente e forniscono funzionalità aggiuntive. I plugin ti aiutano a creare mega menu dall'aspetto professionale.
La maggior parte dei plugin dispone di un pannello di amministrazione integrato per aggiungere o modificare voci di menu con uno stile adatto al design del tuo sito. Sono disponibili impostazioni per caratteri, colori, trama di sfondo, icone, ecc. Gli elementi shortcode ti consentono di aggiungere moduli di contatto, immagini, video, mappe di Google e contenuti dinamici al tuo menu.
La maggior parte dei plugin Mega Menu di WordPress sono ottimizzati per funzionare con più dispositivi. Questi plugin includono il supporto per più menu, effetti al passaggio del mouse e altre animazioni.
Max Mega Menu è un plugin completo per la gestione dei menu. Con totale facilità, puoi modificare il menu esistente in uno comodo, completamente accessibile e reattivo. Le opzioni includono impostazioni integrate per la reinstallazione, l'aggiunta di widget, la modifica del comportamento e la conversione di un menu semplice in un mega menu. Questo plugin ha un editor integrato nella sua versione gratuita. Max Mega Menu Pro aggiunge funzionalità come verticale, menu hamburger, menu logo, supporto per i caratteri Google, WooCommerce e supporto EDD.
Questo è un plugin personalizzato per WordPress. L'interfaccia è facile da usare e offre molte opzioni personalizzabili. Varie opzioni di personalizzazione del menu includono tipo di menu, immagine di sfondo, animazione del menu, allineamento e posizionamento del menu, dimensioni dello schermo. Nella versione gratuita, il plug-in fornisce funzionalità come loghi di menu, riordino di componenti inclusi script e trigger di menu personalizzati. Le funzionalità Advanced e Pro forniscono supporto per l'anteprima del progetto, l'animazione delle voci di menu, la barra del titolo integrata, ecc.
Plugin personalizzabile per il menu mobile. Il plugin ti consente di trasformare il tuo menu WordPress esistente in qualcosa di elegante, facile da usare e reattivo. Questo plugin si integra facilmente con il sistema di menu di WordPress e funziona su tutti i tipi di dispositivi mobili. La versione gratuita fornisce un'interfaccia di amministrazione facile da usare. Offre molte opzioni e la possibilità di mostrare categorie, sottocategorie e post. Il plugin fornisce supporto integrato per aggiungere colori, loghi e nascondere determinati elementi sui dispositivi mobili.
Il plug-in Nextend Accordion Menu è intuitivo, personalizzabile e facile da integrare. Il menu Hamburger ti consente di utilizzare diversi livelli di sottomenu. Fornisce il pieno controllo su menu, livelli, colori, effetti di animazione. Può essere utilizzato per creare un "hamburger" da qualsiasi menu WordPress. La versione Lite include un tema. Sono disponibili per l'acquisto 3 temi aggiuntivi con la versione PRO del plugin. L'elenco delle potenti funzionalità include anche il pieno controllo su colori, sfondo, immagini, caratteri. Sono stati inoltre aggiunti più livelli di menu e il supporto integrato per i caratteri Google.
Il plugin Mega Menu di WooRockets è un plugin potente, reattivo e incentrato sull'utente. Fornisce un builder dedicato e intuitivo. Fornisce il controllo completo sulla progettazione e personalizzazione dei menu. Sono supportati l'orientamento del menu e le opzioni di visualizzazione delle icone, l'anteprima in tempo reale e i profili per le impostazioni dei menu. Puoi anche incollare contenuti e incorporare Google Fonts dal pannello Plugin.
I plugin sopra menzionati sono plugin WordPress ben noti e molto apprezzati. Con il loro aiuto, puoi facilmente creare un fantastico menu sul tuo sito web.
Ciao a tutti, oggi voglio raccontarvi come aggiungere un menu in WordPress. Sembrerebbe un compito non difficile, ma ben il 10 - 15% delle domande riguarda specificamente il menu, perché nonostante WordPress abbia una funzione speciale wp_nav_menu- Gli sviluppatori di modelli lavorano costantemente con sciocchezze e lo fanno attraverso un luogo ben noto. Successivamente, ti mostrerò istruzioni dettagliate su come creare un modello di menu.
Ad esempio, ti suggerisco di creare insieme a me un semplice menu WordPress orizzontale a un livello.
Se stavi cercando informazioni sui menu a tendina di WordPress, ti consiglio di prestare attenzione a questi articoli:
Questi articoli descrivono il meccanismo per creare un menu; tutto quello che devi fare è copiare l'html e il CSS dagli esempi e visualizzare un menu per WordPress tramite php come descritto di seguito in questo articolo.
Navigazione della pagina:
Innanzitutto, abbiamo bisogno del codice HTML per il menu, ed è quello che faremo.
Menu orizzontale di WordPress utilizzando HTML+CSS
Non dedicherò molto tempo alla creazione di Html e CSS per il nostro menu. Cercherò di fornire semplicemente parti del codice e una breve descrizione delle stesse.
Il codice HTML per il nostro menù sarà il più semplice:
Questo è l'elenco UL predefinito generato dal menu WordPress.
Anche gli stili per questo menu orizzontale saranno semplici, anche se qui puoi trovare il codice per estendere il menu all'intera larghezza del blocco.
Stili CSS
#nav1( posizione:relativa; larghezza:100%; altezza:62px; sfondo:#0076c6; border-bottom:5px solido #e5eef4; box-sizing:border-box; z-index:11; font-family:Arial, sans-serif; ) #nav1 ul( display:blocco; stile elenco:none; margine:0px; riempimento:0px; allineamento testo:giustificazione; dimensione carattere:1px; altezza linea:1px; larghezza:100%; altezza:57px; ) #nav1 ul::dopo( display:blocco in linea; larghezza:100%; altezza:0px; contenuto:" "; ) #nav1 ul li( display:blocco in linea; larghezza:auto; altezza: auto; font-size:15px; line-height:1.4em; vertical-align:top; ) #nav1 ul li a( display:block; larghezza:auto; altezza:57px; box-sizing:border-box; riempimento: 18px 20px 0px 20px; dimensione carattere:15px; colore:#ffffff; ) #nav1 ul li a:hover( background:#11476C; decorazione testo:none; )
Un menu WordPress orizzontale che si estende per tutta la larghezza del blocco.
Ecco come appare il menu nel browser:
Il codice CSS deve essere copiato nel tuo tema in style.css. Il codice Html può anche essere copiato nella posizione desiderata nel tema, di solito è header.php + dovrai modificare un po' gli stili CSS in modo che il menu abbia l'aspetto che desideri sul sito.
Come aggiungere un modello di menu in WordPress
Spero che tu abbia copiato CSS e HTML nel tuo modello. Ora dobbiamo modificare il nostro codice.
1) Apri il luogo in cui si trova il menu e invece
- casa
- Chi siamo
- Recensioni
- Notizia
- Articoli
- Domanda risposta
- Contatti
Inseriamo la seguente chiamata di funzione WordPress:
"menu1", "contenitore"=>false, "profondità"=>"1", "echo"=>"1")); ?>
Di conseguenza, otterremo qualcosa del genere:
Prestare attenzione al nome “menu1”, proprio con questo identificatore dobbiamo riservare lo spazio per il menu.
"container"=>false – diciamo che non abbiamo bisogno di racchiudere il nostro menu in un contenitore.
"profondità"=>"1" – visualizza solo 1 livello di menu
"echo"=>"1" – il modello di menu viene visualizzato immediatamente. Se specifichi 0, puoi inserire il menu in una variabile.
2) Apriamo il file Functions.php del tuo modello e registriamo lì il nostro menu, ma prima vale la pena verificare se la funzione Register_nav_menus già in uso. Per fare ciò, usa la ricerca Ctrl+F. Se tale funzione non è ancora presente, aggiungi il seguente codice:
"Menu in alto"); ?>
Come hai capito, "menu1" è il nome dell'identificatore; se lo rinomini qui, dovrai rinominarlo nella funzione precedente.
Menu Aggiungi WordPress nell'area di amministrazione
3)
Andiamo al pannello di amministrazione del sito, ora dobbiamo creare e aggiungere un menu in WordPress. Devi andare a questo indirizzo your_site/wp-admin/nav-menus.php 
E creiamo un nuovo menu. L'ho chiamato "Top", fai clic su Crea mi piace sulla mia pelle:
Ora hai una finestra in cui puoi aggiungere voci di menu. Diamo un'occhiata alla skin qui sotto, ho aggiunto un paio di pagine e ho anche selezionato la casella di controllo accanto a "Menu in alto", e questo, come ricordiamo, è il nostro "menu1". 
4) Salva il menu e guarda il risultato. Se hai fatto tutto correttamente, dovresti avere un menu orizzontale WordPress perfettamente funzionante.
Problemi con il menu WordPress
Nella versione WordPress 4.4 sono iniziati terribili problemi con il menu, vale a dire:
- Non ci sono spazi tra le voci del menu;
- il menu non si estende per tutta la larghezza del blocco;
- I separatori vengono aggiunti in modo errato.
In generale, nella nuova versione, gli sviluppatori hanno guidato un po' e hanno deciso di correggere il modello di menu, a seguito del quale su Internet è possibile trovare sempre più domande "Il menu Wordpress 4.4 non funziona", "Problemi con il menu Wordpress" .
Ora vi mostrerò il codice che risolve questo problema:
Dovrebbe essere scritto alla fine del file Functions.php del tuo tema. Utilizzando questo semplice codice è possibile ripristinare il corretto funzionamento del menu.
Questo è tutto per me. In questa lezione ti ho spiegato quanto sia facile aggiungere un menu orizzontale in WordPress e ti ho anche fornito il codice per creare un modello di menu WordPress.
Ti consiglio di leggere l'articolo e ti sarò grato anche se cliccherai sul pulsante di condivisione
