Come creare un menu WordPress reattivo per dispositivi mobili

Vuoi creare un menu WordPress reattivo per dispositivi mobili? Gli utenti mobili hanno già superato gli utenti desktop per molti siti Web. L’aggiunta di un menu responsive mobile semplifica la navigazione del tuo sito Web da parte degli utenti. In questo articolo, ti mostreremo come creare facilmente un menu WordPress reattivo per dispositivi mobili.


Crea menu WordPress per dispositivi mobili

Questo è un tutorial approfondito. Mostreremo sia il metodo di plugin per principianti (senza codifica) sia il metodo di codifica per i nostri utenti più avanzati.

Entro la fine di questo tutorial, imparerai come creare un menu mobile slide-in, un menu a discesa mobile e un menu mobile attiva / disattiva.

Pronto? Iniziamo.

Tutorial video

Iscriviti a WPBeginner

Se non ti piace il video o hai bisogno di ulteriori istruzioni, continua a leggere.

Metodo 1: aggiungi un menu reattivo in WordPress usando un plugin

Questo metodo è più semplice e consigliato ai principianti in quanto non richiede codifica personalizzata.

Con questo metodo, creeremo un menu di hamburger che scorre sullo schermo del cellulare.

Demo del plug-in del menu reattivo

La prima cosa che devi fare è installare e attivare il plug-in Menu Responsive. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l’attivazione, il plug-in aggiungerà una nuova voce di menu denominata “Menu reattivo” alla barra di amministrazione di WordPress. Cliccandoci sopra si accederà alla pagina delle impostazioni del plugin.

Impostazioni del menu reattivo

Per prima cosa devi inserire la larghezza dello schermo a quel punto il plugin inizierà a mostrare il menu reattivo. Il valore predefinito è 800 px che dovrebbe funzionare per la maggior parte dei siti Web.

Successivamente, è necessario selezionare il menu che si desidera utilizzare per il menu reattivo. Se non hai ancora creato un menu, puoi crearne uno visitando Aspetto »Menu. Consulta la nostra guida su come aggiungere il menu di navigazione in WordPress per istruzioni dettagliate.

L’ultima opzione sullo schermo è quella di fornire una classe CSS per il tuo attuale menu non responsive. Ciò consentirà al plug-in di nascondere il menu non responsive su schermi più piccoli.

Non dimenticare di fare clic sul pulsante “Opzioni di aggiornamento” per memorizzare le tue impostazioni.

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

Demo del plug-in del menu reattivo

Il plug-in del menu reattivo include 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 modificarle in base alle esigenze.

Metodo 2: Aggiungi un menu a discesa Seleziona menu usando un plugin

Un altro modo per aggiungere un menu reattivo è aggiungendo un menu di selezione a discesa. Questo metodo non richiede alcuna abilità di programmazione, quindi è consigliato ai principianti.

Menu di selezione reattivo

La prima cosa che devi fare è installare e attivare il plug-in Responsive Select Menu. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l’attivazione, è necessario visitare Aspetto »Selezione reattiva per configurare le impostazioni del plugin.

Seleziona le impostazioni del menu

Devi scorrere verso il basso fino alla sezione “Attiva posizioni dei temi”. Per impostazione predefinita, il plug-in è attivato su tutte le posizioni dei temi. Puoi modificarlo attivandolo selettivamente per posizioni tematiche specifiche.

Non dimenticare di fare clic sul pulsante Salva tutte le impostazioni per memorizzare le modifiche.

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

Metodo 3: Creazione di un menu reattivo ottimizzato per dispositivi mobili con effetto Attiva / Disattiva

Uno dei metodi più comuni utilizzati per visualizzare un menu su schermi mobili è utilizzando l’effetto di attivazione / disattivazione.

Questo metodo richiede di aggiungere un codice personalizzato ai tuoi file WordPress. Se non l’hai mai fatto prima, dai un’occhiata alla nostra guida su come incollare frammenti dal Web in WordPress.

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

( funzione() {
var nav = document.getElementById (‘site-navigation’), pulsante, menu;
if (! nav) {
ritorno;
}

button = nav.getElementsByTagName (‘button’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
if (pulsante!) {
ritorno;
}

// Pulsante Nascondi se il menu è mancante o vuoto.
if (! menu ||! menu.childNodes.length) {
button.style.display = ‘none’;
ritorno;
}

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’, ”);
} altro {
button.className + = ‘toggled-on’;
menu.className + = ‘toggled-on’;
}
};
}) (jQuery);

