Aggiungere un’icona ai link esterni in WordPress con CSS e JavaScript rende immediato il passaggio verso un altro sito. Lo script identifica automaticamente gli indirizzi che appartengono a un dominio diverso da quello del sito e applica una classe CSS dedicata. Il CSS mostra l’icona senza modificare il testo del collegamento, mentre JavaScript imposta l’apertura in una nuova scheda. La procedura funziona con i link inseriti negli articoli, nelle pagine e nei contenuti gestiti dall’editor a blocchi. Per evitare problemi dopo gli aggiornamenti del tema, il codice va inserito in un tema child o caricato come file separato tramite le funzioni di WordPress.

Come funziona l’icona per i link esterni in WordPress

La soluzione utilizza JavaScript per controllare gli elementi <a> presenti nel contenuto principale. Per ogni collegamento, lo script confronta il dominio dell’URL con window.location.hostname, cioè il dominio della pagina visualizzata.

Un link verso https://www.esempio.it viene quindi considerato esterno se il sito WordPress utilizza un dominio diverso. I collegamenti interni, i riferimenti alle sezioni della pagina, gli indirizzi email e i numeri di telefono vengono esclusi per evitare icone o aperture indesiderate.

Il CSS applica l’icona tramite lo pseudo-elemento ::after. L’icona è decorativa e non viene letta dai lettori di schermo come contenuto aggiuntivo, quindi il testo originale del link rimane invariato.

I vantaggi principali sono:

riconoscimento immediato dei collegamenti verso altri siti;
apertura automatica in una nuova scheda;
applicazione anche ai link aggiunti successivamente negli articoli;
nessuna modifica manuale a ogni collegamento;
utilizzo dell’attributo rel="noopener" per una maggiore sicurezza.

Come preparare i file CSS e JavaScript

Passo 1: creare il file JavaScript

Nel tema child crea il file link-esterni.js, preferibilmente nella cartella js. Inserisci questo codice:

document.addEventListener('DOMContentLoaded', function () {
const links = document.querySelectorAll('.entry-content a[href]');

links.forEach(function (link) {
const href = link.getAttribute('href');

if (!href || href.startsWith('#')) {
return;
}

if (
href.startsWith('mailto:') ||
href.startsWith('tel:') ||
href.startsWith('javascript:')
) {
return;
}

let url;

try {
url = new URL(href, window.location.href);
} catch (error) {
return;
}

if (!['http:', 'https:'].includes(url.protocol)) {
return;
}

if (url.hostname === window.location.hostname) {
return;
}

link.classList.add('external-link');
link.setAttribute('target', '_blank');

const relValues = new Set(
(link.getAttribute('rel') || '')
.split(/s+/)
.filter(Boolean)
);

relValues.add('noopener');
link.setAttribute('rel', Array.from(relValues).join(' '));
});
});

Il selettore .entry-content è utilizzato da molti temi WordPress per identificare il contenuto degli articoli. Se il tema utilizza una classe diversa, sostituisci .entry-content con il selettore corretto, ad esempio .post-content o .article-content.

L’uso di new URL() permette di gestire anche gli indirizzi relativi. Il controllo sul protocollo evita di trattare come normali link esterni gli indirizzi mailto:, tel: e altri schemi non adatti all’apertura in una scheda del browser.

Passo 2: creare il file CSS

Nella cartella css del tema child crea il file link-esterni.css. Il seguente stile aggiunge una piccola icona dopo ogni link esterno:

