Con il CSS puoi distinguere automaticamente i link esterni in WordPress dai collegamenti interni, applicando un colore diverso e una piccola icona accanto al testo. Il metodo funziona sui normali attributi href dei link HTML e non richiede la modifica manuale di ogni articolo. È sufficiente inserire una regola CSS nel personalizzatore del tema o nell’editor del sito, sostituendo il dominio di esempio con quello reale del tuo sito. Il risultato migliora la leggibilità e rende più chiaro quando un collegamento porta fuori da WordPress.

Come funzionano i selettori CSS per i link esterni

Un link esterno usa generalmente un indirizzo completo, come https://www.wikipedia.org/, mentre un link interno può utilizzare un percorso relativo, come /contatti/. In CSS, il selettore [href^="https://"] individua i collegamenti il cui attributo href inizia con https://.

Per evitare che anche i link assoluti del tuo sito vengano trattati come esterni, occorre combinarlo con :not(). Nel codice seguente, sostituisci example.com con il dominio del tuo sito WordPress, senza inserire https://.

/* Link esterni HTTPS */
a[href^="https://"]:not([href^="https://example.com/"]):not([href^="https://www.example.com/"]):not([href="https://example.com"]):not([href="https://www.example.com"]) {
color: #b42318;
text-decoration-thickness: 2px;
}

/* Link esterni HTTP */
a[href^="http://"]:not([href^="http://example.com/"]):not([href^="http://www.example.com/"]):not([href="http://example.com"]):not([href="http://www.example.com"]) {
color: #b42318;
text-decoration-thickness: 2px;
}

/* Link con URL protocol-relative, come //dominio.it/pagina */
a[href^="//"]:not([href^="//example.com/"]):not([href^="//www.example.com/"]) {
color: #b42318;
text-decoration-thickness: 2px;
}

Il selettore distingue i link esterni WordPress CSS in base al testo contenuto nell’URL, non alla destinazione effettiva della pagina. Per questo motivo è importante indicare tutte le varianti realmente utilizzate dal sito, come dominio con www, dominio senza www ed eventuali sottodomini.

Se il sito usa collegamenti esterni con sottodomini proprietari, aggiungi una regola di esclusione specifica. Per esempio, blog.example.com non viene escluso automaticamente quando il CSS contiene soltanto example.com.

Come aggiungere un’icona ai link esterni

Lo pseudo-elemento ::after consente di inserire un simbolo dopo il testo del link senza modificare gli articoli. L’icona ↗ comunica visivamente che il collegamento apre una risorsa esterna e non richiede immagini aggiuntive o librerie JavaScript.

/* Icona per i link esterni HTTPS */
a[href^="https://"]:not([href^="https://example.com/"]):not([href^="https://www.example.com/"]):not([href="https://example.com"]):not([href="https://www.example.com"])::after,

/* Icona per i link esterni HTTP */
a[href^="http://"]:not([href^="http://example.com/"]):not([href^="http://www.example.com/"]):not([href="http://example.com"]):not([href="http://www.example.com"])::after,

/* Icona per gli URL protocol-relative */
a[href^="//"]:not([href^="//example.com/"]):not([href^="//www.example.com/"])::after {
content: "↗";
display: inline-block;
margin-left: 0.3em;
font-size: 0.85em;
font-weight: 700;
line-height: 1;
vertical-align: super;
text-decoration: none;
}

La proprietà margin-left crea spazio tra il testo e l’icona, mentre vertical-align: super posiziona il simbolo leggermente più in alto. Se preferisci un’icona più discreta, riduci font-size a 0.7em oppure sostituisci ↗ con ⇗.

Per evitare che l’icona erediti una sottolineatura dal link, puoi aggiungere questa regola:

a[href^="https://"]:not([href^="https://example.com/"]):not([href^="https://www.example.com/"])::after,
a[href^="http://"]:not([href^="http://example.com/"]):not([href^="http://www.example.com/"])::after,
a[href^="//"]:not([href^="//example.com/"]):not([href^="//www.example.com/"])::after {
text-decoration: none;
}

L’icona deve rimanere un elemento decorativo e non l’unico modo per riconoscere il link esterno. Il colore, il contrasto e la sottolineatura devono continuare a rendere il collegamento identificabile anche per chi non distingue bene i colori.

Come inserire il CSS in WordPress

Passo 1: apri l’area per il CSS personalizzato