Ora devi salvare questo file come navigation.js sul desktop.

Successivamente, devi aprire un client FTP per caricare questo file nella cartella / wp-content / themes / your-theme-dir / js / sul tuo sito WordPress.

Sostituisci la directory del tuo tema con la directory del tuo tema attuale. Se la tua directory dei temi non ha una cartella js, devi crearla.

Dopo aver caricato il file JavaScript, il passaggio successivo è assicurarsi che il sito WordPress carichi questo JavaScript. Dovrai aggiungere il seguente codice al file Functions.php del tuo tema.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, true);

Ora dobbiamo aggiungere il menu di navigazione nel nostro tema WordPress. Di solito il menu di navigazione viene aggiunto nel file header.php di un tema.

Menù
<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘menu di navigazione’)); ?>

Supponiamo che la posizione del tema definita dal tema sia chiamata primaria. In caso contrario, utilizzare la posizione del tema definita dal tema WordPress.

Il passaggio finale consiste nell’aggiungere CSS in modo che il nostro menu utilizzi le classi CSS giuste per attivare o disattivare la visualizzazione su dispositivi mobili.

/* Menu di navigazione */
.main-navigation {
margine superiore: 24px;
margine superiore: 1.714285714rem;
text-align: center;
}
.main-navigation li {
margine superiore: 24px;
margine superiore: 1.714285714rem;
dimensione carattere: 12px;
dimensione carattere: 0,857142857rem;
altezza della linea: 1.42857143;
}
.main-navigation a {
colore: # 5e5e5e;
}
.navigazione principale a: hover,
.main-navigation a: focus {
colore: # 21759b;
}
.menu di navigazione principale ul.nav,
.menu di navigazione principale div.nav > ul {
display: nessuno;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: blocco in linea;
}

// CSS da utilizzare su dispositivi mobili

