Come Creare un Indice Contenuti Collassabile con Rank Math in WordPress

Se stai cercando di migliorare la navigabilità del tuo sito WordPress e ottimizzare lo spazio sulle tue pagine, un indice contenuti collassabile potrebbe essere la soluzione perfetta. In questa guida, ti mostreremo come modificare l’indice contenuti di Rank Math per renderlo collassabile, migliorando così l’esperienza utente e l’aspetto del tuo sito.

Perché Creare un Indice Contenuti Collassabile?

Un indice contenuti collassabile offre diversi vantaggi:

1. Migliora la navigabilità del sito
2. Risparmia spazio sulle pagine
3. Offre un’esperienza utente più pulita e organizzata
4. Permette ai lettori di avere una panoramica dei contenuti senza scrollare eccessivamente

Prerequisiti

Prima di iniziare, assicurati di avere:

• WordPress installato
• Il plugin Rank Math SEO attivo
• Accesso all’amministrazione del tuo sito WordPress

Passo 1: Installare WPCode Lite

Per iniziare, dovrai installare e attivare il plugin WPCode Lite. Questo plugin ti permetterà di aggiungere facilmente snippet di codice al tuo sito senza modificare direttamente i file del tema.

1. Vai su “Plugin” > “Aggiungi nuovo” nel tuo pannello di amministrazione WordPress
2. Cerca “WPCode Lite”
3. Clicca su “Installa ora” e poi su “Attiva”

Passo 2: Aggiungere lo Snippet JavaScript

Ora che hai installato WPCode Lite, è il momento di aggiungere lo snippet JavaScript che renderà l’indice collassabile:

1. Nel pannello di amministrazione, vai su “Codice Snippet” > “Aggiungi nuovo”
2. Dai un nome allo snippet, ad esempio “Indice Rank Math Collassabile”
3. Seleziona “PHP Snippet” come tipo di snippet
4. Incolla il seguente codice e poi clicca su salva :

function turn_rm_toc_collapsable() { 
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var tocItems = document.querySelectorAll("div.wp-block-rank-math-toc-block");
    tocItems.forEach(function(tocItem) {
        tocItem.addEventListener("click", function(event) {
            var nav = tocItem.querySelector("nav");
            if (nav.style.overflow === "hidden" || nav.style.overflow === "") {
                nav.style.overflow = "visible";
                nav.style.maxHeight = "100vh";
            } else {
                nav.style.overflow = "hidden";
                nav.style.maxHeight = "0";
            }
        });
    });
});
</script>
<?php
}
add_action('wp_footer', 'turn_rm_toc_collapsable');

Passo 3: Personalizzare lo Stile CSS

Per migliorare l’aspetto del tuo indice collassabile, aggiungeremo del CSS personalizzato:

1. Nel pannello di amministrazione, vai su “Aspetto” > “Personalizza”
2. Clicca su “CSS aggiuntivo”
3. Incolla il seguente codice CSS e poi clicca su pubblica in alto a sinistra :

.wp-block-rank-math-toc-block {
    position: relative;
}
.wp-block-rank-math-toc-block h2 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position: relative;
    margin-bottom: 0;
}
.wp-block-rank-math-toc-block h2:before {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #000000;
    margin-right: 8px;
}
.wp-block-rank-math-toc-block nav {
    padding: 10px 10px 0px 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, overflow 0.3s ease;
}

Conclusione

Seguendo questi passaggi, avrai creato un indice contenuti collassabile per Rank Math in WordPress. Questo migliorerà notevolmente la navigabilità e l’aspetto del tuo sito, offrendo ai tuoi lettori un’esperienza più pulita e organizzata.

Ricorda che se in futuro deciderai di cambiare tema, le modifiche apportate tramite WPCode Lite rimarranno intatte, a differenza di quelle fatte direttamente nel file functions.php.