Cum să personalizați textul în Editorul Gutenberg WordPress (zona de back-end)

Publicat: 2024-12-09

Editorul WordPress Gutenberg este un instrument puternic pentru crearea de conținut, dar interfața sa implicită de back-end nu satisface întotdeauna nevoile specifice ale fiecărui utilizator.

În timp ce mulți utilizatori WordPress se concentrează pe designul front-end, zona back-end - editorul în sine - oferă, de asemenea, oportunități de personalizare pentru a eficientiza fluxul de lucru și a îmbunătăți experiența de editare.

Acest articol va explora cum să personalizați textul în backend-ul editorului Gutenberg adăugând fragmente PHP personalizate și modificări CSS pe care le puteți aplica oricărei teme WordPress pe care o utilizați.

Indiferent dacă sunteți un dezvoltator sau un pasionat de WordPress, acest ghid vă va ajuta să creați un mediu de editare personalizat care funcționează pentru dvs.

Pași pentru a personaliza textul din zona de back-end a Editorului Gutenberg WordPress

Pasul 1: Adăugați codul personalizat în fișierul functions.php

În primul rând, trebuie să adăugați cod personalizat pentru a modifica editorul de blocuri WordPress (Gutenberg) pentru o mai bună aliniere vizuală între editor (backend) și front-end-ul site-ului web.

Pe tabloul de bord WordPress, accesați Aspect > Editor de fișiere tematice . Puteți găsi Theme File Editor în meniul Instrumente dacă utilizați o temă blocată.

Odată ce intri în pagina Editor de fișiere tematice, selectează fișierul functions.php . După aceea, lipiți fragmentul PHP de mai jos la sfârșitul conținutului fișierului function.php . Apoi, actualizați fișierul cu tema făcând clic pe butonul Actualizare fișier .

 // Adăugați CSS personalizat la editorul Gutenberg
