WordPress: cum evidențiezi automat linkurile externe cu o iconiță prin CSS

Atunci când administrezi un blog WordPress, este o practică excelentă de uzabilitate (UX) ca vizitatorii să poată distinge rapid legăturile interne de cele externe. Semnalarea vizuală a linkurilor care duc către alte domenii oferă transparență și previne părăsirea neintenționată a site-ului.

De ce este utilă marcarea linkurilor externe?

Evidențierea trimiterilor externe aduce multiple beneficii:

• Experiență optimizată pentru utilizator (UX): cititorii știu dinainte când urmează să părăsească domeniul curent.
• Control SEO: gestionarea unitară a atributelor rel="nofollow" și target="_blank" pentru sursele exterioare.
• Aspect profesional: integrarea discretă a unei mici iconițe adaugă eleganță designului paginii.

Metoda 1: Utilizarea modulului WP External Links

O soluție simplă și rapidă este utilizarea pluginului WP External Links. Acest modul recunoaște automat toate adresele web care nu aparțin domeniului tău și aplică setările configurate:

• Afișarea automată a unei iconițe distinctive lângă fiecare link extern (poți alege din diverse stiluri grafice).
• Deschiderea automată a legăturilor externe în tab sau fereastră nouă (target="_blank").
• Adăugarea atributelor rel="noopener noreferrer" sau rel="nofollow" pentru protecție SEO și securitate.
• Exceptarea anumitor domenii partenere sau subdomenii interne din această regulă.

Metoda 2: Evidențierea linkurilor externe prin CSS pur (fără module)

Dacă preferi să menții blogul cât mai rapid și să eviți încărcarea de module suplimentare, poți obține același rezultat folosind câteva reguli simple de CSS în fișierul style.css al temei active (sau în secțiunea Appearance > Customize > Additional CSS):

/* Adaugă o iconiță discretă doar pentru linkurile care părăsesc domeniul */
a[href^="http://"]:not([href*="dexblog.ro"])::after,
a[href^="https://"]:not([href*="dexblog.ro"])::after {
    content: " \2197"; /* Săgeată discretă diagonală (sau cod Unicode similar) */
    font-size: 0.85em;
    padding-left: 3px;
    color: #888;
}

Selectorul CSS de mai sus identifică toate legăturile absolute care încep cu http:// sau https:// și care nu conțin numele propriului domeniu, adăugând la final un simbol discret fără a îngreuna încărcarea paginii.