Vai al contenuto principale

Come creare un menu reattivo per WordPress cellulare

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Vuoi creare un menu mobile reattivo sul tuo blog WordPress?

Gli utenti mobili sono più numerosi degli utenti desktop in questi giorni. L'aggiunta di un menu mobile reattivo semplifica la navigazione degli utenti nel tuo sito web.

In questo tutorial, ti mostreremo come creare facilmente un menu reattivo su WordPress.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Come creare un menu wordpress mobile reattivo

Qui sarà una questione di approfondimento mostrandoti sia il metodo con un plugin per principianti che il metodo di codifica per utenti avanzati.

Primo metodo: creare un menu mobile con un plugin WordPress

Questo metodo è più semplice e consigliato ai principianti perché non richiede particolari abilità di codifica.

In questo metodo, creeremo un menu (con un'icona di hamburger) che scorre sullo schermo del cellulare.

Plugin di menu WordPress reattivo

La prima cosa che devi fare è installare e attivare il file Plugin per menu reattivo di WordPress . Per maggiori dettagli, consulta la nostra guida su come installare un plugin per WordPress .

Dopo aver attivato il plug-in, il plug-in aggiungerà un nuovo elemento nel menu, intitolato " responsive Menu ". Facendo clic su di esso si accederà alla pagina delle impostazioni del plugin di WordPress.

Plugin del menu del dashboard reattivo di WordPress

Devi prima inserire la dimensione dalla quale dovrebbe apparire il menu mobile. L'impostazione predefinita è 800 px, che dovrebbe funzionare per la maggior parte dei siti Web.

Dopodiché devi selezionare il menu che vuoi usare sul cellulare.

L'ultima opzione sullo schermo ti consente di fornire una classe CSS per il tuo menu. Ciò consentirà al plugin di nascondere il tuo menu non reattivo su schermi piccoli.

Non dimenticare di fare clic su « Opzioni di aggiornamento Per salvare le tue impostazioni.

Ti consigliamo anche di scoprire il nostro Plugin 10 WordPress per creare menu sul tuo blog

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Ora puoi visitare il tuo sito web e ridimensionare la schermata del browser per vedere il menu reattivo in azione.

Site-in-azione-menu-reattiva-to-mobile

Il plugin « responsive Menu »Offre molte altre opzioni che consentono di modificare il comportamento e l'aspetto del menu reattivo. Puoi esplorare queste opzioni nella pagina delle impostazioni del plug-in e modificarlo secondo necessità.

Metodo 2: come aggiungere manualmente un menu mobile

Uno dei metodi più comuni utilizzati per visualizzare un menu sugli schermi dei dispositivi mobili è utilizzare la leva.

Questo metodo richiede di aggiungere un codice personalizzato ai tuoi file WordPress.

In uno dei nostri tutorial precedenti, ti mostriamo come creare un plugin per WordPress.

Per prima cosa devi aprire un editor di testo come Blocco note e incollare questo codice.

(function () {nav var = document.getElementById ('site-navigation'), button, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Nascondi il pulsante se il menu è mancante o vuoto se (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Ora devi salvare questo file con il nome " Navigation.js Sulla tua scrivania

Quindi devi aprire un client FTP per scaricare questo file nella posizione "/ wp-content / themes / your-theme / js /" sul tuo sito Web WordPress.

Sostituisci l'espressione " your-tema Con il nome della tua attuale cartella del tema WordPress. Se la directory del tuo tema non ha una cartella js, devi crearne una.

Dopo aver caricato il file JavaScript, il passaggio successivo è assicurarsi che il tuo sito Web WordPress carichi i file JavaScript. Dovrai aggiungere il seguente codice al " functions.php Del tuo tema WordPress.

Scopri qualcos'altro Cosa puoi fare con il file Functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', vero.);

Ora dobbiamo aggiungere il menu di navigazione nel nostro tema WordPress. Di solito il menu di navigazione viene aggiunto al file " header.php Del tuo tema WordPress.

Menù 'primary', 'menu_class' => 'nav-menu')); ?>

Partiamo dal presupposto che la posizione del menu definita dal tuo tema WordPress sia chiamata " primario ". Altrimenti, usa la posizione definita dal tuo tema WordPress.

Scopri anche il nostro 5 plugin di WordPress per creare moduli di iscrizione

L'ultimo passaggio consiste nell'aggiungere un po 'di CSS in modo che il nostro menu utilizzi le giuste classi CSS per cambiare quando viene visualizzato sui dispositivi mobili.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

/ * Menu di navigazione * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; text-align: center; } .main-navigation li {margin-top: 24px; margin-top: 1.714285714rem; dimensione del carattere: 12px; dimensione carattere: 0.857142857rem; line-height: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS da utilizzare su dispositivi mobili @media screen e (larghezza minima: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; bordo superiore: 1px solido #ededed; display: inline-block! important; text-align: sinistra; larghezza: 100%; } .main-navigation ul {margin: 0; rientro testo: 0; } .main-navigation li a, .main-navigation li {display: inline-block; testo-decorazione: nessuno; } .main-navigation li a {border-bottom: 0; colore: # 6a6a6a; line-height: 3.692307692; text-transform: maiuscolo; spazio bianco: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {margin: 0 40px 0 0; margine: 0 2.857142857rem 0 0; posizione: relativa; } .main-navigation li ul {margin: 0; imbottitura: 0; posizione: assoluta; i primi 100%; z-index: 1; altezza: 1px; larghezza: 1px; overflow: nascosto; clip: rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; sinistra: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; clip: eredita; overflow: inherit; altezza: eredita; larghezza: eredita; } .main-navigation li ul li a {background: #efefef; bordo inferiore: 1px solido #ededed; blocco di visualizzazione; dimensione del carattere: 11px; dimensione del carattere: 0.785714286rem; line-height: 2.181818182; imbottitura: 8px 10px; imbottitura: 0.571428571rem 0.714285714rem; larghezza: 180px; larghezza: 12.85714286rem; spazio bianco: normale; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; colore: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; spessore del carattere: grassetto; } .menu-toggle {display: nessuno; }}

Ora puoi visitare il tuo sito web e ridimensionare la schermata del browser per vedere se il tuo menu reattivo si attiva.

Rocking-menu-wordpress dimostrativi

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. UberMenu

UberMenu è un plugin per WordPress dedicato alla creazione di un megamenu altamente personalizzabile, reattivo e accessibile agli utenti. È funzionale dopo l'installazione, senza la necessità di configurazioni speciali.

Plugin per mega menu di Ubermenu wordpress

È un plug-in facile da usare, ma abbastanza potente da creare layout di menu mega altamente personalizzabili e creativi.

Vedi anche il nostro 9 plugin di WordPress per creare griglie di prezzo su un blog

Troverai tra gli altri: 3 modelli di menu, layout completamente reattivo, compatibilità con dispositivi mobili (iPhone, iPad, Android), supporto touch, ecc ...

Download | Demo | Web hosting

2. LMM

Liquida Mega Menu chiamato anche LMM è un plugin per WordPress progettato per utenti e sviluppatori. Ha un'interfaccia semplice ed intuitiva, integrata con la dashboard di WP, che consente di creare e personalizzare una quantità illimitata di mega menu, senza alcuna competenza di programmazione.

Mega menu responsive wordpress lmm basato su bootstrap

Viene fornito con dozzine di funzionalità, sia per utenti regolari che avanzati. Come funzionalità, offre tra l'altro: integrazione automatica e manuale, supporto per multisito, prendersi cura dei temi dei bambini, stile completamente personalizzabile per menu, posizioni di menu personalizzabili, menu fisso, ecc.

Download | Demo | Web hosting

3. Menu Fly 8Degree

8Degree Fly Menu è un plugin WordPress premium che ti consente di aggiungere un menu canvas al tuo sito web, in modo da dargli un aspetto che evidenzi e facilmente le tue informazioni. Utilizza la funzione di menu predefinita di WordPress per creare i suoi menu.

8degree fly menu reattivo off plug-in menu per wordpress

Sarai in grado di aggiungere ulteriori elementi alle voci di menu predefinite, come icone, slogan di menu, un'intestazione pseudo-raggruppante e una descrizione lunga.

Leggi anche: 10 plugin di WordPress per ottimizzare barre laterali e intestazioni adesive

Inoltre viene fornito con un editor WYSIWYG per aiutarti a cogliere la tua lunga descrizione in modo intuitivo e con questo editor puoi anche usare gli shortcode.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Download | Demo | Web hosting

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di creare un menu per gli utenti mobili. Non esitate a condividi il suggerimento con i tuoi amici sui tuoi social network.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Ma, nel frattempo, parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

...

Questo articolo contiene i commenti 2

  1. ciao

    grazie per la tua informazione

    Non riesco a trovare "una classe CSS per il tuo menu". ho trovato il foglio di stile CSS ma non so cosa copiare e incollare

    Grazie in anticipo per il vostro aiuto

    buon fine settimana

    michel

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
5 azioni
quota4
Tweet
Enregistrer1