WordPress. Effetto toggle sui tag dei post
Su suggerimento di Talksina, una utente del forum di WP-IT, ho realizzato un paio di righe di jQuery per nascondere di default i tag dei post e mostrarli solo al click su un apposito link.
In linea di massima, questa soluzione può servire a migliorare l'accessibilità di una pagina, permettendo di saltare contenuti che possono non interessare come ad esempio la lista dei link ai tag associati ad un post.
Il codice è abbastanza rozzo, ma funziona e ovviamente è personalizzabile per altri usi.
Da inserire in header.php
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-includes/js/jquery/jquery.js">
</script>
<script type="text/javascript">
var testoMostra = 'Mostra i tag';
var testoNascondi = 'Nascondi i tag';
jQuery(document).ready(function() {
jQuery('.slickbox').hide();
jQuery('a.slick-toggle').html(testoMostra);
jQuery('a.slick-toggle').click(function(event) {
var linkId = event.target.id;
var myId = linkId.replace('slicktoggle-','');
var tagbox = 'slickbox-' + myId;
jQuery('#'+tagbox).toggle(400);
var testoLink = jQuery('#'+linkId).html();
if (testoLink == testoMostra){
jQuery('#'+linkId).html(testoNascondi);
} else {
jQuery('#'+linkId).html(testoMostra);
}
return false;
});
});
</script>
</script>
<script type="text/javascript">
var testoMostra = 'Mostra i tag';
var testoNascondi = 'Nascondi i tag';
jQuery(document).ready(function() {
jQuery('.slickbox').hide();
jQuery('a.slick-toggle').html(testoMostra);
jQuery('a.slick-toggle').click(function(event) {
var linkId = event.target.id;
var myId = linkId.replace('slicktoggle-','');
var tagbox = 'slickbox-' + myId;
jQuery('#'+tagbox).toggle(400);
var testoLink = jQuery('#'+linkId).html();
if (testoLink == testoMostra){
jQuery('#'+linkId).html(testoNascondi);
} else {
jQuery('#'+linkId).html(testoMostra);
}
return false;
});
});
</script>
Da inserire in index.php
Oppure all'interno di qualsiasi pagina di template che mostra gli articoli, ma comunque all'interno del Loop.
<a class="slick-toggle" id="slicktoggle-<?php the_ID(); ?>" href="javascript:void(0);">show</a>
<div class="slickbox" id="slickbox-<?php the_ID(); ?>">
<p><?php the_tags('Tags: ', ', ', ' '); ?></p>
</div>
<div class="slickbox" id="slickbox-<?php the_ID(); ?>">
<p><?php the_tags('Tags: ', ', ', ' '); ?></p>
</div>
Articoli correlati
Forse potrebbero interessarti anche questi articoli
- Creare tabelle a righe alternate con i CSS e jQuery
- WordPress. Mostrare gli articoli pubblicati tra due date
[...] Parlando dei blog, dovrebbero essere sempre accessibili anche tramite la tastiera, con la possibilità di attivare e disattivare la visualizzazione dei link non indispensabili come i tag: spesso e volentieri questi sono anche una decina per ogni articolo, il che può creare problemi (gli screen reader scorrono tutti i link di una pagina uno ad uno NdTom). Una soluzione per Wordpress è in questo articolo di Studio404. [...]
[...] Parlando dei blog, dovrebbero essere sempre accessibili anche tramite la tastiera, con la possibilità di attivare e disattivare la visualizzazione dei link non indispensabili come i tag: spesso e volentieri questi sono anche una decina per ogni articolo, il che può creare problemi (gli screen reader scorrono tutti i link di una pagina uno ad uno NdTom). Una soluzione per Wordpress è in questo articolo di Studio404. [...]