Standardowy zestaw przycisków formatowania w edytorze WordPress zna każdy: bold, italic, listy, cytaty. Ale gdy trzeba regularnie wstawiać przycisk w konkretnym kolorze, blok z ostrzeżeniem albo podpis pod zdjęciem w firmowej ramce, rutyna włącza się na całego. Za każdym razem: przełączyć się w tryb tekstowy, wpisać style="", skopiować klasy ze ściągawki. Jeden przycisk wyszedł granatowy, drugi jasnoniebieski. Jeden blok z cieniem, drugi bez.

Problem nie leży w braku narzędzi, tylko w tym, że rozwijane menu „Formaty" w TinyMCE jest domyślnie ukryte. A nawet jeśli je włączyć, jest puste: WordPress nie wie, jakich stylów Pan/Pani potrzebuje. Ale można je tam dodać.

Są trzy podejścia: przez kod w functions.php, przez wtyczkę z wizualnym konstruktorem i przez natywny mechanizm edytora blokowego register_block_style(). Wszystkie trzy działają i pokrywają różne scenariusze: od ręcznej kontroli nad każdym pikselem po „kliknąłem i się zastosowało".

💡 Szybki przegląd:

• Włączamy rozwijane menu „Formaty" w klasycznym edytorze filtrem mce_buttons_1 i wypełniamy je własnymi stylami przez tiny_mce_before_init, kod krok po kroku w środku.
• Tworzymy editor-style.css dla podglądu na żywo prosto w edytorze: przycisk wygląda jak przycisk jeszcze przed publikacją.
• Instalujemy TinyMCE Custom Styles, GUI-konstruktor formatów bez dotykania kodu, z autogenerowanymi plikami CSS.
• Przyglądamy się natywnej ścieżce dla Gutenberg: rejestrujemy warianty bloków przez register_block_style(), style podłączamy przez theme.json lub wp_add_inline_style().

Czym są style niestandardowe i do czego służą

Styl niestandardowy to preset CSS, który nakłada się na zaznaczony fragment przez rozwijane menu edytora. Zamiast setnego opakowywania akapitu w <span style="..."> wybiera Pan/Pani „Highlight" w menu „Formaty" i otrzymuje żółte podświetlenie z zaokrąglonymi rogami. Jedno kliknięcie.

Trzy powody, by skonfigurować to raz i zapomnieć:

• Jednolitość. Wszystkie przyciski, ostrzeżenia i podpisy wyglądają tak samo od publikacji do publikacji. Design nie płynie.
• Szybkość. Redaktor nie sięga do CSS i nie kopiuje magicznych klas z notatnika, klika jeden przycisk.
• Bezpieczeństwo. Nikt przypadkowo nie nadpisuje układu przez style inline w trybie tekstowym.

Typowe scenariusze: przycisk wezwania do działania (theme-button), blok „Ważne" z ikoną i kolorową ramką, lista punktowana z haczykami, podpis pod zdjęciem w firmowym stylu, wyróżnienie kodu wewnątrz akapitu.

Sposób 1: Kod, przez functions.php i editor-style.css

Ścieżka dla tych, którzy nie boją się raz otworzyć functions.php. Rezultat: rozwijane menu „Formaty" pojawia się na pasku narzędzi TinyMCE, a w środku, Pana/Pani własne style. Dziesięć linijek PHP, jeden plik CSS, zero zbędnych wtyczek.

Krok 1. Włączamy przycisk „Formaty"

Domyślnie rozwijana lista formatów styleselect jest ukryta. Ten filtr przywraca ją do pierwszego rzędu edytora. Kod proszę umieścić w functions.php aktywnego motywu lub, co poprawniejsze, motywu potomnego:

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' );

Hak mce_buttons_1 dodaje przycisk do pierwszego rzędu paska narzędzi. Jeśli woli Pan/Pani drugi lub trzeci, proszę użyć mce_buttons_2 lub mce_buttons_3.

Zapisano functions.php, otwarto dowolny wpis, po lewej w górnym rzędzie pojawiło się rozwijane menu „Formaty". Na razie puste.

Krok 2. Rejestrujemy własne style

Teraz wypełnimy menu rzeczywistymi formatami. Do tego samego functions.php proszę dodać drugi filtr:

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' );

Co oznaczają parametry każdego elementu:

• title, nazwa, którą redaktor zobaczy w rozwijanym menu.
• selector, znacznik HTML, do którego stosuje się styl. 'a' oznacza, że „Theme Button" zadziała tylko na linkach.
• inline, opakowuje zaznaczony tekst w znacznik (zazwyczaj span) ze wskazaną klasą. Idealne do podświetlania słowa lub frazy wewnątrz akapitu.
• classes, klasa CSS (lub klasy oddzielone spacją), która jest dodawana do elementu.

Proszę dodawać swoje pozycje do tablicy według tego samego wzorca. Pełna lista akceptowanych parametrów znajduje się w dokumentacji TinyMCE na developer.wordpress.org.

Krok 3. Piszemy CSS dla frontendu

Menu jest wypełnione, ale przeglądarka na razie nie wie, jak wygląda .theme-button. Proszę dodać CSS do arkusza stylów motywu (lub motywu potomnego):

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
}

Po zapisaniu przycisk jest ostylowany na frontendzie. Ale w panelu administracyjnym edytor go na razie nie pokazuje.

Krok 4. Dodajemy editor-style.css dla podglądu w edytorze

Aby style wyświetlały się bezpośrednio w edytorze wizualnym przed publikacją, potrzebny jest osobny plik editor-style.css. WordPress potrafi go przechwycić:

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

Proszę utworzyć plik editor-style.css w katalogu głównym motywu i skopiować do niego CSS z kroku 3. Jeśli pracują Państwo z cudzym motywem, proszę utworzyć ten plik w motywie potomnym: WordPress sprawdzi najpierw motyw potomny i, znajdując tam editor-style.css, załaduje go zamiast pliku z motywu nadrzędnego.

Podsumowanie: zaznaczyli Państwo tekst, wybrali „Highlight", żółte podświetlenie jest widoczne od razu w edytorze. Kliknęli Państwo w link, wybrali „Theme Button", zamienia się on w niebieski przycisk.

Sposób 2: wtyczka TinyMCE Custom Styles, bez dotykania kodu

Jeśli nie chcą się Państwo grzebać w functions.php, a style są potrzebne, istnieje gotowa wtyczka. Robi ona to samo przez interfejs wizualny w panelu administracyjnym.

Proszę zainstalować i aktywować TinyMCE Custom Styles. Na czerwiec 2026 wtyczka ma 8 000+ aktywnych instalacji i obsługuje klasyczny blok Gutenberga począwszy od wersji 1.1.1. Ostatnia aktualizacja (v1.1.5, czerwiec 2024) zamykała luki w zabezpieczeniach. Autor, Tim Reeves, otwarcie szuka następcy, ale baza kodu jest stabilna: wtyczka nie ciągnie zewnętrznych zależności i nie dotyka bazy danych poza swoją tabelą opcji.

Wtyczka pojawia się na ogólnej liście zainstalowanych. Proszę upewnić się, że jest aktywna, zanim przejdą Państwo do konfiguracji.

Po aktywacji proszę przejść do Ustawienia → TinyMCE Custom Styles. Pierwszy ekran oferuje wybór miejsca przechowywania plików CSS. Polecam trzecią opcję: utworzenie osobnego folderu (na przykład tinymce-styles) w wp-content/uploads. Zabezpieczy to style podczas aktualizacji motywu lub samej wtyczki. Proszę kliknąć „Zapisz ustawienia".

Pierwszy ekran pokazuje trzy opcje umiejscowienia CSS. Proszę wybrać trzecią i podać nazwę folderu, na przykład tinymce-styles.

Proszę przewinąć stronę niżej i kliknąć „Dodaj nowy styl". Otworzy się kreator, w którym definiują Państwo:

• Tytuł, nazwę w rozwijanym menu (na przykład „Duży niebieski przycisk").
• Typ, selektorowy (stosowany do konkretnego znacznika), inline (opakowuje w span) lub blokowy.
• Klasy i właściwości CSS, bezpośrednio w interfejsie, bez plików.

Po zapisaniu ustawień proszę kliknąć „Dodaj nowy styl" w dolnej części strony. Otworzy się kreator z polami tytułu, typu i właściwości CSS.

Proszę zapisać, otworzyć dowolny wpis i znaleźć rozwijane menu „Formaty" w drugim wierszu paska narzędzi. Nowy styl już tam jest. Zaznacza Pan/Pani tekst, wybiera styl, jest on stosowany natychmiast.

Zaleta wtyczki: pliki CSS (editor-style.css i editor-style-shared.css) są tworzone automatycznie w wybranym folderze. Pobiera je Pan/Pani przez FTP, edytuje w wygodnym edytorze i wgrywa z powrotem, bez żadnej modyfikacji pliku functions.php.

Sposób 3: register_block_style(), natywna ścieżka dla Gutenberga

Dwie poprzednie metody działają w klasycznym edytorze TinyMCE i jego bloku Classic wewnątrz Gutenberga. Jeśli jednak pracuje Pan/Pani wyłącznie w edytorze blokowym, istnieje bardziej bezpośrednia ścieżka: register_block_style().

Ta funkcja rejestruje wariant stylu dla konkretnego bloku, przycisku, nagłówka, cytatu, grupy. Wariant pojawia się na panelu bocznym bloku, a edytor stosuje go jednym kliknięciem.

Przykład: dodajmy do przycisku wariant „Fancy" z żółtym tłem i zaokrąglonymi rogami:

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' );

CSS jest podłączany albo przez theme.json (dla nowoczesnych motywów blokowych), albo przez 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
}

To podejście nie zależy od TinyMCE i działa natywnie w Gutenbergu. W przypadku motywów z theme.json (wszystkie nowoczesne motywy blokowe) style można opisać bezpośrednio w sekcji styles.blocks, bez ani jednej linii PHP.

⁉️🤔 Często zadawane pytania

Formaty nie wyświetlają się w edytorze. O co chodzi?

Przede wszystkim proszę wejść w Ustawienia → Advanced Editor Tools i upewnić się, że przycisk „Formats" nie został usunięty z paska narzędzi. AET przejmuje kontrolę nad rzędami przycisków i Pana/Pani filtr mce_buttons_1 może być ignorowany, dopóki jawnie nie doda Pan/Pani przycisku przez interfejs wtyczki. Proszę również sprawdzić, czy filtr mce_buttons_1 jest zarejestrowany i zwraca tablicę z elementem 'styleselect'. Proszę wyczyścić pamięć podręczną przeglądarki i serwera, często problem leży tylko w tym.

Czy można przypisać styl do kilku selektorów jednocześnie?

Tak. Zamiast ciągu znaków 'selector' => 'a' proszę przekazać tablicę: 'selector' => 'a, button, span'. TinyMCE zastosuje styl do pierwszego pasującego znacznika nadrzędnego z listy. W praktyce jest to przydatne, gdy jeden styl wizualny ma działać zarówno na linkach, jak i na przyciskach <button>. Kolejność w tablicy ma znaczenie: jeśli zaznaczony tekst znajduje się wewnątrz linku zagnieżdżonego w div, a w selektorach podano 'div, a', styl zostanie zastosowany do div, a nie do a. Proszę umieszczać bardziej szczegółowe selektory na początku.

Czym editor-style.css różni się od editor-style-shared.css?

Wtyczka TinyMCE Custom Styles tworzy dwa pliki. editor-style.css jest ładowany tylko w edytorze TinyMCE. editor-style-shared.css jest ładowany zarówno w edytorze, jak i na froncie, style z niego są widoczne dla odwiedzających witrynę. Jeśli styl jest potrzebny tylko dla wygody edycji, proszę umieścić go w editor-style.css. Jeśli styl ma działać na stronie, w editor-style-shared.css. Przy podejściu ręcznym odpowiednikiem pliku shared jest główny arkusz stylów motywu, a editor-style.css (osobny plik rejestrowany przez add_editor_style()) wpływa tylko na podgląd wewnątrz TinyMCE.

Czy konieczne jest tworzenie motywu potomnego dla tych zmian?

Nie, kod działa również w functions.php głównego motywu. Jednak przy następnej aktualizacji motywu wszystkie zmiany zostaną nadpisane. Zasada jest prosta: każda customizacja przez functions.php trafia do motywu potomnego, to zabezpieczenie przed utratą zmian. Jeśli nie ma Pan/Pani jeszcze motywu potomnego, proszę go utworzyć w dziesięć minut według poradnika o motywach potomnych: dwa pliki, style.css z nagłówkiem i functions.php z importem stylów rodzica, i Pana/Pani niestandardowe formaty przetrwają każdą aktualizację.

Wtyczka nie była aktualizowana od 2024 roku. Czy warto ją instalować?

Na czerwiec 2026 wtyczka TinyMCE Custom Styles pozostaje w katalogu WordPress.org z ponad 8 000 aktywnych instalacji. Autor otwarcie szuka następcy, ale baza kodu nie jest porzucona: ostatnia aktualizacja (v1.1.5, czerwiec 2024) usuwała podatności. Ryzyko istnieje, ale jest ono możliwe do opanowania: wtyczka nie pobiera zewnętrznych zależności i nie ingeruje głęboko w bazę danych. Jeśli w przyszłości wtyczka przestanie być aktualizowana, zawsze może Pan/Pani przenieść style metodą ręczną (kroki 1-4 powyżej) bez utraty CSS. Alternatywą z aktywnym rozwojem jest Advanced Editor Tools (AET) od Automattic, ale jej opcja „Create CSS classes menu" często zaśmieca menu zbędnymi klasami. TinyMCE Custom Styles daje ręczną kontrolę nad każdym elementem, dlatego nie są one konkurentami, a raczej się uzupełniają.

Kod, wtyczka czy bloki: co wybrać do Pana/Pani scenariusza

Wybór sprowadza się do dwóch pytań: w jakim edytorze Pan/Pani pracuje i czy jest Pan/Pani gotów raz otworzyć functions.php.

Jeśli pracuje Pan/Pani w klasycznym edytorze lub bloku Classic w Gutenbergu i nie boi się Pan/Pani kodu, proszę wybrać sposób 1. Dziesięć linii PHP, jeden plik CSS, pełna kontrola.

Jeśli chce Pan/Pani wizualny kreator formatów bez dotykania kodu i z automatyczną generacją CSS, proszę zainstalować TinyMCE Custom Styles. Proszę pamiętać o ryzyku długoterminowego wsparcia, ale na dziś wtyczka realizuje to, co deklaruje.

Jeśli żyje Pan/Pani w edytorze blokowym, proszę opanować register_block_style(). Ta ścieżka jest natywna dla Gutenberga, nie zależy od TinyMCE i jest wspierana przez rdzeń WordPressa.

W każdym z trzech scenariuszy otrzymuje Pan/Pani to, co najważniejsze: formatowanie jednym kliknięciem zamiast ręcznego kopiowania klas i stylów inline. A to godzina lub dwie zaoszczędzonego czasu miesięcznie na każdej regularnie publikowanej witrynie.