Classic Editor e TinyMCE: Personalizzare la Barra degli Strumenti

Classic Editor e TinyMCE: Personalizzare la Barra degli Strumenti

La barra degli strumenti di TinyMCE è il cuore dell’esperienza di editing con Classic Editor. Personalizzarla significa adattare l’editor alle proprie esigenze, aggiungendo i pulsanti più utilizzati, rimuovendo quelli superflui e organizzando gli strumenti in modo logico ed efficiente. In questa guida esploreremo tutte le possibilità di personalizzazione della toolbar di TinyMCE, dalle opzioni più semplici accessibili dalla dashboard fino alle modifiche avanzate tramite codice PHP.

La Struttura della Barra degli Strumenti di TinyMCE

TinyMCE, il motore che alimenta Classic Editor, organizza la sua barra degli strumenti in righe (chiamate anche “toolbar”). WordPress configura di default due righe di strumenti. La prima riga, sempre visibile, contiene i pulsanti più utilizzati: grassetto, corsivo, elenchi puntati e numerati, citazione, allineamento del testo, inserimento link, tag “Leggi tutto” e il pulsante per mostrare/nascondere la seconda riga.

La seconda riga, inizialmente nascosta e accessibile tramite il pulsante “Barra degli strumenti” (l’icona con le righe orizzontali), contiene strumenti aggiuntivi: selettore di formato (Paragrafo, Titolo 1-6), sottolineato, testo barrato, colore del testo, incolla come testo semplice, rimuovi formattazione, caratteri speciali, diminuisci/aumenta rientro, annulla/ripeti e scorciatoia da tastiera.

Ogni pulsante è identificato da un nome interno univoco che viene utilizzato nei filtri PHP per aggiungere o rimuovere elementi dalla toolbar. Conoscere questi nomi è fondamentale per qualsiasi personalizzazione avanzata.

Il Pulsante Kitchen Sink

Il pulsante “Kitchen Sink” (letteralmente “lavello della cucina”, un’espressione inglese che significa “tutto il possibile”) è il toggle che mostra o nasconde la seconda riga della toolbar. Il suo nome interno è wp_adv. Quando l’utente clicca su questo pulsante, la seconda riga si espande rivelando gli strumenti aggiuntivi.

Un suggerimento utile: WordPress ricorda lo stato del Kitchen Sink tra le sessioni. Se un utente lo apre, resterà aperto anche nelle sessioni successive. Questa preferenza è salvata nel profilo utente tramite un meta dato chiamato wp_user_settings.

Personalizzazione Base: Il Filtro mce_buttons

Il modo più diretto per personalizzare la toolbar è utilizzare i filtri mce_buttons e mce_buttons_2 nel file functions.php del tema attivo o in un plugin personalizzato. Il filtro mce_buttons controlla la prima riga della toolbar, mentre mce_buttons_2 controlla la seconda riga.

Per aggiungere un pulsante alla prima riga, puoi usare un codice simile a questo nel tuo functions.php:

function custom_mce_buttons_row1($buttons) {
    $buttons[] = superscript;
    $buttons[] = subscript;
    return $buttons;
}
add_filter(mce_buttons, custom_mce_buttons_row1);

Questo esempio aggiunge i pulsanti per apice e pedice alla fine della prima riga. Per rimuovere un pulsante, cerca il suo nome nell’array e rimuovilo con array_diff o unset. Ad esempio, per rimuovere il pulsante del testo barrato dalla seconda riga:

function custom_mce_buttons_row2($buttons) {
    $remove = array(strikethrough);
    return array_diff($buttons, $remove);
}
add_filter(mce_buttons_2, custom_mce_buttons_row2);

Aggiungere una Terza e Quarta Riga

TinyMCE supporta fino a quattro righe di strumenti, ma WordPress ne utilizza solo due per impostazione predefinita. Puoi aggiungere una terza e quarta riga utilizzando i filtri mce_buttons_3 e mce_buttons_4. Queste righe aggiuntive sono sempre visibili (non sono controllate dal Kitchen Sink) e appaiono sotto la seconda riga.

function custom_mce_buttons_row3($buttons) {
    $buttons[] = fontselect;
    $buttons[] = fontsizeselect;
    $buttons[] = styleselect;
    return $buttons;
}
add_filter(mce_buttons_3, custom_mce_buttons_row3);

Aggiungere righe extra è utile quando hai molti pulsanti personalizzati e vuoi mantenere l’organizzazione della toolbar chiara e ordinata. Tuttavia, troppe righe possono ridurre lo spazio disponibile per la scrittura, specialmente su schermi più piccoli.

Nomi dei Pulsanti TinyMCE Predefiniti

Per personalizzare efficacemente la toolbar, devi conoscere i nomi interni dei pulsanti. Ecco l’elenco completo dei pulsanti più comuni disponibili in TinyMCE con WordPress:

Formattazione testo: bold (grassetto), italic (corsivo), underline (sottolineato), strikethrough (barrato), superscript (apice), subscript (pedice), removeformat (rimuovi formattazione).

Allineamento: alignleft, aligncenter, alignright, alignjustify.

Elenchi: bullist (elenco puntato), numlist (elenco numerato), indent (aumenta rientro), outdent (diminuisci rientro).

