Come personalizzare il testo nell'editor Gutenberg di WordPress (area back-end)

Pubblicato: 2024-12-09

L'editor Gutenberg di WordPress è un potente strumento per la creazione di contenuti, ma la sua interfaccia back-end predefinita non sempre soddisfa le esigenze specifiche di ogni utente.

Mentre molti utenti di WordPress si concentrano sulla progettazione front-end, l’area back-end – l’editor stesso – offre anche opportunità di personalizzazione per semplificare il flusso di lavoro e migliorare l’esperienza di editing.

Questo articolo esplorerà come personalizzare il testo nel backend dell'editor Gutenberg aggiungendo snippet PHP personalizzati e modifiche CSS che puoi applicare a qualsiasi tema WordPress che stai utilizzando.

Che tu sia uno sviluppatore o un appassionato di WordPress, questa guida ti aiuterà a creare un ambiente di editing su misura che funzioni per te.

Passaggi per personalizzare il testo nell'area back-end dell'editor Gutenberg di WordPress

Passaggio 1: aggiungi il codice personalizzato al file Functions.php

Innanzitutto, devi aggiungere un codice personalizzato per modificare l’editor a blocchi di WordPress (Gutenberg) per un migliore allineamento visivo tra l’editor (backend) e il front-end del sito web.

Sulla dashboard di WordPress, vai su Aspetto > Editor file tema . Puoi trovare Theme File Editor nel menu Strumenti se stai utilizzando un tema a blocchi.

Una volta entrati nella pagina Editor file tema, seleziona il file file funzioni.php . Successivamente, incolla lo snippet PHP di seguito alla fine del contenuto del file function.php . Successivamente, aggiorna il file del tema facendo clic sul pulsante Aggiorna file .

 // Aggiungi CSS personalizzato all'editor Gutenberg
