Il set standard di pulsanti di formattazione nell'editor di WordPress è familiare a tutti: grassetto, corsivo, elenchi, citazioni. Ma quando devi inserire regolarmente un pulsante di un colore specifico, un blocco di avviso o la didascalia di un'immagine in una cornice brandizzata, la routine colpisce in pieno. Ogni volta: passi alla modalità testo, scrivi style="", copi le classi da un foglietto. Un pulsante è uscito blu, un altro azzurro. Un blocco con l'ombra, un altro senza.

Il problema non è l'assenza di strumenti, ma che il menu a tendina "Formati" in TinyMCE è nascosto per impostazione predefinita. E anche se lo attivi, è vuoto: WordPress non sa quali stili ti servono. Ma puoi aggiungerli lì.

Ci sono tre approcci: tramite codice in functions.php, tramite un plugin con un costruttore visuale e tramite il meccanismo nativo dell'editor a blocchi register_block_style(). Tutti e tre funzionano e coprono scenari diversi: dal controllo manuale su ogni pixel al "clicca e applica".

💡 Panoramica rapida:

• Attiviamo il menu a tendina "Formati" nell'editor classico con il filtro mce_buttons_1 e lo popoliamo con i nostri stili tramite tiny_mce_before_init, con codice passo passo all'interno.
• Creiamo editor-style.css per l'anteprima dal vivo direttamente nell'editor: un pulsante appare come un pulsante già prima della pubblicazione.
• Installiamo TinyMCE Custom Styles, un costruttore GUI per formati senza toccare codice, con file CSS auto-generati.
• Vediamo il percorso nativo per Gutenberg: registrare varianti di blocco tramite register_block_style(), collegare gli stili tramite theme.json o wp_add_inline_style().

Cosa sono gli stili personalizzati e perché ti servono

Uno stile personalizzato è un preset CSS che applichi a un frammento selezionato tramite il menu a tendina dell'editor. Invece di racchiudere un paragrafo in <span style="..."> per la centesima volta, scegli "Evidenziazione" nel menu "Formati" e ottieni un'evidenziazione gialla con angoli arrotondati. Un clic.

Tre motivi per configurare questa cosa una volta e dimenticarsene:

• Coerenza. Tutti i pulsanti, gli avvisi e le didascalie hanno lo stesso aspetto da una pubblicazione all'altra. Il design non deraglia.
• Velocità. L'editor non scava nel CSS e non copia classi magiche dal blocco note, preme solo un pulsante.
• Sicurezza. Nessuno sovrascrive accidentalmente il markup tramite stili inline in modalità testo.

Scenari tipici: pulsante call-to-action (theme-button), blocco "Importante" con icona e bordo colorato, elenco puntato con segni di spunta, didascalia immagine in stile brandizzato, evidenziazione del codice all'interno di un paragrafo.

Metodo 1: Codice, tramite functions.php e editor-style.css

Il percorso per chi non ha paura di aprire functions.php una volta. Risultato: il menu a tendina "Formati" appare nella barra degli strumenti di TinyMCE e al suo interno ci sono i tuoi stili. Dieci righe di PHP, un file CSS, zero plugin superflui.

Passo 1. Attivare il pulsante "Formati"

Per impostazione predefinita, l'elenco a tendina dei formati styleselect è nascosto. Questo filtro lo riporta sulla prima riga dell'editor. Inserisci il codice nel functions.php del tema attivo o, più correttamente, del tema child:

1
function myprefix_mce_buttons_1( $buttons ) {
2
    array_unshift( $buttons, 'styleselect' );
3
    return $buttons;
4
}
5
add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

L'hook mce_buttons_1 aggiunge il pulsante alla prima riga della barra degli strumenti. Se preferisci la seconda o la terza, usa mce_buttons_2 o mce_buttons_3.

Salvato functions.php, aperto un qualsiasi articolo, è apparso un menu a tendina "Formati" nella riga superiore a sinistra. Ancora vuoto per ora.

Passo 2. Registrare i propri stili

Ora popoliamo il menu con formati reali. Aggiungi un secondo filtro allo stesso functions.php:

1
function myprefix_add_format_styles( $init_array ) {
2
    $style_formats = array(
3
        array(
4
            'title'    => __( 'Theme Button', 'text-domain' ),
5
            'selector' => 'a',
6
            'classes'  => 'theme-button',
7
        ),
8
        array(
9
            'title'    => __( 'Highlight', 'text-domain' ),
10
            'inline'   => 'span',
11
            'classes'  => 'text-highlight',
12
        ),
13
    );
14
    $init_array['style_formats'] = json_encode( $style_formats );
15
    return $init_array;
16
}
17
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Cosa significano i parametri di ciascun elemento:

• title, il nome che l'editor vedrà nel menu a tendina.
• selector, il tag HTML a cui viene applicato lo stile. 'a' significa che "Pulsante tema" funzionerà solo sui link.
• inline, racchiude il testo selezionato in un tag (di solito span) con la classe specificata. Perfetto per evidenziare una parola o una frase all'interno di un paragrafo.
• classes, classe CSS (o classi separate da spazio) aggiunta all'elemento.