.entry-content a.external-link::after {
content: "";
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-left: 0.3em;
vertical-align: -0.08em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

L’icona incorporata nel CSS rappresenta una freccia che esce da una finestra, un simbolo comunemente associato ai collegamenti esterni. La dimensione usa l’unità em, così l’icona si adatta alla grandezza del testo del link.

Se il tema ha uno sfondo scuro o colori particolari, puoi modificare l’icona inserendo un colore SVG esplicito. Con currentColor, invece, l’icona eredita il colore del collegamento e segue automaticamente le regole grafiche del tema.

Come caricare CSS e JavaScript nel tema WordPress

Passo 3: aggiungere il caricamento in `functions.php`

Apri il file functions.php del tema child e aggiungi il seguente codice:

function backdigit_link_esterni_assets() {
wp_enqueue_style(
'backdigit-link-esterni',
get_stylesheet_directory_uri() . '/css/link-esterni.css',
array(),
'1.0'
);

wp_enqueue_script(
'backdigit-link-esterni',
get_stylesheet_directory_uri() . '/js/link-esterni.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_link_esterni_assets');

get_stylesheet_directory_uri() punta alla cartella del tema attivo e funziona correttamente quando il codice appartiene a un tema child. Il valore true nell’ultima posizione di wp_enqueue_script() carica il file JavaScript nel footer, dopo il contenuto HTML della pagina.

WordPress consiglia di caricare gli script tramite wp_enqueue_script() invece di inserirli direttamente nell’intestazione del documento. La [documentazione ufficiale sul caricamento degli script](https://developer.wordpress.org/apis/ enqueuing-scripts/) descrive questa modalità e le relative dipendenze.

Nel collegamento precedente non deve esserci uno spazio nell’URL. L’indirizzo corretto della documentazione è:

https://developer.wordpress.org/apis/enqueuing-scripts/

Passo 4: svuotare la cache e verificare il risultato

Dopo aver salvato i file, svuota la cache del plugin di ottimizzazione, del servizio CDN e del browser. Apri quindi un articolo in modalità pubblica e verifica un link interno, un link esterno, un indirizzo email e un collegamento con ancora.

Un link esterno deve mostrare l’icona e aprirsi in una nuova scheda. Un link interno deve rimanere senza icona e aprirsi secondo il comportamento normale del tema. Se l’icona non appare, controlla che il contenuto utilizzi davvero la classe .entry-content e che i percorsi dei file CSS e JavaScript siano corretti.

Personalizzare sicurezza, sottodomini e accessibilità

Il codice confronta soltanto il nome host. Di conseguenza, blog.esempio.it viene considerato diverso da www.esempio.it, anche se entrambi appartengono alla stessa organizzazione. Se i sottodomini devono essere trattati come interni, modifica il controllo JavaScript con una condizione personalizzata.

Per esempio, puoi considerare interno anche un sottodominio specifico:

const hostInterni = [
window.location.hostname,
'blog.esempio.it'
];

if (hostInterni.includes(url.hostname)) {
return;
}

Sostituisci blog.esempio.it con il sottodominio realmente utilizzato dal sito. Il confronto deve tenere conto anche di eventuali domini alternativi, redirect e versioni con o senza www.

L’attributo target="_blank" apre il collegamento in una nuova scheda, mentre rel="noopener" impedisce alla nuova pagina di utilizzare window.opener per intervenire sulla scheda originale. L’icona CSS non deve essere l’unico indizio: il testo del link dovrebbe già comunicare la destinazione, evitando formule generiche come “clicca qui”.

Per esempio, è preferibile scrivere “leggi la documentazione di WordPress” invece di “clicca qui”. In questo modo il collegamento resta comprensibile anche senza icona, con JavaScript disattivato o durante la navigazione tramite lettore di schermo.

La soluzione con classe CSS e script separato offre un’icona link esterni WordPress CSS coerente, automatica e semplice da mantenere.

Potrebbe interessarti anche:

FAQ

Sì, funziona con i link inseriti nei blocchi Paragrafo, Media e testo, purché il contenuto dell’articolo utilizzi il selettore .entry-content.

Sì. Limitando il selettore JavaScript a .entry-content a[href], lo script esclude menu, widget, intestazione e piè di pagina.

Le cause più comuni sono una classe del contenitore diversa da .entry-content, un percorso errato dei file o una cache non ancora svuotata.

No. Puoi rimuovere link.setAttribute('target', '_blank'); se preferisci lasciare all’utente la scelta del comportamento del collegamento.

Sì, perché confronta il nome host completo. Un sottodominio deve essere aggiunto manualmente all’elenco degli host interni se appartiene allo stesso sito.

Altri articoli di questa serie: