Personalizare TinyMCE în WordPress: adăugarea de clase CSS personalizate în fereastra de inserare a linkurilor

Pornind de la un articol scris recent, mi-a venit o idee utilă de îmbunătățire a experienței utilizatorilor: de ce nu am defini o clasă CSS dedicată pentru toate linkurile externe de pe blog? Nu ar fi mult mai intuitiv să le semnalăm vizitatorilor printr-o pictogramă discretă că linkul pe care urmează să dea clic duce către un site extern?

Dacă vrei să implementezi această funcționalitate în WordPress, vestea bună este că procesul este simplu și rapid. Iată pașii pe care trebuie să îi parcurgi:

1. Definirea stilului CSS

Pentru început, accesează fișierul style.css din tema ta WordPress (prin editorul integrat sau prin FTP) și adaugă următoarea regulă de stil:

.externalurl {
    padding-right: 15px;
    background: url(img/url_icon.gif) no-repeat center right;
}

Poți folosi imaginea următoare pentru pictograma linkurilor: (salveaz-o în folderul img din directorul temei).

2. Încărcarea stilurilor în editorul TinyMCE

După ce ai adăugat stilul în style.css, deschide fișierul functions.php al temei active și adaugă următorul fragment de cod pentru ca TinyMCE să recunoască clasele:

function ses_tinymce_css($wp) {
    $wp .= ',' . get_bloginfo('stylesheet_url');
    return $wp;
}
add_filter('mce_css', 'ses_tinymce_css');

3. Verificarea rezultatului

După salvarea modificărilor în functions.php, reîncarcă editorul de articole sau reconectează-te în panoul de administrare.

Când vei edita sau insera un link (prin fereastra Insert/edit link), la lista de clase CSS disponibile va apărea și noua opțiune externalurl. Selectarea acesteia va aplica stilul definit.

Pentru a vedea cum arată noile linkuri externe în practică, poți consulta exemplul de aici.