Inserimento: link (inserisci link), unlink (rimuovi link), charmap (caratteri speciali), hr (linea orizzontale), wp_more (tag Leggi tutto), wp_page (interruzione di pagina).

Cronologia: undo (annulla), redo (ripeti).

Visualizzazione: wp_adv (Kitchen Sink), fullscreen (schermo intero), wp_help (scorciatoie da tastiera).

Tabelle: table (inserisci tabella — richiede il plugin TinyMCE table).

Riordinare i Pulsanti

L’ordine dei pulsanti nella toolbar corrisponde all’ordine degli elementi nell’array. Per riordinare i pulsanti, puoi ricostruire l’intero array nell’ordine desiderato:

function reorder_mce_buttons($buttons) {
    return array(
        formatselect, bold, italic, underline,
        separator,
        bullist, numlist,
        separator,
        link, unlink,
        separator,
        wp_adv
    );
}
add_filter(mce_buttons, reorder_mce_buttons);

Nota l’uso di separator per aggiungere separatori visivi tra gruppi logici di pulsanti. I separatori aiutano gli utenti a trovare rapidamente lo strumento che cercano, migliorando l’usabilità dell’editor.

Personalizzazione del Selettore Formati

Il selettore dei formati (il menu a tendina che mostra “Paragrafo”, “Titolo 1”, “Titolo 2”, ecc.) può essere personalizzato tramite il filtro tiny_mce_before_init. Puoi aggiungere formati personalizzati che applicano classi CSS specifiche al testo selezionato:

function custom_mce_formats($init) {
    $style_formats = array(
        array(
            title => Evidenziato,
            inline => span,
            classes => text-highlight
        ),
        array(
            title => Nota,
            block => div,
            classes => content-note,
            wrapper => true
        )
    );
    $init[style_formats] = json_encode($style_formats);
    return $init;
}
add_filter(tiny_mce_before_init, custom_mce_formats);

Per vedere questi formati personalizzati nell’editor, devi aggiungere il pulsante styleselect alla toolbar e creare le corrispondenti regole CSS sia nel front-end che nell’editor tramite add_editor_style().

Aggiungere Stili CSS all’Editor

Per rendere visibili le personalizzazioni di formattazione direttamente nell’editor, WordPress offre la funzione add_editor_style(). Questa funzione carica un file CSS aggiuntivo all’interno dell’iframe di TinyMCE, permettendo di stilizzare i contenuti esattamente come appariranno nel front-end.

function custom_editor_style() {
    add_editor_style(css/editor-style.css);
}
add_action(admin_init, custom_editor_style);

Nel file editor-style.css, definisci le regole CSS per i tuoi formati personalizzati. In questo modo, quando un autore applica il formato “Evidenziato” al testo nell’editor, vedrà immediatamente lo stile applicato, ottenendo un’anteprima accurata del risultato finale.

Personalizzazione per Ruolo Utente

Una personalizzazione avanzata molto utile è mostrare toolbar diverse in base al ruolo dell’utente. Ad esempio, potresti voler dare agli amministratori accesso a tutti i pulsanti mentre gli autori vedono solo una selezione semplificata:

function role_based_mce_buttons($buttons) {
    $user = wp_get_current_user();
    if (!in_array(administrator, $user->roles)) {
        $remove = array(wp_more, charmap, hr);
        $buttons = array_diff($buttons, $remove);
    }
    return $buttons;
}
add_filter(mce_buttons, role_based_mce_buttons);

Questa tecnica è particolarmente utile in contesti editoriali dove vuoi semplificare l’interfaccia per i collaboratori occasionali mantenendo tutte le funzionalità per gli utenti avanzati.

Best Practice per la Personalizzazione

Quando personalizzi la toolbar di TinyMCE, tieni a mente alcune best practice fondamentali. Evita di sovraccaricare la toolbar con troppi pulsanti: una barra degli strumenti affollata è controproducente perché rende difficile trovare lo strumento giusto. Raggruppa i pulsanti in modo logico usando i separatori. Testa sempre le personalizzazioni su schermi di diverse dimensioni per assicurarti che la toolbar rimanga usabile anche su laptop con schermi più piccoli.

Inserisci le personalizzazioni in un plugin personalizzato piuttosto che nel functions.php del tema: in questo modo, le tue modifiche sopravvivranno al cambio di tema. Documenta le personalizzazioni effettuate per facilitare la manutenzione futura e l’eventuale passaggio a un altro sviluppatore.

Conclusioni

La personalizzazione della barra degli strumenti di TinyMCE in Classic Editor è un’operazione che può migliorare significativamente l’efficienza del tuo flusso di lavoro editoriale. Che tu scelga di utilizzare un plugin come TinyMCE Advanced per una personalizzazione visuale o preferisca il controllo granulare offerto dai filtri PHP, le possibilità sono ampie e flessibili. L’obiettivo è creare un’interfaccia che contenga esattamente gli strumenti di cui hai bisogno, né più né meno.

Vuoi personalizzare l’editor del tuo sito WordPress per adattarlo al flusso di lavoro del tuo team? Il team di G Tech Group può configurare Classic Editor e TinyMCE su misura per le tue esigenze. Contattaci per scoprire come possiamo ottimizzare la tua esperienza editoriale.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

• Come Installare Elementor su WordPress
• Come Installare e Configurare WP Rocket
• Come Installare e Configurare SEOPress
• Come Installare e Configurare UpdraftPlus