La versatilità di WordPress può essere utilizzata per gestire aspetti differenti di un sito web; può capitare di avere bisogno di far visualizzare un particolare div solo al click di un elemento, e se questo div si presenterà con l’effetto che in gergo si chiama toogle sarà anche bello da vedere.

Per capire le differenti possibilità che l’effetto toogle permette potete visionare la pagina dedicata alle API di jQuery.

Per utilizzare questo particolare effetto su WordPress dobbiamo innanzitutto essere sicuri che la piattaforma richiami correttamente i file; per fare ciò apriamo il file header.php contenuto nella cartella del nostro tema di riferimento e scriviamo il seguente codice immediatamente dopo il richiamo dei CSS e prima della chiusura del tag </head>:

[code lang=”html”]<script type="text/javascript" src="<?php bloginfo(‘template_directory’); ?>/js/jquery-1.2.6.min.js"></script>[/code]

Fatto questo dovete scorrere il contenuto del file sino a giungere alla stringa <?php wp_head(); ?> . Appena la trovate incollate immediatamente prima di questa il seguente codice:

[code lang=”php”]<?php wp_enqueue_script(‘jquery’); ?>[/code]

e subito dopo la stringa <?php wp_head(); ?> incollate questo:

[code lang=”javascript”]
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(‘#toggle-div’).hide();
jQuery(‘a#slick-slidetoggle’).click(function() {
jQuery(‘#toggle-div’).slideToggle(600);
return false;
});
});
</script>
[/code]

Queste poche righe servono al nostro scopo; infatti la riga jQuery(‘#toggle-div’).hide(); impone che il div denominato toggle-div dovrà diventare visibile quando si effettuerà un click su un link con id slick-slidetoggle, come spiegato nella stringa jQuery(‘a#slick-slidetoggle’).click(function() { e inoltre con jQuery(‘#toggle-div’).slideToggle(600); decidiamo anche la velocità di “scivolata” della slide.

Adesso che è tutto più chiaro potete tranquillamente richiamare il vostro codice all’interno di un qualsiasi post di WordPress, ovviamente entrando nella visualizzazione HTML. Un’idea di quello che può essere l’effetto ricercato l’avete copiando e utilizzando questo semplice codice.

[code lang=”html”]<h3><a id="slick-slidetoggle" href="#">Slide-toogle per WordPress</a></h3>
<div id="toggle-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec nibh erat, a consectetur nisl. Nunc iaculis congue quam, nec vestibulum quam venenatis non.</div><!– end #toogle-div –>[/code]

Ovviamente nessuno vi vieta di controllare l’aspetto estetico e di presentazione del div toggle-div tramite l’impiego di CSS ad hoc.