Le citazioni evidenziate WordPress CSS HTML permettono di trasformare un semplice testo citato in un elemento grafico riconoscibile e coerente con il design del sito. Il risultato si ottiene usando il markup HTML <blockquote> e alcune regole CSS applicate ai pseudo-elementi ::before e ::after. Questa tecnica aggiunge virgolette decorative, colori, bordi e spaziature senza modificare il contenuto scritto nell’articolo. Il metodo funziona con l’Editor a blocchi di WordPress, con il blocco HTML personalizzato e con molti temi classici o a blocchi. La struttura mantiene anche un buon livello di accessibilità, perché il testo resta dentro un elemento semantico destinato alle citazioni.

Quale markup HTML usare per una citazione in WordPress

Per una citazione autonoma, attribuita a una persona, a un libro o a una fonte esterna, l’elemento HTML corretto è <blockquote>. Il tag comunica ai browser e alle tecnologie assistive che il contenuto è una citazione separata dal testo principale.

Nel blocco HTML personalizzato di WordPress puoi inserire una struttura come questa:

<blockquote class="citazione-evidenziata">
<p>La semplicità è la massima sofisticazione.</p>
<cite>Leonardo da Vinci</cite>
</blockquote>

La classe citazione-evidenziata consente di applicare lo stile solo a questo tipo di citazione, evitando modifiche indesiderate agli altri blocchi del sito. Il tag <p> contiene il testo citato, mentre <cite> identifica l’autore o la fonte.

Nel caso di una citazione breve inserita direttamente in una frase, il tag più appropriato è <q>. WordPress può visualizzare automaticamente le virgolette di <q> secondo le impostazioni del browser, ma <blockquote> è più adatto quando la citazione occupa un blocco indipendente.

Il blocco “Citazione” dell’Editor a blocchi genera già una struttura semantica simile. Tuttavia, il markup preciso può cambiare in base al tema WordPress e alla versione dei blocchi. Una classe CSS personalizzata offre quindi un selettore più stabile per il design.

Come aggiungere le virgolette con gli pseudo-elementi CSS

Gli pseudo-elementi ::before e ::after inseriscono contenuto prima e dopo il testo di un elemento, senza aggiungere caratteri nel markup HTML. Per le citazioni evidenziate WordPress CSS HTML sono utili perché permettono di creare virgolette decorative con pochi selettori.

Inserisci questo codice nell’area CSS aggiuntivo del tema:

.citazione-evidenziata {
position: relative;
margin: 2rem 0;
padding: 1.75rem 2rem 1.5rem;
border-left: 5px solid #2f6fed;
border-radius: 0 10px 10px 0;
background: #f1f5fb;
color: #1d2733;
font-size: 1.2rem;
line-height: 1.6;
}

.citazione-evidenziata::before {
content: "“";
display: block;
height: 2rem;
color: #2f6fed;
font-family: Georgia, serif;
font-size: 4rem;
font-weight: bold;
line-height: 1;
}

.citazione-evidenziata::after {
content: "”";
display: block;
color: #2f6fed;
font-family: Georgia, serif;
font-size: 3rem;
font-weight: bold;
line-height: 0.5;
text-align: right;
}

.citazione-evidenziata p {
margin: 0;
}

.citazione-evidenziata cite {
display: block;
margin-top: 1rem;
color: #52606d;
font-size: 0.95rem;
font-style: normal;
}

La proprietà content stabilisce quali caratteri mostrare. Il valore display: block posiziona la virgoletta su una riga separata, mentre font-family: Georgia, serif crea un aspetto editoriale più adatto alle citazioni.

Il testo delle virgolette aggiunte con ::before e ::after è puramente decorativo. Il contenuto importante rimane comunque disponibile nel markup HTML, quindi la citazione conserva il suo significato anche quando i CSS sono disattivati.

Passo 1: aprire l’area CSS del tema

Nei temi classici di WordPress il percorso abituale è Aspetto > Personalizza > CSS aggiuntivo. Nei temi a blocchi il percorso può essere Aspetto > Editor > Stili, quindi il menu con i tre puntini e la voce relativa al CSS aggiuntivo, se il tema e la versione installata la rendono disponibile.

La posizione esatta può variare in base al tema, a WordPress.com e ai permessi dell’account. Se l’opzione non appare, il CSS può essere gestito tramite il tema child o tramite un plugin dedicato al CSS personalizzato.

Passo 2: assegnare la classe al blocco