funzione custom_gutenberg_editor_styles() {
    add_theme_support('editor-styles'); // Abilita gli stili dell'editor
    add_editor_style('custom-editor-style.css'); // Accoda il file CSS personalizzato
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Accoda direttamente gli stili dell'editor personalizzato
funzione enqueue_custom_editor_css() {
    wp_enqueue_style(
        'stili-editor-personalizzati', 
        get_template_directory_uri() . '/stile-editor-personalizzato.css',
        vettore(),
        '1.0'
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Passaggio 2: aggiungi il file CSS nella directory dei temi ( custom-editor-style.css )

Successivamente, devi creare un file CSS denominato custom-editor-style.css nella directory del tuo tema (ad esempio, wp-content/themes/your-theme/).

1: Installa un File Manager per WordPress

Per creare un nome file CSS nella directory del tema, puoi utilizzare qualsiasi file manager per WordPress disponibile nella directory dei plugin di WordPress.

Installalo e attivalo, quindi inizia a creare un nuovo file CSS denominato custom-editor-style.css nella directory del tema. Per questo esempio, utilizziamo il plugin Advanced File Manager e il nostro tema WordPress attuale è Astra, quindi il percorso sarà così: wp-content/themes/astra/custom-editor-style.css

2: aggiungi lo snippet CSS al file custom-editor-style.css

Successivamente, aggiungi gli stili personalizzati a questo file per modificare il testo nell'area back-end di Gutenberg. Copia lo snippet CSS qui sotto e incollalo nel campo di input.

Ecco lo snippet CSS che puoi utilizzare:

 /* Personalizza la dimensione del carattere del paragrafo e l'altezza della riga */
.editor-styles-wrapper p {
    dimensione carattere: 18px! importante;
    altezza della riga: 1,6 !importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}



/* Personalizza il titolo del post dell'editor (H1) */
.editor-post-titolo__input {
    font-family: 'Arial', sans-serif! importante;
    dimensione carattere: 40px! importante;
    colore: #000000 !importante;
    peso carattere: 700 !importante;
    altezza della riga: 1,6 !importante;
}

/* Personalizza i blocchi di intestazione (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    font-family: 'Arial', sans-serif! importante;
    dimensione carattere: 36px! importante;
    colore: #000000 !importante;
    peso carattere: 700 !importante;
    altezza della riga: 1,6 !importante;
}

.editor-styles-wrapper h3{
    font-family: 'Arial', sans-serif! importante;
    dimensione carattere: 32px !importante;
    colore: #000000 !importante;
    peso carattere: 700 !importante;
    altezza della riga: 1,6 !importante;
}

.editor-styles-wrapper h4{
    font-family: 'Arial', sans-serif! importante;
    dimensione carattere: 30px! importante;
    colore: #000000 !importante;
    peso carattere: 700 !importante;
    altezza della riga: 1,6 !importante;
}

.editor-styles-wrapper h5{
    font-family: 'Arial', sans-serif! importante;
    dimensione carattere: 28px !importante;
    colore: #000000 !importante;
    peso carattere: 700 !importante;
    altezza della riga: 1,6 !importante;
}


/* Stile per elenchi non ordinati */
.editor-styles-wrapper ul {
    margine sinistro: 20px;
    imbottitura a sinistra: 20px;
    tipo di stile elenco: disco;
    dimensione carattere: 18px! importante;
    altezza della riga: 1,6 !importante;
    font-family: 'Arial', sans-serif! importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}

/* Stile per gli elementi dell'elenco */
.editor-styles-wrapper ul li {
    margine inferiore: 10px;
    dimensione carattere: 18px! importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}

/* Stili degli elenchi nidificati */
.editor-styles-wrapper ul ul {
    margine sinistro: 20px;
    tipo di stile elenco: cerchio;
}

/* Stili aggiuntivi per elenchi ordinati, se necessario */
.editor-styles-wrapper ol {
    margine sinistro: 20px;
    imbottitura a sinistra: 20px;
    tipo stile elenco: decimale;
    dimensione carattere: 18px! importante;
    altezza della riga: 1,6 !importante;
    font-family: 'Arial', sans-serif! importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}

Dopo aver aggiunto lo snippet CSS al file custom-editor-style.css , puoi verificare se le tue personalizzazioni nell'area back-end dell'editor Gutenberg sono state applicate correttamente.

Vai all'editor Gutenberg di WordPress creando un nuovo tipo di post (pagina o post) o selezionando quello esistente.

Cosa ha fatto il codice?

1: codice personalizzato nel file Functions.php

Prima funzione

 funzione custom_gutenberg_editor_styles() {
    add_theme_support('editor-styles'); // Abilita gli stili dell'editor
    add_editor_style('custom-editor-style.css'); // Accoda il file CSS personalizzato
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Questa funzione indica a WordPress di utilizzare un file CSS personalizzato ( custom-editor-style.css ) nell'editor Gutenberg.

Seconda funzione

 funzione enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', // Nome univoco per il foglio di stile.
        get_template_directory_uri() . '/custom-editor-style.css', // Percorso del file CSS.
        array(), // Nessuna dipendenza.
        '1.0' // Versione del file CSS.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Questa funzione carica direttamente il file custom-editor-style.css nell'editor.

Perché due funzioni?

La prima funzione aggiunge il supporto di base del tema per lo styling dell'editor Gutenberg di WordPress.
La seconda funzione controlla come e quando viene caricato il file CSS.

2: snippet CSS nel file custom-editor-style.css

Personalizza il testo del paragrafo (p)

 .editor-styles-wrapper p {
    dimensione carattere: 18px! importante;
    altezza della riga: 1,6 !importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}

Cosa fa:

Modifica la dimensione del carattere dei paragrafi in 18px.
Imposta l'altezza della linea su 1,6 per una migliore leggibilità.
Applica il colore del testo nero #000000.
Utilizza un peso carattere normale (400).
!important : garantisce che questi stili sovrascrivano eventuali stili in conflitto.

Personalizza il titolo del post (H1)

 .editor-post-titolo__input {
    font-family: 'Arial', sans-serif! importante;
    dimensione carattere: 40px! importante;
    colore: #000000 !importante;
    peso carattere: 700;
    altezza della linea: 1,6;
}

Cosa fa:

Cambia il carattere del titolo del post in Arial con un fallback sans-serif.
Imposta una dimensione del carattere grande di 40px.
Garantisce che il testo sia in grassetto (peso carattere: 700) e utilizzi il colore nero.
Mantiene un'altezza di linea coerente.

Personalizza i blocchi di intestazione (H2, H3, H4, H5)

 .editor-styles-wrapper h2 {
    font-family: 'Arial', sans-serif! importante;
    dimensione carattere: 36px! importante;
    colore: #000000 !importante;
    peso carattere: 700;
    altezza della linea: 1,6;
}

Stili simili vengono applicati per H3, H4 e H5 con dimensioni dei caratteri decrescenti:

H2: 36px
H3: 32px
H4: 30px
H5: 28px

Cosa fa:

Standardizza la famiglia di caratteri, il colore, lo spessore e l'altezza della linea su tutti i livelli di intestazione.
Garantisce una gerarchia chiara regolando le dimensioni dei caratteri.

Stile per elenchi non ordinati (ul)

 .editor-styles-wrapper ul {
    margine sinistro: 20px;
    imbottitura a sinistra: 20px;
    tipo di stile elenco: disco;
    dimensione carattere: 18px! importante;
    altezza della riga: 1,6 !importante;
    font-family: 'Arial', sans-serif! importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}

Cosa fa:

Aggiunge spaziatura a sinistra degli elenchi non ordinati (rientro).
Garantisce che gli elementi dell'elenco utilizzino lo stile del punto elenco del disco.
Applica dimensioni del carattere, colore e altezza della linea coerenti per corrispondere al testo del paragrafo.

Stile per gli elementi dell'elenco (ul li)

 .editor-styles-wrapper ul li {
    margine inferiore: 10px;
    dimensione carattere: 18px! importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}

Cosa fa:

Aggiunge spaziatura tra gli elementi dell'elenco per migliorare la leggibilità (margine inferiore: 10px).
Garantisce che gli stili di testo corrispondano al design generale.

Stili di elenco nidificati s

 .editor-styles-wrapper ul ul {
    margine sinistro: 20px;
    tipo di stile elenco: cerchio;
}

Cosa fa:

Regola il rientro per gli elenchi non ordinati nidificati.
Cambia lo stile del punto elenco per gli elenchi nidificati in un cerchio.

Stile per elenchi ordinati (ol)

 .editor-styles-wrapper ol {
    margine sinistro: 20px;
    imbottitura a sinistra: 20px;
    tipo stile elenco: decimale;
    dimensione carattere: 18px! importante;
    altezza della riga: 1,6 !importante;
    font-family: 'Arial', sans-serif! importante;
    colore: #000000 !importante;
    peso carattere: 400 !importante;
}

Cosa fa:

Aggiunge la spaziatura e utilizza la numerazione decimale per gli elenchi ordinati.
Garantisce che gli elenchi ordinati seguano la stessa tipografia dei paragrafi e degli elenchi non ordinati.

La linea di fondo

Questo articolo mostra con quanta facilità puoi personalizzare il testo nell'area back-end dell'editor Gutenberg di WordPress. Come accennato all'inizio di questo articolo, la personalizzazione del testo nell'area back-end di Gutenberg migliorerà la tua esperienza di modifica. Migliorare l’esperienza di editing in WordPress è fondamentale perché ha un impatto diretto sulla nostra efficienza, creatività e soddisfazione come creatori di contenuti.

Implementare il metodo in questo articolo (aggiungere il codice personalizzato al file Functions.php e aggiungere il file CSS nella directory del tema) ti consente di personalizzare il testo nell'area back-end di Gutenberg, indipendentemente dal tema WordPress che utilizzi. Questo approccio garantisce che le modifiche rimangano coerenti tra temi e aggiornamenti diversi.

Sentiti libero di regolare i valori nello snippet CSS per ottenere il miglior aspetto del tuo testo nell'area back-end di Gutenberg. Puoi modificare i valori delle proprietà come la dimensione del carattere, l'altezza della linea, il colore e i margini per garantire che il contenuto sia leggibile e visivamente accattivante. Ad esempio, la modifica della famiglia di caratteri in un carattere tipografico più leggibile o l'impostazione di un'altezza di riga che migliori la leggibilità possono migliorare l'esperienza di modifica. Inoltre, la regolazione delle proprietà di riempimento e margine può aiutare a distanziare gli elementi in modo più efficace, evitando che il layout sembri troppo sovraffollato.