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>:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.min.js"></script>

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:

<?php wp_enqueue_script('jquery'); ?>

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

<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>

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.

<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 -->

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

0saves
Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.