Introduzione
Gestire un sito WordPress spesso richiede di trovare soluzioni creative per migliorare l’esperienza degli utenti. Recentemente, mi sono trovata a dover nascondere sezioni di contenuto in modo che fossero visibili solo quando l’utente decidesse di mostrarle. Tuttavia, non volevo creare un plugin da zero. Dopo alcune ricerche, ho trovato una soluzione semplice ed efficace utilizzando il plugin WPCode. Questo tutorial vi guiderà attraverso i passaggi necessari per implementare questa funzionalità.
Il Problema
Mi sono trovata a dover nascondere sezioni di testo nei miei articoli per vari motivi, come ad esempio:
- Ridurre l’ingombro visivo della pagina mostrando solo informazioni essenziali.
- Consentire agli utenti di esplorare ulteriori dettagli solo se interessati.
- Migliorare la navigazione e l’esperienza utente evitando testi troppo lunghi e dispersivi.
Nel mio caso, l’utilizzo del Read More non funzionava. Vuoi per non compatibilità del tema, per il the_content, l’utilizzo del More tag richiede particolari condizioni. A me serviva semplicemente una soluzione semplice da far utilizzare al cliente e che non richiedesse l’installazione di un ulteriore plugin.
La risposta è stato creare uno snippet che permettesse ciò.
1. Installa il Plugin Code Snippets o WPCode
Per iniziare, installa e attiva il plugin Code Snippets:
- Vai su “Plugin” > “Aggiungi nuovo” nella dashboard di WordPress.
- Cerca “Code Snippets” o WPCode.
- Installa e attiva il plugin.
2. Aggiungi uno Snippet per Gestire lo Shortcode
Una volta installato il plugin, è il momento di aggiungere il codice PHP che gestirà il nostro shortcode [hide]:
- Vai su “Snippet” > “Aggiungi nuovo”.
- Inserisci il titolo dello snippet, ad esempio “Hide Sections Shortcode”.
- Aggiungi il seguente codice PHP
// Funzione per gestire lo shortcode [hide]
function hs_hide_shortcode($atts, $content = null) {
return '<div><span class="hs-toggle-button">Mostra/Nascondi Contenuto</span><div class="hs-hidden-section" style="display: none;">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('hide', 'hs_hide_shortcode');
// Aggiungi lo script JS per mostrare/nascondere le sezioni
function hs_enqueue_scripts() {
wp_enqueue_script('hs-script', get_stylesheet_directory_uri() . '/hs-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'hs_enqueue_scripts');
// Aggiungi il CSS per le sezioni nascoste
function hs_enqueue_styles() {
wp_enqueue_style('hs-style', get_stylesheet_directory_uri() . '/hs-style.css');
}
add_action('wp_enqueue_scripts', 'hs_enqueue_styles');
3. Aggiungi lo snippet HTML
Per gestire il comportamento di mostra/nascondi, dobbiamo aggiungere un file JavaScript e CSS, nel mio caso ho scelto di aggiungere un nuovo snippet HTML in cui integrare js e css insieme:
<script>
jQuery(document).ready(function($) {
$('.hs-toggle-button').click(function() {
$(this).next('.hs-hidden-section').toggle();
});
});
</script>
<style>
.hs-toggle-button {
cursor: pointer;
color: blue;
text-decoration: underline;
}
.hs-hidden-section {
display: none;
}
</style>5. Utilizza lo Shortcode
Ora che tutto è configurato, puoi nascondere una sezione del contenuto utilizzando lo shortcode [hide][/hide] nel tuo editor WYSIWYG di WordPress.