Aggiungi i tuoi elementi all'array seguendo lo stesso modello. L'elenco completo dei parametri accettati è nella documentazione di TinyMCE su developer.wordpress.org.

Passo 3. Scrivere il CSS per il frontend

Il menu è popolato, ma il browser non sa ancora che aspetto abbia .theme-button. Aggiungi il CSS al foglio di stile del tema (o del tema child):

1
.theme-button {
2
    display: inline-block;
3
    padding: 10px 15px;
4
    color: #fff;
5
    background: #1796c6;
6
    text-decoration: none;
7
}
8
.theme-button:hover {
9
    text-decoration: none;
10
    opacity: 0.8;
11
}
12
.text-highlight {
13
    background: #FFFF00;
14
}

Dopo aver salvato, il pulsante è stilizzato nel frontend. Ma nell'admin, l'editor non lo mostra ancora.

Passo 4. Aggiungere editor-style.css per l'anteprima nell'editor

Per visualizzare gli stili direttamente nell'editor visuale prima della pubblicazione, serve un file editor-style.css separato. WordPress può caricarlo:

1
function myprefix_theme_add_editor_styles() {
2
    add_editor_style( 'editor-style.css' );
3
}
4
add_action( 'init', 'myprefix_theme_add_editor_styles' );

Crea un file editor-style.css nella root del tema e copiaci dentro il CSS del punto 3. Se lavori con un tema di terzi, crea questo file nel child theme: WordPress controllerà prima il child theme e, trovando lì editor-style.css, lo caricherà al posto di quello del parent.

Risultato: testo selezionato, scelto «Highlight», l'evidenziazione gialla è visibile subito nell'editor. Cliccato su un link, scelto «Theme Button», diventa un pulsante blu.

Metodo 2: plugin TinyMCE Custom Styles, senza toccare codice

Se non vuoi pasticciare con functions.php ma ti servono degli stili, c'è un plugin già pronto. Fa la stessa cosa tramite un'interfaccia visuale nell'amministrazione.

Installa e attiva TinyMCE Custom Styles. A giugno 2026, il plugin ha oltre 8.000 installazioni attive e supporta il blocco Gutenberg classico a partire dalla versione 1.1.1. L'ultimo aggiornamento (v1.1.5, giugno 2024) ha chiuso delle vulnerabilità. L'autore, Tim Reeves, sta cercando apertamente un successore, ma il codice è stabile: il plugin non richiama dipendenze esterne e non tocca il database oltre la propria tabella delle opzioni.

Il plugin compare nell'elenco generale dei plugin installati. Assicurati che sia attivo prima di passare alla configurazione.

Dopo l'attivazione, vai su Impostazioni → TinyMCE Custom Styles. La prima schermata propone dove salvare i file CSS. Consiglio la terza opzione: creare una cartella separata (ad esempio tinymce-styles) in wp-content/uploads. Questo proteggerà gli stili quando aggiorni il tema o il plugin stesso. Clicca «Salva impostazioni».

La prima schermata mostra tre opzioni per il posizionamento dei CSS. Scegli la terza e imposta un nome per la cartella, ad esempio tinymce-styles.

Scorri la pagina in basso e clicca «Aggiungi nuovo stile». Si aprirà un costruttore dove impostare:

• Titolo, il nome nel menu a tendina (ad esempio «Pulsante grande blu»).
• Tipo, basato su selettore (si applica a un tag specifico), inline (racchiude in uno span) o blocco.
• Classi e proprietà CSS, direttamente nell'interfaccia, senza file.

Dopo aver salvato le impostazioni, clicca «Aggiungi nuovo stile» in fondo alla pagina. Si aprirà un costruttore con i campi per titolo, tipo e proprietà CSS.

Salva, apri un articolo qualsiasi e trova il menu a tendina «Formats» nella seconda riga della barra degli strumenti. Il nuovo stile è già lì. Selezioni il testo, lo sceglie, si applica all'istante.

Il vantaggio del plugin: i file CSS (editor-style.css e editor-style-shared.css) vengono creati automaticamente nella cartella selezionata. Li prelevi via FTP, li modifichi in un editor comodo e li ricarichi, senza toccare una sola riga del functions.php.

Metodo 3: register_block_style(), percorso nativo per Gutenberg

I due metodi precedenti funzionano nell'editor classico TinyMCE e nel suo blocco Classico dentro Gutenberg. Ma se vivi esclusivamente nell'editor a blocchi, c'è un percorso più diretto: register_block_style().

Questa funzione registra una variante di stile per un blocco specifico, pulsante, titolo, citazione, gruppo. La variante appare nel pannello laterale del blocco e l'editor la applica con un clic.

Esempio: aggiungiamo una variante «Fancy» a un pulsante con sfondo giallo e angoli arrotondati:

1
function myprefix_register_block_styles() {
2
    register_block_style(
3
        'core/button',
4
        array(
5
            'name'  => 'fancy',
6
            'label' => __( 'Fancy', 'text-domain' ),
7
        )
8
    );
9
}
10
add_action( 'init', 'myprefix_register_block_styles' );

