Penserete 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:
[php]
//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’);
[/php]
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:
[js]<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>[/js]
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:
[css]/*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;
}[/css]
le immagini le puoi inserire nella cartella /images copiandole da qui sotto:
Come usare lo shortcode
Per inserire il Toggle basterà aggiungere nella nostra pagina questo shortcode:
[sourcecode language=”plain”][toggle title="Titolo FAQ" color="white"]Contenuto della FAQ[/toggle][/sourcecode]
- 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!!!
