Vuoi modificare l’indice di Table of Contents Plus in WordPress? Come cambiare colore ai numeri del sommario in WordPress? Leggi qui.
Indice della guida:
Attenzione!
Per il corretto svolgimento dell’operazione ci sono varie procedure disponibili. Qui ti consiglio una delle più usate: l’installazione di un buon plugin dedicato e l’inserimento di una breve stringa di codice. Se WordPress integrerà nativamente “l’indice degli articoli” nativamente, questa guida verrà aggiornata. Contattaci per ulteriori suggerimenti. La seguente guida è stata testata sulla versione 1.5 del tema gratuito e libero per WordPress chiamato Twenty Twenty e con il plugin gratuito e open source chiamato Table of Contents Plus. L’operazione descritta in queste righe funziona universalmente (agendo in una volta sola) su tutti i sommari/indici contenuti nelle pagine di WordPress ed è reversibile, dunque, in qualsiasi momento potrai cancellare il codice suggerito in questa guida e far tornare gli indici generali/i sommari “alle caratteristiche standard”. Inoltre, il codice inserito non si cancellerà in caso di aggiornamento del tuo tema.
Come cambiare colore ai numeri del sommario in WordPress
Personalizzare un “sommario” su WordPress non è una operazione complicata. E anche se su WordPress non esistono sommari e indici da impostare di default, devi sapere che è possibile svolgere l’operazione di inserimento di un sommario nel sito (e quindi di cambio dei suoi elementi) con un semplice plugin e qualche minuto. Qui ti consiglio il plugin gratuito e open source chiamato Table of Contents Plus. L’operazione è una operazione semplice e alla portata di tutti. Per riuscire nell’impresa basterà scrivere qualche stringa di codice in linguaggio CSS (un linguaggio di programmazione usato per creare siti internet e dedicato “alla resa grafica”) e salvare il tutto. Niente di impossibile, anche perché l’operazione, in questo caso, è reversibile. In questo modo gli indici contenuti all’interno dei tuoi articoli e delle tue pagine avranno uno stile elegante, come Wikipedia fa con i suoi! E ora cominciamo:
1) Per prima cosa installa Table of Contents Plus. Se non sai come fare ad installare un plugin ufficiale WordPress, clicca qui.
2) A plugin installato, dalla “Bacheca” principale di WordPress, clicca su “Aspetto” quindi su “Personalizza”.
3) Nella nuova finestra che comparirà, scorri fino alla voce “CSS Aggiuntivo” e cliccaci sopra.
4) Ora non ti resterà che copiare la stringa di codice in CSS nell’apposito spazio.
Ecco un esempio di codice da copiare per personalizzare il colore dei numeri nell’indice di Table of Contents Plus:
span.toc_number {
color: black;
}5) Infine, clicca sul bottone blu “Pubblica” (posizionato in alto) per rendere effettive le modifiche.
Alcuni chiarimenti sul codice CSS da copiare
Per cambiare le caratteristiche della “Tavola/indice dei contenuti” ci sono varie stringhe disponibili ed ognuna di essere ha una funzione specifica. Analizziamole insieme pezzo per pezzo, in modo tale da poter agire sui singoli parametri a piacimento:
Questo è il blocco di codice CSS completo descritto in questa guida:
span.toc_number {
color: black;
}- La parte iniziale, la quale indica che stiamo agendo “esteticamente” solamente su una parte della grafica dell’indice/della didascalia (e precisamente sul colore del numero di ogni paragrafo collegato) del plugin installato, è questa:
span.toc_number- Segue alla parte iniziale la parentesi graffa, la quale indica quali parametri compresi tra parentesi modificheranno le caratteristiche del numero contenuto nell’indice, come il “colore del numero”:
{ La chiusura della parentesi graffa indica che i comandi “da modificare” sono finiti e possono quindi essere applicati. La chiusura della parentesi graffa va pertanto inserita alla fine di ogni codice CSS “aggiuntivo”.
}- Il parametro “color” indica il colore del numero e si può sostituire “black” con un colore a propria scelta tra quelli supportati dal sistema.
color: black;Ulteriori personalizzazioni di Table of Contents Plus e plugin simili
Se vuoi personalizzare ulteriormente il numero della “tabella dei contenuti”, ti basterà inserire un nuovo comando (sempre dentro la parentesi graffa) per ogni riga e separare ogni comando dall’altro con “;” come descritto nel codice di esempio. I comandi aggiuntivi (non trattati in questa guida) sono molti, ma alcuni di essi impattano pesantemente sulla velocità delle pagine. Potrai cambiare ulteriormente il colore del testo, aggiungere una ombreggiatura e molto altro, semplicemente imparando a padroneggiare qualche stringa di codice CSS. Non inserire codici a casaccio se non sai quali operazioni stai compiendo o potresti compromettere il sito.
In conclusione, ricorda anche che ogni plugin in grado di inserire un indice dei contenuti ha i suoi comandi dedicati. Eccone alcuni non commentati per cambiare il colore dei numeri nell’indice:
- Per gli utilizzatori del plugin Easy Table of Contents:
#ez-toc-container.counter-decimal ul.ez-toc-list li a::before,
.ez-toc-widget-container.counter-decimal ul.ez-toc-list li a::before {
color: green;
}- Per gli utilizzatori di LuckyWP Table of Contents:
.lwptoc_item_number {
color: #f00;
}Vuoi personalizzare il blocco citazione di Gutenberg? Allora clicca qui per scoprire come fare!