Personalizzare Classic Editor con Funzioni PHP e Filtri

Personalizzare Classic Editor con Funzioni PHP e Filtri

Classic Editor, grazie alla sua architettura basata su TinyMCE e alle numerose API di WordPress, offre un livello di personalizzazione profondo tramite codice PHP. Sviluppatori e amministratori avanzati possono modificare praticamente ogni aspetto dell’editor: dalla barra degli strumenti al comportamento dei contenuti, dalle opzioni di incolla alle dimensioni dell’area di testo. In questa guida tecnica esploreremo i filtri PHP più importanti per personalizzare Classic Editor, con esempi pratici pronti per l’uso nel tuo progetto.

Dove Inserire il Codice

Prima di addentrarci nei filtri e nelle funzioni, è importante stabilire dove posizionare il codice di personalizzazione. Hai due opzioni principali:

Plugin personalizzato (consigliato): crea un plugin custom dedicato alle personalizzazioni dell’editor. Questo approccio è il più robusto perché le tue modifiche sopravvivranno al cambio di tema. Crea un file PHP nella directory wp-content/plugins/ con l’header standard del plugin e inserisci il tuo codice al suo interno.

File functions.php del tema: se le personalizzazioni sono strettamente legate al tema attivo, puoi inserirle nel functions.php. Ricorda però che queste modifiche andranno perse se cambi tema. Se usi un tema figlio (child theme), inserisci il codice nel functions.php del tema figlio per proteggerlo dagli aggiornamenti del tema padre.

<?php
/**
 * Plugin Name: Custom Classic Editor
 * Description: Personalizzazioni per Classic Editor
 * Version: 1.0
 * Author: G Tech Group
 */

// Il codice di personalizzazione va qui

Il Filtro tiny_mce_before_init

Il filtro tiny_mce_before_init è il più potente e versatile per la personalizzazione di TinyMCE. Viene eseguito prima dell’inizializzazione dell’editor e riceve un array associativo con tutte le opzioni di configurazione. Modificando questo array, puoi controllare praticamente ogni aspetto del comportamento dell’editor.

function custom_tinymce_settings($init) {
    // Imposta l’altezza dell’editor a 500px
    $init[height] = 500;

    // Abilita il ridimensionamento verticale dell’editor
    $init[resize] = true;

    // Imposta il formato di incolla
    $init[paste_as_text] = true;

    // Abilita il conteggio parole
    $init[wordcount] = true;

    // Imposta la dimensione font predefinita
    $init[fontsize_formats] = 10px 12px 14px 16px 18px 20px 24px 28px 32px 36px;

    return $init;
}
add_filter(tiny_mce_before_init, custom_tinymce_settings);

Questo filtro ti permette di configurare decine di opzioni. Tra le più utili: block_formats per personalizzare i formati di blocco disponibili nel selettore (Paragrafo, Titolo 1, ecc.), toolbar1 e toolbar2 per definire la composizione delle righe della toolbar, content_css per caricare fogli di stile personalizzati nell’editor, e valid_elements per controllare quali tag HTML sono permessi.

Personalizzare i Formati di Blocco

Il selettore dei formati di blocco (il dropdown che mostra “Paragrafo”, “Titolo 1”, ecc.) può essere personalizzato per includere o escludere specifici formati. Ad esempio, potresti voler rimuovere “Preformattato” e “Indirizzo” se non vengono mai utilizzati, semplificando l’interfaccia:

function custom_block_formats($init) {
    $init[block_formats] = Paragrafo=p;Titolo 2=h2;Titolo 3=h3;Titolo 4=h4;Citazione=blockquote;
    return $init;
}
add_filter(tiny_mce_before_init, custom_block_formats);

Nota che abbiamo rimosso Titolo 1 (H1) dall’elenco. Questa è una best practice SEO: il tag H1 dovrebbe essere riservato al titolo dell’articolo (che WordPress genera automaticamente) e non dovrebbe essere utilizzato nel corpo del contenuto. Rimuovendolo dal selettore, previeni errori SEO da parte degli autori.

Stili Personalizzati nell’Editor

Puoi aggiungere un selettore di stili personalizzati che applica classi CSS predefinite al testo selezionato. Questo è particolarmente utile per creare elementi stilizzati riutilizzabili come box informativi, testo evidenziato, pulsanti e avvisi:

function custom_style_formats($init) {
    $style_formats = array(
        array(
            title   => Box Informativo,
            block   => div,
            classes => info-box,
            wrapper => true
        ),
        array(
            title   => Testo Evidenziato,
            inline  => span,
            classes => highlight
        ),
        array(
            title   => Pulsante CTA,
            inline  => a,
            classes => btn btn-primary
        ),
        array(
            title   => Nota Tecnica,
            block   => aside,
            classes => technical-note,
            wrapper => true
        ),
        array(
            title   => Codice Inline,
            inline  => code,
            classes => inline-code
        )
    );

    $init[style_formats] = json_encode($style_formats);
    return $init;
}
add_filter(tiny_mce_before_init, custom_style_formats);

Per vedere l’anteprima di questi stili nell’editor, devi caricare un foglio di stile dedicato con add_editor_style(). Questo foglio di stile dovrebbe contenere le regole CSS per le classi che hai definito nei formati personalizzati.

Il Filtro mce_css

Il filtro mce_css controlla i fogli di stile CSS caricati all’interno dell’editor TinyMCE. Puoi usarlo per aggiungere CSS personalizzati che rendono l’editor visivamente simile al front-end del tuo sito:

function custom_editor_css($mce_css) {
    if (!empty($mce_css)) {
        $mce_css .= ,;
    }
    $mce_css .= plugins_url(css/editor-custom.css, __FILE__);
    return $mce_css;
}
add_filter(mce_css, custom_editor_css);

Nel file editor-custom.css, definisci le regole CSS per allineare l’aspetto dell’editor al design del tuo sito. Ad esempio, puoi impostare la stessa famiglia di font, le stesse dimensioni del testo, gli stessi colori dei link e gli stessi stili per titoli e paragrafi. Questo offre agli autori un’anteprima accurata del risultato finale mentre scrivono.

Controllare gli Elementi HTML Consentiti

TinyMCE ha un sistema di filtraggio che controlla quali elementi HTML e attributi sono consentiti nel contenuto. L’opzione valid_elements definisce la whitelist degli elementi permessi. Per impostazione predefinita, WordPress configura una lista ragionevolmente permissiva, ma puoi restringerla o espanderla secondo le tue esigenze.

L’opzione extended_valid_elements è più pratica perché aggiunge elementi alla configurazione predefinita senza sovrascriverla:

function extend_valid_elements($init) {
    $custom_elements = span[id|class|style|data-*],
        . div[id|class|style|data-*|role],
        . iframe[src|width|height|frameborder|allowfullscreen|loading],
        . script[src|type|async|defer];

    if (isset($init[extended_valid_elements])) {
        $init[extended_valid_elements] .= , . $custom_elements;
    } else {
        $init[extended_valid_elements] = $custom_elements;
    }
    return $init;
}
add_filter(tiny_mce_before_init, extend_valid_elements);

Attenzione: consentire elementi come script e iframe introduce potenziali rischi di sicurezza. Abilita questi elementi solo se gli utenti che editano i contenuti sono affidabili (amministratori e redattori di fiducia). Per siti con molti autori esterni, è meglio mantenere restrizioni più strette.

Filtri Specifici di Classic Editor

Classic Editor fornisce anche filtri specifici del plugin che permettono un controllo aggiuntivo:

classic_editor_enabled_editors_for_post: permette di decidere quale editor usare per un singolo post basandosi su qualsiasi criterio (ID del post, meta dato, autore, ecc.). Utile per forzare un editor specifico per contenuti particolari.

classic_editor_enabled_editors_for_post_type: controlla quali editor sono disponibili per ciascun post type. Puoi disabilitare Gutenberg completamente per alcuni post type e lasciarlo attivo per altri.

classic_editor_plugin_settings: permette di modificare le impostazioni del plugin programmaticamente, utile per configurazioni multi-sito o ambienti dove le impostazioni devono essere forzate dal codice.

function force_classic_for_products($editors, $post_type) {
    if ($post_type === product) {
        $editors[block_editor] = false;
        $editors[classic_editor] = true;
    }
    return $editors;
}
add_filter(classic_editor_enabled_editors_for_post_type,
    force_classic_for_products, 10, 2);

Personalizzare il Comportamento dell’Incolla

Il comportamento dell’incolla è un aspetto cruciale dell’esperienza di editing. Quando un utente incolla testo da un documento Word o da una pagina web, TinyMCE deve decidere quanto della formattazione originale mantenere. Puoi controllare questo comportamento con diverse opzioni:

function custom_paste_settings($init) {
    // Rimuovi la formattazione di Word all’incolla
    $init[paste_remove_styles] = true;
    $init[paste_remove_spans] = true;
    $init[paste_strip_class_attributes] = all;

    // Converti automaticamente gli URL incollati in link
    $init[paste_convert_word_fake_lists] = true;

    return $init;
}
add_filter(tiny_mce_before_init, custom_paste_settings);

Queste impostazioni sono particolarmente importanti per siti con molti autori che copiano contenuti da fonti esterne. Senza un filtro appropriato, il testo incollato da Word può portarsi dietro centinaia di righe di stili inline e classi CSS proprietarie di Microsoft che inquinano il codice HTML del sito.

Aggiungere Plugin TinyMCE Personalizzati

TinyMCE ha un’architettura a plugin che permette di estendere le sue funzionalità con moduli JavaScript personalizzati. Il filtro mce_external_plugins permette di registrare plugin TinyMCE aggiuntivi:

function register_tinymce_plugins($plugins) {
    // Aggiungi il plugin per tabelle
    $plugins[table] = plugins_url(js/tinymce/table/plugin.min.js, __FILE__);
    // Aggiungi un plugin personalizzato
    $plugins[custom_templates] = plugins_url(js/tinymce/custom-templates.js, __FILE__);
    return $plugins;
}
add_filter(mce_external_plugins, register_tinymce_plugins);

Ogni plugin TinyMCE registrato può aggiungere pulsanti alla toolbar, menu contestuali, dialog personalizzati e funzionalità di elaborazione del contenuto. La creazione di plugin TinyMCE richiede conoscenze di JavaScript e della API TinyMCE, ma offre possibilità di personalizzazione praticamente illimitate.

Modificare l’Editor per Ruolo Utente

Una personalizzazione avanzata molto utile è la differenziazione dell’editor in base al ruolo dell’utente. Puoi mostrare toolbar diverse, abilitare o disabilitare funzionalità e applicare restrizioni specifiche per ogni ruolo:

function role_based_editor_config($init) {
    $user = wp_get_current_user();

    if (in_array(contributor, $user->roles)) {
        // I collaboratori vedono solo formattazione base
        $init[toolbar1] = bold,italic,bullist,numlist,link,unlink;
        $init[toolbar2] = ;
        $init[block_formats] = Paragrafo=p;Titolo 2=h2;Titolo 3=h3;
    } elseif (in_array(author, $user->roles)) {
        // Gli autori hanno più opzioni
        $init[toolbar1] = formatselect,bold,italic,bullist,numlist,blockquote,link,unlink,wp_more;
        $init[toolbar2] = strikethrough,hr,forecolor,pastetext,removeformat,charmap,wp_adv;
    }
    // Gli amministratori e gli editor mantengono la configurazione completa

    return $init;
}
add_filter(tiny_mce_before_init, role_based_editor_config);

Conclusioni

La personalizzazione di Classic Editor tramite filtri PHP offre un livello di controllo che pochi altri editor WYSIWYG possono eguagliare. Dalla configurazione della toolbar alla gestione dei contenuti HTML, dalla personalizzazione degli stili al controllo del comportamento per ruolo utente, le possibilità sono vastissime. La chiave è identificare le personalizzazioni che hanno un impatto reale sulla produttività del tuo team e implementarle in modo pulito e manutenibile.

Ricorda sempre di testare le personalizzazioni in un ambiente di staging prima di applicarle al sito in produzione, e di documentare ogni modifica per facilitare la manutenzione futura.

Hai bisogno di personalizzazioni avanzate per il tuo Classic Editor? Gli sviluppatori di G Tech Group possono creare soluzioni su misura per il tuo flusso editoriale, dai filtri PHP ai plugin TinyMCE personalizzati. Contattaci per discutere il tuo progetto.

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