Se usi il blocco “Citazione”, apri il pannello Avanzate nella barra laterale dell’Editor a blocchi e inserisci citazione-evidenziata nel campo Classe CSS aggiuntiva. Non aggiungere il punto iniziale: il punto serve solo nel selettore CSS.

Se preferisci il blocco HTML personalizzato, inserisci direttamente l’attributo class nell’elemento <blockquote>, come nell’esempio precedente. Salva o aggiorna l’articolo e verifica il risultato nell’anteprima pubblica.

Come rendere l’effetto coerente con il tema WordPress

Il colore della citazione dovrebbe rispettare il contrasto minimo previsto dal design del sito. Un testo grigio chiaro su fondo bianco può risultare difficile da leggere, soprattutto su schermi con luminosità ridotta. Per controllare il contrasto puoi usare strumenti affidabili come quelli del Web Accessibility Initiative.

Per adattare l’effetto ai colori del tema, sostituisci i valori esadecimali nel CSS:

.citazione-evidenziata {
border-left-color: #8b3dff;
background: #f7f2ff;
}

.citazione-evidenziata::before,
.citazione-evidenziata::after {
color: #8b3dff;
}

La dimensione del testo dovrebbe restare leggibile anche su smartphone. Una citazione evidenziata non deve occupare tutta la larghezza dello schermo con caratteri troppo grandi o margini eccessivi.

Per migliorare la visualizzazione sui dispositivi mobili puoi aggiungere una media query:

@media (max-width: 600px) {
.citazione-evidenziata {
margin: 1.5rem 0;
padding: 1.25rem 1.25rem 1rem;
font-size: 1.05rem;
}

.citazione-evidenziata::before {
font-size: 3.2rem;
}

.citazione-evidenziata::after {
font-size: 2.5rem;
}
}

Il CSS interviene solo sull’aspetto grafico e non modifica il comportamento del blocco durante la condivisione, la stampa o la lettura da parte dei motori di ricerca. Per questo è preferibile mantenere una struttura HTML corretta invece di simulare la citazione con semplici paragrafi e caratteri inseriti manualmente.

Errori da evitare con le citazioni evidenziate WordPress

Un errore comune consiste nell’applicare il selettore blockquote a tutte le citazioni del sito senza verificare il tema. Alcuni temi usano già blockquote per recensioni, testimonianze o contenuti incorporati; una classe personalizzata riduce il rischio di conflitti.

Evita anche di inserire le virgolette decorative direttamente nel testo HTML quando l’effetto deve essere uniforme. I pseudo-elementi CSS permettono di modificare forma, colore e dimensione da un solo punto.

Le verifiche più importanti prima della pubblicazione sono:

controllare la citazione su computer e smartphone;
verificare che il testo mantenga un contrasto sufficiente;
usare <cite> solo per l’autore o la fonte, non per contenuti aggiuntivi;
controllare che il tema non sovrascriva margin, padding o font-size;
verificare l’anteprima con CSS disattivati per assicurarsi che il markup resti comprensibile;
evitare animazioni decorative che rendano difficile la lettura.

Se le regole non vengono applicate, controlla prima la classe assegnata al blocco. Il selettore .citazione-evidenziata deve corrispondere esattamente al valore scritto nel campo Classe CSS aggiuntiva, comprese maiuscole, minuscole e trattini.

Quando il tema usa selettori molto specifici, può essere necessario aumentare la specificità, ma è meglio farlo con moderazione:

.entry-content .citazione-evidenziata {
border-left-color: #2f6fed;
}

L’uso di !important dovrebbe rimanere una soluzione estrema, perché rende più difficile modificare lo stile in futuro. La documentazione ufficiale del blocco Citazione di WordPress spiega inoltre quali impostazioni sono disponibili direttamente nell’Editor a blocchi.

Con markup semantico e pseudo-elementi CSS, le citazioni evidenziate WordPress CSS HTML diventano decorative, leggibili e facili da mantenere.

FAQ

Sì. Assegna la classe citazione-evidenziata nel pannello Avanzate > Classe CSS aggiuntiva e applica il CSS al tema.

Controlla che il selettore corrisponda alla classe HTML e che la proprietà content sia presente. Verifica anche eventuali regole del tema che sovrascrivono il CSS.

<blockquote> è indicato per citazioni autonome visualizzate in un blocco separato. <q> è più adatto a brevi citazioni inserite all’interno di una frase.

No. Gli pseudo-elementi aggiungono elementi decorativi, mentre il testo originale resta nel markup HTML e continua a essere leggibile senza lo stile grafico.

Altri articoli di questa serie: