Jak dostosować tekst w edytorze WordPress Gutenberg (obszar zaplecza)

Opublikowany: 2024-12-09

Edytor WordPress Gutenberg to potężne narzędzie do tworzenia treści, ale jego domyślny interfejs zaplecza nie zawsze spełnia specyficzne potrzeby każdego użytkownika.

Podczas gdy wielu użytkowników WordPressa koncentruje się na projektowaniu front-endu, obszar back-endu – sam edytor – oferuje również możliwości dostosowywania w celu usprawnienia przepływu pracy i poprawy komfortu edycji.

W tym artykule dowiesz się, jak dostosować tekst w edytorze Gutenberga, dodając niestandardowe fragmenty PHP i modyfikacje CSS, które możesz zastosować do dowolnego używanego motywu WordPress.

Niezależnie od tego, czy jesteś programistą, czy entuzjastą WordPressa, ten przewodnik pomoże Ci stworzyć dostosowane do Twoich potrzeb środowisko edycyjne.

Kroki, aby dostosować tekst w obszarze zaplecza edytora WordPress Gutenberg

Krok 1: Dodaj kod niestandardowy do plikufunctions.php

Najpierw musisz dodać niestandardowy kod, aby zmodyfikować edytor bloków WordPress (Gutenberg), aby uzyskać lepsze dopasowanie wizualne między edytorem (backendem) a interfejsem witryny.

Na pulpicie nawigacyjnym WordPress przejdź do Wygląd > Edytor plików motywów . Edytor plików motywów znajdziesz w menu Narzędzia , jeśli używasz motywu blokowego.

Po wejściu na stronę Edytora plików motywów wybierz plik plik funkcje.php . Następnie wklej poniższy fragment PHP na końcu zawartości plikufunction.php . Następnie zaktualizuj plik motywu, klikając przycisk Aktualizuj plik .

 // Dodaj niestandardowy CSS do edytora Gutenberga
