Vuoi creare un menu responsive 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 Quanti plugin installare su WordPress. et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

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.

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 ". Cliccandoci sopra si accede alla pagina delle impostazioni del WordPress Plugin.

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

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

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 cartella del tuo tema WordPress attuale. 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 »Dei tuoi 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 nella sezione “ 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 tuo tema WordPress si chiami " primario ". Altrimenti, usa la posizione definita dal tuo tema WordPress.

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.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 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 to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #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;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

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

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

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

1. UberMenu

UberMenu è un WordPress Plugin dedicato alla creazione di un megamenu altamente personalizzabile, reattivo e accessibile all'utente. È funzionante dopo la sua installazione, senza la necessità di alcuna configurazione particolare.

È 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 file WordPress Plugin progettato per utenti e sviluppatori. Ha un'interfaccia semplice e intuitiva, integrata nella dashboard di WP, che ti consente di creare e personalizzare una quantità illimitata di mega menu, senza alcuna competenza 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, stile completamente personalizzabile per i menu, posizioni dei menu personalizzabili, menu permanenti, 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.

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.

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.

• Come rinominare le immagini su un blog WordPress
• Come creare un menu mobile su WordPress
• Plugin 8 WordPress per creare un megamenu sul tuo blog
• Alcuni consigli per creare menu moderni per il tuo blog
• Plugin 6 WordPress per gestire categorie e sottocategorie sul tuo blog

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di creare un menu per gli utenti mobili. sentiti libero di 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.

...