Includere jQuery in WordPressPenserete che sono fissato con questi shortcode ma li trovo molto utili in diverse circostanze. Oggi li useremo per creare una pagina per le vostre FAQ implementando un effetto Toggle (slide verticale) indipendente per ogni citazione e visualizzabile al click del mouse. Per far questo oltre che degli shortcode useremo jQuery e qualche stringa di codice CSS.

Creiamo il nostro shortcode

Prima di tutto andremo ad aggiungere al file functions.php il codice per implementare successivamente il nostro shortcode nell’editor di WordPress, apri quindi il file ed aggiungi il codice che segue:

//Toggle
function toggle_shortcode( $atts, $content = null )
{
extract( shortcode_atts(
array(
'title' => 'Click per aprire',
'color' => ''
),
$atts ) );
return '</pre>
<h3 class="trigger toggle-'. $color .'"><a href="#">'. $title .'</a></h3>
<div class="toggle_container">' . do_shortcode($content) . '</div>
<pre>';
}
add_shortcode('toggle', 'toggle_shortcode');

come puoi vedere nel codice abbiamo 2 opzioni che successivamente andremo a sfruttare nello shortcode e sono titolo e colore…di questo ve ne darò spiegazione alla fine del tutorial.

La funzione jQuery

Come detto in precedenza questo script fa uso delle librerie jQuery che di norma sono già implementate di default in WordPress e molto spesso nello stesso tema che stiamo usando. Se ciò non fosse ti invito a leggere l’articolo Come includere jQuery in WordPress. A questo punto andiamo ad aggiungere nell’header il seguente codice:

<script type="text/javascript">// <![CDATA[
jQuery(function($){
    $(document).ready(function(){
         $(".toggle_container").hide();
         $("h3.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("normal");
        return false; //Prevent the browser jump to the link anchor
    });
    });
});
// ]]></script>

volendo è possibile anche creare un file esterno chiamandolo magari toggle.js inserirci il codice e richiamarlo nell’header.

Abbelliamo con CSS e immagini

Per finire non ci resta che aprire il file style.css del nostro tema e inserirci questo codice:

/*toggle*/
h3.trigger {
margin: 0px !important;
font-size: 18px;
padding: 10px;
padding-left: 30px;
background: url(images/toggle-plus.png);
background-position: 10px center;
background-repeat: no-repeat;
}
h3.trigger a {
color: #333;
text-decoration: none;
display: block;
}
h3.trigger a:hover {
color: #0489B7;
text-decoration: underline;
}
h3.active{
background: url(images/toggle-minus.png);
background-position: 10px center;
background-repeat: no-repeat;
}
h3.toggle-white{
background-color: #FFF;
}
h3.toggle-gray{
background-color: #D6D6D6;
}
.toggle_container {
overflow: hidden;
padding: 20px 10px;
}

le immagini le puoi inserire nella cartella /images copiandole da qui sotto:
toggle-plus

 

Come usare lo shortcode

Per inserire il Toggle basterà aggiungere nella nostra pagina questo shortcode:

[toggle title="Titolo FAQ" color="white"]Contenuto della FAQ[/toggle]
  • title sarà il titolo della FAQ
  • mentre il contenuto andrà inserito tra i tag toggle di apertura e chiusura

l’attributo color, nell’esempio impostato come color=”white” darà la possibilità di intervallare il colore di sfondo del titolo delle varie FAQ che andremo ad inserire. In questo script le possibilità sono white o gray che in definitiva sono i parametri che trovi nel CSS  h3.toggle-white e h3.toggle-gray dove naturalmente potrai cambiarne il codice colore a tuo piacimento.

È chiaro che andrai ad inserire uno shortcode per ogni domanda che pubblicherai nella pagina.
Fonte: WPExplorer

Alla Prossima!!!