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 600.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?

Al giorno d'oggi gli utenti mobili sono più numerosi degli utenti desktop. L'aggiunta di un menu reattivo per dispositivi mobili semplifica la navigazione del tuo sito Web da parte degli utenti.

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.

Questo approfondirà mostrando sia il metodo con un plugin per principianti sia il metodo di codifica per utenti esperti.

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.

dimostrazione di menu-hosts

La prima cosa che devi fare è installare e attivare il file Plugin del 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 ". Cliccandoci sopra si accederà alla pagina delle impostazioni del plugin.

menù reattivo, wordpress

Devi prima inserire la dimensione dalla quale apparirà il menu mobile. Il valore predefinito è 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 plug-in di nascondere il menu non responsive su schermi più 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

Inizia a promuovere il tuo blog

Scarica decine di loghi, banner, modelli di siti Web e molti altri strumenti di marketing per commercializzare il tuo blog WordPress. [Consigliato]

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 ti consentono di modificare il comportamento e l'aspetto del tuo menu reattivo. Puoi esplorare queste opzioni nella pagina delle impostazioni del plug-in e modificarle secondo necessità.

Metodo 2: come aggiungere manualmente un menu mobile

Uno dei metodi più comunemente usati per visualizzare un menu su schermi mobili è usare 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.

Devi prima 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 cartella del tuo attuale tema WordPress. Se la tua directory dei temi non ha una cartella js, devi crearne una.

Dopo aver scaricato il file JavaScript, il passaggio successivo è assicurarsi che il sito Web WordPress carichi i file JavaScript. Sarà necessario aggiungere il seguente codice al file 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.

<nav id = "site-navigation" class = "main-navigation" role = "navigation"> <button class = "menu-toggle"> Menu </ button> <? php wp_nav_menu (array ('theme_location' => ' primary ',' menu_class '=>' nav-menu ')); ?> </ nav>

Partiamo dal presupposto che la posizione del menu definita dal tema WordPress si chiama " primario ". In caso contrario, utilizzare la posizione definita dal tema WordPress.

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

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

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

Ora puoi visitare il tuo sito Web e ridimensionare la schermata del browser per vedere se il tuo menu reattivo sta girando.

Rocking-menu-wordpress dimostrativi

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]

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 alcuna configurazione speciale.

È un plug-in facile da usare, ma abbastanza potente da creare configurazioni mega-menu altamente personalizzabili e creative.

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

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

Download | Demo | Web hosting

2. LMM

Liquida Mega Menu ancora chiamato LMM è un plugin per WordPress progettato per utenti e sviluppatori. Ha un'interfaccia semplice e intuitiva, integrata nella dashboard del WP, che consente di creare e personalizzare un numero illimitato di mega menu, senza alcuna capacità di programmazione.

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, lo stile completamente personalizzabile per i menu, le posizioni dei menu personalizzabili, il menu appiccicoso, ecc.

Download | Demo | Web hosting

3. Menu Fly 8Degree

8Degree Fly Menu è un plugin WordPress premium che ti consente di aggiungere un menu canvas sul tuo sito Web, per dargli un aspetto che evidenzia e semplifica le tue informazioni. Utilizza la funzione di menu WordPress predefinita per creare i suoi menu.

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.

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]

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 esitare condividi il consiglio 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 intanto 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