Il CSS si collega tramite theme.json (per i temi a blocchi moderni) oppure con wp_add_inline_style():

1
.is-style-fancy .wp-block-button__link {
2
    background-color: #f0c040;
3
    color: #fff;
4
    border: none;
5
    border-radius: 15px;
6
    padding: 10px 20px;
7
}

Questo approccio non dipende da TinyMCE e funziona nativamente in Gutenberg. Per i temi con theme.json (tutti i temi a blocchi moderni), gli stili possono essere descritti direttamente nella sezione styles.blocks, senza una sola riga di PHP.

⁉️🤔 Domande frequenti

I formati non compaiono nell'editor. Cosa c'è che non va?

Per prima cosa, vai in Impostazioni → Advanced Editor Tools e verifica che il pulsante «Formats» non sia stato rimosso dalla barra degli strumenti. AET intercetta il controllo delle righe di pulsanti e il tuo filtro mce_buttons_1 potrebbe essere ignorato finché non aggiungi esplicitamente il pulsante dall'interfaccia del plugin. Controlla anche che il filtro mce_buttons_1 sia registrato e restituisca un array con l'elemento 'styleselect'. Svuota la cache del browser e del server: spesso il problema è solo lì.

Posso associare uno stile a più selettori contemporaneamente?

Sì. Invece della stringa 'selector' => 'a', passa un array: 'selector' => 'a, button, span'. TinyMCE applicherà lo stile al primo tag genitore corrispondente della lista. In pratica è utile quando uno stesso stile visivo deve funzionare sia sui link sia sui pulsanti <button>. L'ordine nell'array conta: se il testo selezionato è dentro un link annidato in un div e i selettori indicano 'div, a', lo stile si applicherà a div, non ad a. Metti prima i selettori più specifici.

In cosa differisce editor-style.css da editor-style-shared.css?

Il plugin TinyMCE Custom Styles crea due file. editor-style.css si carica solo nell'editor TinyMCE. editor-style-shared.css si carica sia nell'editor sia nel frontend: gli stili che contiene sono visibili ai visitatori del sito. Se uno stile serve solo per comodità di editing, mettilo in editor-style.css. Se lo stile deve funzionare sul sito, in editor-style-shared.css. Con l'approccio manuale, l'analogo del file condiviso è il foglio di stile principale del tema, mentre editor-style.css (un file separato registrato con add_editor_style()) influisce solo sull'anteprima dentro TinyMCE.

È obbligatorio creare un tema child per queste modifiche?

No, il codice funziona anche nel functions.php del tema principale. Ma al prossimo aggiornamento del tema tutte le modifiche saranno sovrascritte. La regola è semplice: ogni personalizzazione via functions.php va in un tema child, è un'assicurazione contro la perdita delle modifiche. Se non hai ancora un tema child, crealo in dieci minuti seguendo la guida al tema child: due file, style.css con l'intestazione e functions.php con l'import degli stili del tema padre, e i tuoi formati personalizzati sopravvivranno a qualsiasi aggiornamento.

Il plugin non viene aggiornato dal 2024. Devo installarlo?

A giugno 2026, il plugin TinyMCE Custom Styles resta nel catalogo WordPress.org con oltre 8.000 installazioni attive. L'autore cerca apertamente un successore, ma il codice non è abbandonato: l'ultimo aggiornamento (v1.1.5, giugno 2024) ha chiuso delle vulnerabilità. C'è un rischio, ma è gestibile: il plugin non importa dipendenze esterne e non scava in profondità nel database. Se in futuro il plugin smettesse di essere aggiornato, puoi sempre trasferire gli stili nel metodo manuale (punti da 1 a 4 sopra) senza perdere il CSS. Un'alternativa con sviluppo attivo è Advanced Editor Tools (AET) di Automattic, ma la sua opzione «Create CSS classes menu» spesso ingombra il menu con classi superflue. TinyMCE Custom Styles dà un controllo manuale su ogni elemento, quindi non sono concorrenti ma piuttosto si completano a vicenda.

Codice, plugin o blocchi: cosa scegliere per il tuo scenario

La scelta si riduce a due domande: in quale editor lavori e se sei pronto ad aprire functions.php una volta.

Lavori nell'editor classico o nel blocco Classico di Gutenberg e non hai paura del codice: scegli il metodo 1. Dieci righe di PHP, un file CSS, controllo totale.

Vuoi un costruttore visuale di formati senza toccare codice e con generazione automatica del CSS: installa TinyMCE Custom Styles. Tieni presente il rischio di supporto a lungo termine, ma a oggi il plugin mantiene ciò che promette.

Vivi nell'editor a blocchi: impara register_block_style(). Questo percorso è nativo per Gutenberg, non dipende da TinyMCE ed è supportato dal core di WordPress.

In ognuno dei tre scenari ottieni la cosa principale: formattazione in un clic invece della copia manuale di classi e stili inline. E questo significa un'ora o due di tempo risparmiato al mese su qualsiasi sito con pubblicazione regolare.