funcția custom_gutenberg_editor_styles() {
    add_theme_support('editor-styles'); // Activează stilurile editorului
    add_editor_style('custom-editor-style.css'); // Puneți în coadă fișierul CSS personalizat
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Pune în coadă stilurile de editor personalizate direct
funcția enqueue_custom_editor_css() {
    wp_enqueue_style(
        „stiluri-editor personalizate”, 
        get_template_directory_uri() . '/custom-editor-style.css',
        matrice(),
        „1.0”
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Pasul 2: Adăugați fișierul CSS în directorul de teme ( custom-editor-style.css )

Apoi, trebuie să creați un fișier CSS numit custom-editor-style.css în directorul dvs. de teme (de exemplu, wp-content/themes/your-theme/).

1: Instalați un Manager de fișiere pentru WordPress

Pentru a crea un nume de fișier CSS în directorul dvs. de teme, puteți utiliza orice manager de fișiere pentru WordPress disponibil în directorul de pluginuri WordPress.

Instalați-l și activați-l, apoi începeți să creați un nou fișier CSS numit custom-editor-style.css în directorul dvs. de teme. Pentru acest exemplu, folosim pluginul Advanced File Manager, iar tema noastră actuală WordPress este Astra, așa că calea va fi astfel: wp-content/themes/astra/custom-editor-style.css

2: Adăugați fragmentul CSS în fișierul custom-editor-style.css

Apoi, adăugați stilurile personalizate la acest fișier pentru a modifica textul din zona de back-end a lui Gutenberg. Copiați fragmentul CSS de mai jos și inserați-l în câmpul de introducere.

Iată fragmentul CSS pe care îl puteți folosi:

 /* Personalizează dimensiunea fontului paragrafului și înălțimea liniei */
.editor-styles-wrapper p {
    dimensiunea fontului: 18px !important;
    înălțimea liniei: 1,6 !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}



/* Personalizează titlul postării editorului (H1) */
.editor-post-title__input {
    font-family: 'Arial', sans-serif !important;
    dimensiunea fontului: 40px !important;
    culoare: #000000 !important;
    font-weight: 700 !important;
    înălțimea liniei: 1,6 !important;
}

/* Personalizează blocurile de titlu (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    font-family: 'Arial', sans-serif !important;
    dimensiunea fontului: 36px !important;
    culoare: #000000 !important;
    font-weight: 700 !important;
    înălțimea liniei: 1,6 !important;
}

.editor-styles-wrapper h3{
    font-family: 'Arial', sans-serif !important;
    dimensiunea fontului: 32px !important;
    culoare: #000000 !important;
    font-weight: 700 !important;
    înălțimea liniei: 1,6 !important;
}

.editor-styles-wrapper h4{
    font-family: 'Arial', sans-serif !important;
    dimensiunea fontului: 30px !important;
    culoare: #000000 !important;
    font-weight: 700 !important;
    înălțimea liniei: 1,6 !important;
}

.editor-styles-wrapper h5{
    font-family: 'Arial', sans-serif !important;
    dimensiunea fontului: 28px !important;
    culoare: #000000 !important;
    font-weight: 700 !important;
    înălțimea liniei: 1,6 !important;
}


/* Stil pentru liste neordonate */
.editor-styles-wrapper ul {
    margine-stânga: 20px;
    padding-stânga: 20px;
    list-style-type: disc;
    dimensiunea fontului: 18px !important;
    înălțimea liniei: 1,6 !important;
    font-family: 'Arial', sans-serif !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}

/* Stil pentru elementele din listă */
.editor-styles-wrapper ul li {
    margine-jos: 10px;
    dimensiunea fontului: 18px !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}

/* Stiluri de liste imbricate */
.editor-styles-wrapper ul ul {
    margine-stânga: 20px;
    list-style-type: cerc;
}

/* Stiluri suplimentare pentru liste ordonate dacă este necesar */
.editor-styles-wrapper ol {
    margine-stânga: 20px;
    padding-stânga: 20px;
    list-style-type: zecimal;
    dimensiunea fontului: 18px !important;
    înălțimea liniei: 1,6 !important;
    font-family: 'Arial', sans-serif !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}

După ce ați adăugat fragmentul CSS la fișierul custom-editor-style.css , puteți verifica dacă personalizările din zona de back-end a editorului Gutenberg sunt aplicate cu succes.

Accesați editorul WordPress Gutenberg creând un nou tip de postare (pagină sau postare) sau selectând-o pe cea existentă.

Ce a făcut codul?

1: Cod personalizat în fișierul functions.php

Prima funcție

 funcția custom_gutenberg_editor_styles() {
    add_theme_support('editor-styles'); // Activează stilurile editorului
    add_editor_style('custom-editor-style.css'); // Puneți în coadă fișierul CSS personalizat
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Această funcție îi spune WordPress să folosească un fișier CSS personalizat ( custom-editor-style.css ) în editorul Gutenberg.

A doua funcție

 funcția enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', // Nume unic pentru foaia de stil.
        get_template_directory_uri() . '/custom-editor-style.css', // Calea către fișierul dvs. CSS.
        array(), // Fără dependențe.
        „1.0” // Versiunea fișierului CSS.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Această funcție încarcă direct fișierul custom-editor-style.css în editor.

De ce două funcții?

Prima funcție adaugă suport pentru tema de bază pentru stilarea editorului WordPress Gutenberg.
A doua funcție controlează cum și când este încărcat fișierul CSS.

2: fragment CSS în fișierul custom-editor-style.css

Personalizați textul paragrafului (p)

 .editor-styles-wrapper p {
    dimensiunea fontului: 18px !important;
    înălțimea liniei: 1,6 !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}

Ce face:

Schimbă dimensiunea fontului paragrafelor la 18px.
Setează înălțimea liniei la 1,6 pentru o mai bună lizibilitate.
Aplică culoarea neagră a textului #000000.
Utilizează o greutate normală a fontului (400).
!important : Se asigură că aceste stiluri suprascriu orice stiluri conflictuale.

Personalizați titlul postării (H1)

 .editor-post-title__input {
    font-family: 'Arial', sans-serif !important;
    dimensiunea fontului: 40px !important;
    culoare: #000000 !important;
    greutate font: 700;
    înălțimea liniei: 1,6;
}

Ce face:

Schimbă fontul titlului postării în Arial cu o alternativă sans-serif.
Setează o dimensiune mare a fontului de 40 px.
Se asigură că textul este aldine (greutatea fontului: 700) și folosește culoarea neagră.
Menține o înălțime constantă a liniei.

Personalizați blocurile de antet (H2, H3, H4, H5)

 .editor-styles-wrapper h2 {
    font-family: 'Arial', sans-serif !important;
    dimensiunea fontului: 36px !important;
    culoare: #000000 !important;
    greutate font: 700;
    înălțimea liniei: 1,6;
}

Stiluri similare sunt aplicate pentru H3, H4 și H5 cu dimensiuni descrescătoare ale fontului:

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

Ce face:

Standardizează familia de fonturi, culoarea, greutatea și înălțimea liniei la toate nivelurile de titlu.
Asigură o ierarhie clară prin ajustarea dimensiunilor fonturilor.

Stil pentru liste neordonate (ul)

 .editor-styles-wrapper ul {
    margine-stânga: 20px;
    padding-stânga: 20px;
    list-style-type: disc;
    dimensiunea fontului: 18px !important;
    înălțimea liniei: 1,6 !important;
    font-family: 'Arial', sans-serif !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}

Ce face:

Adaugă spațiere la stânga listelor neordonate (indentare).
Se asigură că elementele din listă folosesc stilul marcator al discului.
Aplica dimensiunea, culoarea și înălțimea liniei consecvente pentru a se potrivi cu textul paragrafului.

Stil pentru articolele din listă (ul li)

 .editor-styles-wrapper ul li {
    margine-jos: 10px;
    dimensiunea fontului: 18px !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}

Ce face:

Adaugă spațiere între elementele listei pentru lizibilitate (margine-jos: 10px).
Se asigură că stilurile de text se potrivesc cu designul general.

Stil listă imbricată s

 .editor-styles-wrapper ul ul {
    margine-stânga: 20px;
    list-style-type: cerc;
}

Ce face:

Ajustează indentarea pentru listele imbricate neordonate.
Modifică stilul marcatorilor pentru listele imbricate în cerc.

Stil pentru liste ordonate (ol)

 .editor-styles-wrapper ol {
    margine-stânga: 20px;
    padding-stânga: 20px;
    list-style-type: zecimal;
    dimensiunea fontului: 18px !important;
    înălțimea liniei: 1,6 !important;
    font-family: 'Arial', sans-serif !important;
    culoare: #000000 !important;
    font-weight: 400 !important;
}

Ce face:

Adaugă spațiere și folosește numerotarea zecimală pentru liste ordonate.
Se asigură că listele ordonate urmează aceeași tipografie ca și paragrafele și listele neordonate.

Concluzia

Acest articol arată cât de ușor puteți personaliza textul în zona de back-end a editorului WordPress Gutenberg. După cum am menționat la începutul acestui articol, personalizarea textului în zona de back-end a lui Gutenberg vă va îmbunătăți experiența de editare. Îmbunătățirea experienței de editare în WordPress este crucială, deoarece are un impact direct asupra eficienței, creativității și satisfacției noastre ca creatori de conținut.

Implementarea metodei din acest articol (adăugați codul personalizat în fișierul functions.php și adăugați fișierul CSS în directorul dvs. de teme) vă permite să personalizați textul în zona de back-end a lui Gutenberg, indiferent de tema WordPress pe care o utilizați. Această abordare asigură că modificările dvs. rămân consecvente pe diferite teme și actualizări.

Simțiți-vă liber să ajustați valorile în fragmentul CSS pentru a obține cel mai bun aspect al textului dvs. în zona de back-end a lui Gutenberg. Puteți modifica valorile proprietăților, cum ar fi dimensiunea fontului, înălțimea liniei, culoarea și marginile, pentru a vă asigura că conținutul este lizibil și atrăgător din punct de vedere vizual. De exemplu, schimbarea familiei de fonturi la un tip de literă mai lizibil sau setarea unei înălțimi a liniilor care îmbunătățește lizibilitatea poate îmbunătăți experiența de editare. În plus, ajustarea proprietăților de umplutură și margine poate ajuta la distanțarea mai eficientă a elementelor, prevenind aspectul să se simtă prea supraaglomerat.