Nei temi che utilizzano il Personalizzatore, accedi alla bacheca di WordPress e apri Aspetto > Personalizza > CSS aggiuntivo. Incolla il codice nell’area disponibile, quindi seleziona Pubblica.

Nei temi a blocchi, l’area può trovarsi in Aspetto > Editor, dentro Stili. Apri il menu con i tre puntini e cerca la voce relativa al CSS aggiuntivo, se il tema e la versione di WordPress la mettono a disposizione.

La posizione esatta del campo può cambiare in base al tema WordPress installato. Se il tema non offre un’area per il CSS aggiuntivo, usa il foglio di stile del tema child oppure un plugin dedicato alla gestione del CSS.

Passo 2: sostituisci il dominio di esempio

Sostituisci ogni occorrenza di example.com con il dominio del sito. Per un sito chiamato miosito.it, le esclusioni principali diventano:

:not([href^="https://miosito.it/"])
:not([href^="https://www.miosito.it/"])
:not([href="https://miosito.it"])
:not([href="https://www.miosito.it"])

Se il sito usa soltanto URL relativi per i collegamenti interni, le esclusioni per http:// e https:// sono comunque necessarie per gestire i link assoluti che puntano al dominio principale.

Passo 3: verifica gli indirizzi interni ed esterni

Salva il CSS e apri una pagina pubblica in una finestra anonima del browser. Controlla almeno questi casi:

Un link interno con URL relativo, come /chi-siamo/, non deve ricevere l’icona.
Un link interno assoluto, come https://miosito.it/contatti/, non deve ricevere l’icona.
Un link esterno, come https://www.wikipedia.org/, deve mostrare colore e simbolo.
Un link email con prefisso mailto: non deve essere modificato.
Un link telefonico con prefisso tel: non deve essere modificato.

Google Chrome, Mozilla Firefox e Safari possono mostrare differenze minime nella resa dell’icona, ma i selettori CSS utilizzati sono supportati dai browser moderni. Svuota la cache del plugin di ottimizzazione e quella del browser se il nuovo stile non appare subito.

Cosa il CSS non può fare sui link esterni

Il CSS modifica l’aspetto dei collegamenti, ma non aggiunge automaticamente target="_blank", rel="noopener" o rel="nofollow". Questi attributi appartengono al codice HTML e devono essere configurati nell’editor dei link, tramite un plugin o con una modifica del tema.

Aprire ogni link esterno in una nuova scheda non è sempre necessario. Quando utilizzi questa impostazione, WordPress o l’editor del blocco Collegamento possono aggiungere l’attributo di sicurezza appropriato; verifica comunque il codice HTML generato dal tema.

Il CSS non riconosce in modo affidabile il dominio senza una regola di esclusione esplicita. Un selettore come a[href^="https://"]:not([href*="miosito.it"]) è più breve, ma può classificare erroneamente domini come miosito.it-esempio.com o URL che contengono il nome del sito soltanto nel percorso.

Per una gestione più precisa, puoi assegnare una classe CSS ai collegamenti esterni direttamente nell’editor di WordPress. In quel caso il foglio di stile diventa più semplice:

a.link-esterno {
color: #b42318;
text-decoration-thickness: 2px;
}

a.link-esterno::after {
content: "↗";
display: inline-block;
margin-left: 0.3em;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
}

La soluzione automatica con href è più pratica per molti articoli, mentre la classe link-esterno è più controllabile quando il sito contiene eccezioni, sottodomini o collegamenti gestiti da componenti personalizzati. Con entrambi i metodi, il CSS per link esterni WordPress rende immediatamente riconoscibili le destinazioni fuori dal sito.

Potrebbe interessarti anche:

FAQ

No. Il CSS individua i link in base all’inizio dell’attributo href. Devi escludere manualmente il dominio del tuo sito e le eventuali varianti con www o sottodomini.

Sì. Puoi sostituire il contenuto di ::after con un’immagine SVG incorporata come sfondo CSS oppure usare un’icona fornita dal tema. Il simbolo testuale è però più semplice e non richiede file aggiuntivi.

No. Il CSS cambia soltanto l’aspetto del collegamento. Per usare una nuova scheda devi impostare target="_blank" nell’HTML o nell’editor del link.

Di solito l’URL interno usa un dominio o un sottodominio non incluso nelle esclusioni CSS. Controlla anche la presenza di www, il protocollo HTTP o HTTPS e l’eventuale barra finale nell’indirizzo.

Altri articoli di questa serie: