Come aggiungere un menu del pannello di diapositiva nei temi di WordPress

Recentemente uno dei nostri utenti ci ha chiesto come possono sostituire il menu di navigazione con un menu del pannello scorrevole jQuery? Il menu del pannello scorrevole può essere utilizzato per migliorare notevolmente l'esperienza utente sui siti mobili. In questo articolo ti mostreremo come aggiungere un menu del pannello scorrevole in temi WordPress.

Nota: questo è un tutorial di livello intermedio e richiede conoscenze HTML e CSS sufficienti.

Sostituzione del menu predefinito con un menu del pannello scorrevole in WordPress

L'obiettivo qui è mostrare un menu del pannello scorrevole agli utenti su schermi più piccoli mantenendo il menu predefinito del nostro tema in modo che gli utenti su laptop e desktop possano vedere il menu completo. Prima di iniziare, è importante sapere che ci sono molti diversi temi per WordPress, e in seguito dovrai affrontare un piccolo CSS.

La prima cosa che devi fare è aprire un editor di testo in chiaro sul tuo computer, come Blocco note, e creare un nuovo file. Copia e incolla questo codice:

 (function ($) $ ('# toggle'). toggle (function () $ ('# popout'). animate (left: 0, 'slow', function () $ ('# toggle' ) .html (''); ); , function () $ ('# popout'). animate (left: -250, 'slow', function () $ ('# toggle'). html (''); ); ); ) (JQuery); 

Sostituire example.com con il tuo nome di dominio, e anche sostituire your-tema con la tua directory tematica reale. Salva questo file come slidepanel.js sul desktop. Questo codice utilizza jQuery per attivare o disattivare un menu del pannello di diapositive. Inoltre, anima l'effetto Toggle.

Apri un client FTP come Filezilla e connettiti al tuo sito web. Quindi, vai alla tua directory dei temi e se ha una cartella js, aprila. Se la tua directory tematica non ha una cartella js, devi crearne una e caricare il file slidepanel.js nella cartella js.

Il prossimo passo è la progettazione o la ricerca di un'icona di menu. L'icona del menu più comunemente usata è quella con tre linee. Puoi crearne uno usando Photoshop o trovare una delle tante immagini esistenti da google. Per questo tutorial usiamo l'icona del menu 27x23px. Dopo aver creato o trovato l'icona del menu, rinominarlo in menu.png e caricarlo nella cartella delle immagini nella directory dei temi.

Il prossimo passo è quello di accodare il file javascript per il pannello slide in WordPress. Fondamentalmente basta copiare e incollare questo codice nel tuo tema functions.php file.

 wp_enqueue_script ('wpb_slidepanel', get_template_directory_uri (). '/js/slidepanel.js', array ('jquery'), '20131010', vero); 

Ora che tutto è impostato, è necessario modificare il menu predefinito del tema. Solitamente, la maggior parte dei temi mostra i menu di navigazione in tema header.php file. Aperto header.php file e trova la linea simile a questa:

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

L'obiettivo qui è quello di avvolgere il menu di navigazione del tema con il codice HTML per visualizzare il menu del pannello scorrevole su schermi più piccoli. Lo avvolgeremo in a e . Come questo:

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

Sostituisci esempio.com con il tuo nome di dominio e il tuo tema con la tua directory dei temi. Salva le tue modifiche.

L'ultimo passaggio consiste nell'utilizzare i CSS per nascondere l'icona del menu per gli utenti con schermi più grandi e visualizzarli agli utenti con schermi più piccoli. Abbiamo anche bisogno di regolare la posizione dell'icona del menu e l'aspetto del pannello scorrevole. Copia e incolla questo CSS sul foglio di stile del tuo tema.

 @media screen e (min-width: 769px) #toggle display: none;  @media screen e (max-width: 768px) #popout position: fixed; altezza: 100%; larghezza: 250 px; sfondo: rgb (25, 25, 25); sfondo: rgba (25, 25, 25, .9); colore bianco; inizio: 0px; a sinistra: -250px; overflow: auto;  #toggle float: right; posizione: fissa; In alto: 60px; a destra: 45 px; larghezza: 28 px; altezza: 24px;  .nav-menu li border-bottom: 1px solid #eee; padding: 20px; width: 100%;  .nav-menu li: hover background: #CCC;  .nav-menu li a color: #FFF; text-decoration: none; width: 100%;  

Ricorda che il menu di navigazione del tuo tema potrebbe utilizzare diverse classi CSS e potrebbero entrare in conflitto con questo stile CSS. Tuttavia, puoi risolvere questi problemi utilizzando lo strumento Chrome Inspector per scoprire quali classi css sono in conflitto all'interno del foglio di stile. Gioca con il CSS per adattarlo al tuo stile e alle tue esigenze.

Speriamo che questo tutorial ti abbia aiutato ad aggiungere un menu del pannello scorrevole in WordPress usando jQuery. Per feedback e domande si prega di lasciare un commento qui sotto e non dimenticare di seguirci su Google+