funkcja niestandardowa_gutenberg_editor_styles() {
    add_theme_support('style-edytora'); // Włącz style edytora
    add_editor_style('niestandardowy styl edytora.css'); // Kolejkuj niestandardowy plik CSS
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Bezpośrednio kolejkuj niestandardowe style edytora
funkcja enqueue_custom_editor_css() {
    wp_enqueue_style(
        „niestandardowe style edytora”, 
        get_template_directory_uri() . „/niestandardowy edytor-style.css”,
        szyk(),
        „1,0”
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Krok 2: Dodaj plik CSS do katalogu motywów ( custom-editor-style.css )

Następnie musisz utworzyć plik CSS o nazwie custom-editor-style.css w katalogu motywów (np. wp-content/themes/your-theme/).

1: Zainstaluj menedżera plików dla WordPress

Aby utworzyć nazwę pliku CSS w katalogu motywów, możesz użyć dowolnego menedżera plików dla WordPressa dostępnego w katalogu wtyczek WordPress.

Zainstaluj i aktywuj go, a następnie rozpocznij tworzenie nowego pliku CSS o nazwie custom-editor-style.css w katalogu motywu. W tym przykładzie używamy wtyczki Advanced File Manager, a naszym obecnym motywem WordPress jest Astra, więc ścieżka będzie wyglądać następująco: wp-content/themes/astra/custom-editor-style.css

2: Dodaj fragment CSS do pliku custom-editor-style.css

Następnie dodaj niestandardowe style do tego pliku, aby zmodyfikować tekst w obszarze zaplecza Gutenberga. Skopiuj poniższy fragment kodu CSS i wklej go w polu wejściowym.

Oto fragment kodu CSS, którego możesz użyć:

 /* Dostosuj rozmiar czcionki akapitu i wysokość linii */
.editor-styles-wrapper p {
    rozmiar czcionki: 18 pikseli !ważne;
    wysokość linii: 1,6 !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}



/* Dostosuj tytuł wpisu redaktora (H1) */
.editor-post-title__input {
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    rozmiar czcionki: 40px !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 700 !ważne;
    wysokość linii: 1,6 !ważne;
}

/* Dostosuj bloki nagłówków (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    rozmiar czcionki: 36px !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 700 !ważne;
    wysokość linii: 1,6 !ważne;
}

.editor-styles-wrapper h3{
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    rozmiar czcionki: 32px !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 700 !ważne;
    wysokość linii: 1,6 !ważne;
}

.editor-styles-wrapper h4{
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    rozmiar czcionki: 30px !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 700 !ważne;
    wysokość linii: 1,6 !ważne;
}

.editor-styles-wrapper h5{
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    rozmiar czcionki: 28 pikseli !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 700 !ważne;
    wysokość linii: 1,6 !ważne;
}


/* Styl list nieuporządkowanych */
.editor-styles-wrapper ul {
    margines po lewej stronie: 20px;
    dopełnienie po lewej stronie: 20px;
    typ-stylu listy: dysk;
    rozmiar czcionki: 18 pikseli !ważne;
    wysokość linii: 1,6 !ważne;
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}

/* Styl elementów listy */
.editor-styles-wrapper ul li {
    margines na dole: 10px;
    rozmiar czcionki: 18 pikseli !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}

/* Zagnieżdżone style list */
.editor-styles-wrapper ul ul {
    margines po lewej stronie: 20px;
    typ-stylu listy: okrąg;
}

/* Dodatkowe style dla uporządkowanych list, jeśli zajdzie taka potrzeba */
.editor-styles-wrapper ol {
    margines po lewej stronie: 20px;
    dopełnienie po lewej stronie: 20px;
    typ listy: dziesiętny;
    rozmiar czcionki: 18 pikseli !ważne;
    wysokość linii: 1,6 !ważne;
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}

Po dodaniu fragmentu kodu CSS do pliku niestandardowego edytora-style.css możesz sprawdzić, czy dostosowania w obszarze zaplecza edytora Gutenberga zostały pomyślnie zastosowane.

Przejdź do edytora WordPress Gutenberg, tworząc nowy typ postu (strona lub post) lub wybierając istniejący.

Co zrobił kod?

1: Niestandardowy kod w plikufunctions.php

Pierwsza funkcja

 funkcja niestandardowa_gutenberg_editor_styles() {
    add_theme_support('style-edytora'); // Włącz style edytora
    add_editor_style('niestandardowy styl edytora.css'); // Kolejkuj niestandardowy plik CSS
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Ta funkcja mówi WordPressowi, aby użył niestandardowego pliku CSS ( custom-editor-style.css ) w edytorze Gutenberga.

Druga funkcja

 funkcja enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', // Unikalna nazwa arkusza stylów.
        get_template_directory_uri() . '/custom-editor-style.css', // Ścieżka do pliku CSS.
        array(), // Brak zależności.
        '1.0' // Wersja pliku CSS.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Ta funkcja bezpośrednio ładuje plik niestandardowego edytora-style.css do edytora.

Dlaczego dwie funkcje?

Pierwsza funkcja dodaje podstawową obsługę motywów do stylizacji edytora WordPress Gutenberg.
Druga funkcja kontroluje, jak i kiedy ładowany jest plik CSS.

2: Fragment CSS w pliku custom-editor-style.css

Dostosuj tekst akapitu (p)

 .editor-styles-wrapper p {
    rozmiar czcionki: 18 pikseli !ważne;
    wysokość linii: 1,6 !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}

Co robi:

Zmienia rozmiar czcionki akapitów na 18 pikseli.
Ustawia wysokość linii na 1,6 dla lepszej czytelności.
Stosuje czarny kolor tekstu #000000.
Używa normalnej grubości czcionki (400).
!important : Zapewnia, że te style zastępują wszelkie style będące w konflikcie.

Dostosuj tytuł posta (H1)

 .editor-post-title__input {
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    rozmiar czcionki: 40px !ważne;
    kolor: #000000 !ważne;
    grubość czcionki: 700;
    wysokość linii: 1,6;
}

Co robi:

Zmienia czcionkę tytułu postu na Arial z zastępczą czcionką bezszeryfową.
Ustawia duży rozmiar czcionki na 40 pikseli.
Zapewnia pogrubienie tekstu (grubość czcionki: 700) i użycie koloru czarnego.
Utrzymuje stałą wysokość linii.

Dostosuj bloki nagłówków (H2, H3, H4, H5)

 .editor-styles-wrapper h2 {
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    rozmiar czcionki: 36px !ważne;
    kolor: #000000 !ważne;
    grubość czcionki: 700;
    wysokość linii: 1,6;
}

Podobne style są stosowane dla H3, H4 i H5 ze zmniejszającymi się rozmiarami czcionek:

H2: 36 pikseli
H3: 32 piksele
H4: 30 pikseli
H5: 28 pikseli

Co robi:

Standaryzuje rodzinę czcionek, kolor, grubość i wysokość linii na wszystkich poziomach nagłówków.
Zapewnia przejrzystą hierarchię poprzez dostosowanie rozmiarów czcionek.

Styl list nieuporządkowanych (ul)

 .editor-styles-wrapper ul {
    margines po lewej stronie: 20px;
    dopełnienie po lewej stronie: 20px;
    typ-stylu listy: dysk;
    rozmiar czcionki: 18 pikseli !ważne;
    wysokość linii: 1,6 !ważne;
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}

Co robi:

Dodaje odstępy po lewej stronie list nieuporządkowanych (wcięcie).
Zapewnia, że elementy listy używają stylu punktora dyskowego.
Stosuje spójny rozmiar czcionki, kolor i wysokość linii, aby dopasować tekst akapitu.

Styl elementów listy (ul li)

 .editor-styles-wrapper ul li {
    margines na dole: 10px;
    rozmiar czcionki: 18 pikseli !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}

Co robi:

Dodaje odstępy między elementami listy dla zwiększenia czytelności (margines na dole: 10 pikseli).
Zapewnia dopasowanie stylów tekstu do ogólnego projektu.

Zagnieżdżony styl listy s

 .editor-styles-wrapper ul ul {
    margines po lewej stronie: 20px;
    typ-stylu listy: okrąg;
}

Co robi:

Dopasowuje wcięcie dla zagnieżdżonych list nieuporządkowanych.
Zmienia styl punktora dla list zagnieżdżonych na okrąg.

Styl list uporządkowanych (ol)

 .editor-styles-wrapper ol {
    margines po lewej stronie: 20px;
    dopełnienie po lewej stronie: 20px;
    typ listy: dziesiętny;
    rozmiar czcionki: 18 pikseli !ważne;
    wysokość linii: 1,6 !ważne;
    rodzina czcionek: 'Arial', bezszeryfowa !ważne;
    kolor: #000000 !ważne;
    waga czcionki: 400 !ważne;
}

Co robi:

Dodaje odstępy i używa numeracji dziesiętnej dla uporządkowanych list.
Zapewnia, że uporządkowane listy mają tę samą typografię, co akapity i listy nieuporządkowane.

Konkluzja

W tym artykule pokazano, jak łatwo można dostosować tekst w obszarze zaplecza edytora WordPress Gutenberg. Jak wspomnieliśmy na początku tego artykułu, dostosowanie tekstu w obszarze zaplecza Gutenberga poprawi jakość edycji. Poprawa możliwości edycji w WordPressie jest kluczowa, ponieważ bezpośrednio wpływa na naszą wydajność, kreatywność i satysfakcję jako twórców treści.

Implementacja metody opisanej w tym artykule (dodaj niestandardowy kod do plikufunctions.php i dodaj plik CSS do katalogu motywu) pozwala dostosować tekst w obszarze zaplecza Gutenberga, niezależnie od używanego motywu WordPress. Takie podejście zapewnia spójność zmian w różnych motywach i aktualizacjach.

Możesz dostosować wartości we fragmencie CSS, aby uzyskać najlepszy wygląd tekstu w obszarze zaplecza Gutenberga. Możesz modyfikować wartości właściwości, takie jak rozmiar czcionki, wysokość linii, kolor i marginesy, aby zapewnić czytelność i atrakcyjność wizualną treści. Na przykład zmiana rodziny czcionek na bardziej czytelny krój pisma lub ustawienie wysokości linii poprawiającej czytelność może poprawić jakość edycji. Ponadto dostosowanie właściwości dopełnienia i marginesów może pomóc w skuteczniejszym rozmieszczaniu elementów, zapobiegając wrażenie zbytniego przepełnienia układu.