Tema WordPress, come personalizzare il menu.

Nella seguente guida ti spiegherò come personalizzare il menu di un template WordPress, in particolare come aggiungere delle icone alle voci del menu e come creare un popup collegato al menu (ad esempio per visualizzare un modulo di login)

Template WordPress, come aggiungere delle icone

Aggiungere un’icona ad una singola voce del menu è abbastanza semplice. Nel caso tu non lo sapessi, WordPress permette di associare una classe css personalizzata al pulsante.

Vai in Aspetto -> Menu ed apri uno dei qualsiasi elementi che compongono il menu, troverai un campo chiamato “Classi CSS (opzionale)“, se così non fosse devi attivarlo dal box in alto “Impostazioni schermo”

Spunta la voce “Classi CSS” e “Relazioni tra link” (quest’ultimo servirà per la seconda parte dell’articolo)

A questo punto puoi finalmente aggiungere la classe css “nav-home” alla voce di menu “Home“, fai la stessa procedura anche con le altre presenti, dandogli dei nomi a scelta

Ora devi creare le classi css appena impostate nel foglio di stile. Per fare questo hai due possibilità, intervenire sul codice del template oppure creare un piccolo plugin così da poter riutilizzare il codice appena scritto anche con altri temi WordPress.

Nel secondo caso devi creare una cartella in wp-content -> plugins -> nomedelplugin, in questo caso wp_menu e aggiungere le seguenti sottocartelle css,images,js e un file chiamato core.php

Apri il file core.php ed aggiungi l’intestazione del plugin:

/*
Plugin Name: WIP Custom Menu
Description: Grazie a questo widget potrai modificare il tuo menu.
Version: 1.0
License: GPL 2.0
Author: WPinProgress
*/

Successivamente crea una funzione che verrà agganciata a wp_head, tramite hook.

add_action('wp_head', 'wip_custom_menu');
function wip_custom_menu() { 
}

Al suo interno aggiungi:

<style type="text/css">
.nav-home {background: url(<?php echo plugins_url().'/wip_menu/images/icons/home.png'; ?>) no-repeat top center;padding-top:25px }
</style>

È necessario ovviamente aggiungere le icone necessarie, per tenere in ordine il tutto puoi creare un’ulteriore cartella in images, chiamata icons in cui salvare le icone.

Continuando ad aggiungere classi css alle voci di menu, devi ovviamente aggiornare il codice css all’interno della funzione wip_custom_menu.

Terminato il tutto ricordiamoci di attivare il plugin.

Alla fine dovresti ottenere un risultato simile.

Per integrare il tutto all’interno del tema, avresti dovuto aggiungere il codice css nel foglio di stile principale del tema, style.css ed inserire le icone nella cartella images del tema.
Ecco un piccolo esempio:

.nav-home {background: url(images/icons/home.png'; ?>) no-repeat top center;padding-top:25px }

Template WordPress, come aggiungere un popup al menu.

Grazie al plugin jQuery PrettyPhoto , puoi aggiungere delle finestre oppure aprire immagini, video ed altro tramite popup.

Puoi scaricare il plugin nel sito ufficiale. Successivamente copia i seguenti file:

• prettyphoto.css presente nella cartella css del plugin nella cartella css del plugin WordPress.
• la cartella prettyPhoto presente nella cartella images del plugin nella cartella images del plugin WordPress.
• jquery.prettyPhoto presente nella cartella js del plugin nella cartella js del plugin WordPress.
• sempre nella cartella js aggiungi un ultimo file, chiamato jquery.code.js.

Fatto ciò torna in core.php e scrivi:

add_action('wp_footer', 'wip_custom_footer');
function wip_custom_footer() { 
?>
<div id="ilmiopopup" style="display:none">
<h2>Titolo</h2>
<p>Testo</p>
</div>

<?php }

È importante che ti ricordi l’ID scelto per il box, perché verrà utilizzato da PrettyPhoto come riferimento del box da visualizzare, in questo caso ilmiopopup.
Mentre il contenuto sarà a nostra scelta, in alternativa è anche possibile aggiungere il box direttamente nel file header.php oppure footer.php del tema, rendendo inutile la creazione della classe wip_custom_footer.

Puoi integrare file javascript ed il foglio di stile, utilizzando le apposite funzioni di WordPress, collegate alla funzione wip_custom_menu

wp_enqueue_style( "prettyPhoto", plugins_url()."/wip_menu/css/prettyPhoto.css");
wp_enqueue_script('jquery.prettyPhoto',plugins_url().
'/wip_menu/js/jquery.prettyPhoto.js',array('jquery'),"1.0.0");
wp_enqueue_script( 'jquery.code', plugins_url().'/wip_menu/js/jquery.code.js',array('jquery'),"1.0.0" ); 

Per visualizzare il form di login, puoi utilizzare la funzione WordPress wp_login_form

Per ultimo devi aggiungere queste righe di codice, per il corretto funzionamento di PrettyPhoto, nel file jquery.code.js

jQuery(document).ready(function(){
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed:'fast',
slideshow:5000,
theme:'pp_default',
show_title:false,
overlay_gallery: false,
social_tools: false
});
}); 

Nella pagina ufficiale del plugin puoi trovare tutte le informazioni su come configurare PrettyPhoto.

Adesso torna in Aspetto -> Menu, apri la voce di menu che vuoi collegare al popup ed aggiungi #nomeidbox nel campo url, in questo caso #ilmiopopup e prettyphoto nell’opzione Relazione tra link

Se hai fatto tutto correttamente, cliccando sulla voce di menu appena modificata, si aprirà un popup con il contenuto al suo interno.

È tutto, se hai domande o dubbi lascia pure un commento 🙂