schermo @media e (larghezza minima: 600px) {

.menu di navigazione principale ul.nav,
.menu di navigazione principale div.nav > ul {
bordo inferiore: 1px solido #ededed;
bordo superiore: 1px solido #ededed;
display: inline-block! important;
text-align: left;
larghezza: 100%;
}
.main-navigation ul {
margine: 0;
trattino: 0;
}
.navigazione principale li a,
.main-navigation li {
display: blocco in linea;
decorazione del testo: nessuna;
}
.main-navigation li a {
bordo inferiore: 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 {
colore: # 000;
}
.main-navigation li {
margine: 0 40px 0 0;
margine: 0 2.857142857rem 0 0;
posizione: relativa;
}
.main-navigation li ul {
margine: 0;
imbottitura: 0;
posizione: assoluta;
i primi 100%;
indice z: 1;
altezza: 1px;
larghezza: 1px;
troppo pieno: nascosto;
clip: rect (1px, 1px, 1px, 1px);
}
.main-navigation li ul ul {
in alto: 0;
sinistra: 100%;
}
.main-navigation ul li: hover > ul,
.main-navigation ul li: focus > ul,
.main-navigation .focus > ul {
bordo-sinistra: 0;
clip: ereditare;
overflow: ereditare;
altezza: eredita;
larghezza: eredita;
}
.main-navigation li ul li a {
sfondo: #efefef;
bordo inferiore: 1px solido #ededed;
blocco di visualizzazione;
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 ul li a: hover,
.main-navigation li ul li a: focus {
sfondo: # e3e3e3;
colore: # 444;
}
.main-navigation .current-menu-item > un’,
.main-navigation .current-menu-antenato > un’,
.main-navigation .current_page_item > un’,
.main-navigation .current_page_ancestor > un {
colore: # 636363;
peso carattere: grassetto;
}
.menu-toggle {
display: nessuno;
}

}

Ora puoi visitare il tuo sito Web e ridimensionare la schermata del browser per vedere il tuo menu di attivazione / disattivazione in azione.

Attiva / disattiva l'anteprima del menu

Risoluzione dei problemi: A seconda del tema WordPress potrebbe essere necessario modificare il CSS. Usa lo strumento inspect element per capire i conflitti CSS con il tuo tema.

Metodo 4: aggiungere un menu mobile slide-in in WordPress

Un’altra tecnica comune per aggiungere un menu mobile è utilizzando un menu del pannello scorrevole (come mostrato nel Metodo 1).

Il metodo 4 richiede l’aggiunta di codice ai file del tema di WordPress ed è solo un modo diverso di ottenere gli stessi risultati del metodo 1.

Innanzitutto, devi aprire un editor di testo semplice come Blocco note e aggiungere il seguente codice a un file di testo vuoto.

(funzione ($) {
$ ( ‘# Ginocchiera’). Ginocchiera (
funzione() {
$ (‘# popout’). animate ({left: 0}, ‘slow’, function () {
$ ( ‘# Ginocchiera’). Html (‘vicino‘);
});
},
funzione() {
$ (‘# popout’). animate ({left: -250}, ‘slow’, function () {
$ ( ‘# Ginocchiera’). Html (‘vicino‘);
});
}
);
}) (JQuery);

Non dimenticare di sostituire example.com con il tuo nome di dominio e il tuo tema con la directory dei temi attuale. Salvare questo file come slidepanel.js sul desktop.

Ora avrai bisogno di un’immagine che verrà utilizzata come icona di menu. L’icona di un hamburger è comunemente usata come icona del menu. Troverai tonnellate di tali immagini da diversi siti Web. Utilizzeremo l’icona del menu dalla libreria Icone materiali di Google.

Una volta trovata un’immagine che desideri utilizzare, salvala come menu.png.

Successivamente, devi aprire un client client FTP e caricare il file slidepanel.js nella cartella / wp-content / your-theme / js /.

Se la tua directory dei temi non ha la cartella JS, devi creare tit e quindi caricare il tuo file.

Successivamente, è necessario caricare il file menu.png nella cartella / wp-content / themes / your-theme / images /.

Una volta caricati i file, dobbiamo assicurarci che il tuo tema carichi il file JavaScript che hai appena aggiunto. Raggiungeremo questo obiettivo accodando il file JavaScript.

Aggiungi questo codice al file Functions.php del tuo tema.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20160909’, true);

Ora dobbiamo aggiungere il codice effettivo nel file header.php del tuo tema per visualizzare il menu di navigazione. Dovresti cercare un codice simile a questo:

<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘menu di navigazione’)); ?>

Si desidera avvolgere il menu di navigazione esistente con il codice HTML per visualizzare il menu del pannello diapositive su schermi più piccoli.

Mostrare

<?php wp_nav_menu (array (‘theme_location’ => ‘primary’, ‘menu_class’ => ‘menu di navigazione’)); ?>

Nota che il menu di navigazione del tuo tema è ancora lì. Lo abbiamo appena racchiuso nell’HTML per cui dobbiamo attivare il menu del pannello scorrevole.

L’ultimo passo è aggiungere CSS per nascondere l’icona dell’immagine del menu su schermi più grandi. Sarà inoltre necessario regolare la posizione dell’icona del menu.

Ecco un CSS di esempio che puoi utilizzare come punto di partenza:

schermo @media e (larghezza minima: 769px) {
#toggle {
display: none;
}

}

@media schermo e (larghezza massima: 768px) {
#saltare fuori {
posizione: fissa;
altezza: 100%;
larghezza: 250px;
sfondo: rgb (25, 25, 25);
sfondo: rgba (25, 25, 25, .9);
colore bianco;
in alto: 0px;
a sinistra: -250px;
overflow: auto;
}

#toggle {
galleggiante: a destra;
posizione: fissa;
sopra: 60px;
a destra: 45px;
larghezza: 28px;
altezza: 24px;

}

.menu di navigazione li {
bordo inferiore: 1px solido #eee;
padding: 20px;
width: 100%;
}

.menu di navigazione li: hover {
sfondo: #ccc;
}

.menu di navigazione li a {
colore: #FFF;
text-decoration: none;
width: 100%;
}
}

A seconda del tema di WordPress, potrebbe essere necessario modificare il CSS per evitare conflitti.

Ecco come appariva sul nostro sito Web demo:

Menu a scorrimento reattivo in WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come creare un menu WordPress reattivo per dispositivi mobili. Puoi anche consultare la nostra guida su come aggiungere un menu reattivo a schermo intero in WordPress

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map