Czy chcesz dodać niestandardowe style w edytorze wizualnym WordPress? Dodaj niestandardowe style pozwala szybko zastosować formatowanie bez konieczności przechodzenia do edytora tekstu. W tym artykule pokażemy, jak dodać niestandardowe style do edytora wizualnego WordPress.

stylesinwpeditor

Remarque: Ten samouczek wymaga podstawowej wiedzy na temat CSS.

kiedy będziesz musisz dodać niestandardowy styl w edytorze wizualnym WordPress?

Domyślnie edytor wizualny WordPress oferuje podstawowe opcje formatowania i stylizacji. Czasami jednak będziesz musiał mieć pod ręką niestandardowe style, które pozwolą Ci na przykład dodać przyciski CSS, treść, haczyki itp.

Zawsze możesz przejść z edytora wizualnego do edytora tekstu i dodać własny kod HTML i CSS. Ale jeśli regularnie używasz pewnych stylów, lepiej byłoby dodać je w edytorze wizualnym, aby można je było łatwo ponownie wykorzystać.

Dzięki temu zaoszczędzisz mnóstwo czasu, a także będziesz mógł zawsze używać tych samych stylów wszędzie na swoim Witryna internetowa.

Co ważniejsze, możesz łatwo edytować lub aktualizować style bez konieczności edytowania artykułów na swojej stronie.

Teraz dowiemy się, jak to zrobić w WordPress.

Metoda 1: Dodaj niestandardowy styl za pomocą wtyczki

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę „ Style TinyMCE niestandardowe ". Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować a WordPress Plugin.

Po aktywacji musisz odwiedzić „ Ustawienia> Ustawienia »Niestandardowe style TinyMCE Aby skonfigurować ustawienia wtyczki.

Konfiguracja-the-plugin-TinyMCE

Wtyczka pozwala wybrać lokalizację plików arkuszy stylów. Może używać Twojego motywu lub stylu motywu podrzędnego lub możesz wybrać niestandardową lokalizację.

Następnie musisz kliknąć przycisk „ zapisz wszystkie ustawienia Aby zapisać ustawienia.

Teraz możesz dodać własne style. Musisz przewinąć do sekcji stylu i kliknąć przycisk Dodaj nowy styl ".

Najpierw musisz wpisać tytuł stylu. Ten tytuł będzie wyświetlany w menu rozwijanym. Następnie musisz zdefiniować. Czy jest to wiersz, blok czy element zaznaczenia.

Następnie dodaj klasę CSS, a następnie dodaj swoje reguły CSS, jak pokazano na zrzucie ekranu poniżej.

wyklucza-of-style-css

Po dodaniu stylu CSS wystarczy kliknąć przycisk „zapisz wszystkie ustawienia”, aby zapisać zmiany.

Możesz teraz edytować istniejący artykuł lub utworzyć nowy. W drugim menu edytora wizualnego WordPress zauważysz format.

style-Dostosuj-redaktor wordpress

Po prostu zaznacz tekst w edytorze, a następnie wybierz własny styl z menu rozwijanego, aby go zastosować.

Możesz teraz wyświetlić podgląd artykułu, aby sprawdzić, czy niestandardowe style mają zastosowanie poprawnie.

Metoda 2: Ręcznie dodaj style do edytora wizualnego

Ta metoda wymaga ręcznego dodania kodu do plików WordPress. Jeśli robisz to po raz pierwszy, zapoznaj się z naszym samouczkiem, jak dodać WordPress Plugin.

Krok 1: Dodaj niestandardowy styl z menu rozwijanego edytora wizualnego WordPress.

Najpierw dodamy menu rozwijane w edytorze wizualnym WordPress. To menu rozwijane pozwoli nam wybrać i zastosować nasze niestandardowe style.

Należy dodać następujący kod do pliku functions.php lub na wtyczce.

funkcja wpb_mce_buttons_2 (przyciski $) {array_unshift (przyciski $, 'styleselect'); przyciski powrotu $; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');

Krok 2: Jak dodać opcje z menu rozwijanego

Teraz będziesz musiał dodać kilka opcji do właśnie utworzonego menu rozwijanego. Będziesz wtedy mógł wybrać i zastosować te opcje z formatów w menu rozwijanym.

W tym samouczku dodamy trzy niestandardowe style do utworzenia treść blok i przyciski.

Będziesz musiał dodać następujący kod do pliku "functions.php" twojego functions.php lub określonej wtyczki.

/ * * Funkcja wywołania zwrotnego do filtrowania ustawień MCE * / function my_mce_before_init_insert_formats ($ init_array) {// Zdefiniuj tablicę style_formats $ style_formats = array (/ * * Każda tablica potomna to format z własnymi ustawieniami * Zauważ, że każda tablica ma tytuł , blok, klasy i argumenty opakowujące * Tytuł to etykieta, która będzie widoczna w menu Formaty * Blok określa, czy jest to styl span, div, selector czy inline * Klasy umożliwiają definiowanie klas CSS * Wrapper, czy ma dodaj nowy element na poziomie bloku wokół dowolnych wybranych elementów * / array ('title' => 'Content Block', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true,), array ('title' => „Czerwony przycisk”, „blok” => „rozpiętość”, „klasy” => „czerwony przycisk”, „opakowanie” => prawda,),); // Wstaw tablicę JSON ENCODED do 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); return $ init_array; } // Dołącz wywołanie zwrotne do 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Możesz teraz dodać nowy post na WordPress i kliknąć formaty z rozwijanego menu edytora wizualnego. Zauważysz, że Twoje niestandardowe style są teraz widoczne.

Jednak ich wybór nie wpłynie na edytor wizualny WordPress.

Krok 3: Dodaj styl CSS

Ostatnim krokiem jest dodanie reguł stylów CSS do niestandardowych stylów.

Będziesz musiał dodać ten CSS do pliku style.css swojego motywu lub motywu potomnego.

.content-block {border: 1px solid #eee; wypełnienie: 3px; tło: #ccc; max-width: 250px; float: right; wyrównywanie tekstu: do środka; } .content-block: after {wyczyść: oba; } .blue-button {background-color: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; obramowanie: 1px solid # 057fd0; wyświetlacz: inline-block; kursor: punkt; kolor: #ffffff; wypełnienie: 6px 24px; dekoracja tekstu: brak; } .red-button {background-color: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; obramowanie: 1px jednolity # 942911; wyświetlacz: inline-block; kursor: punkt; kolor: #ffffff; wypełnienie: 6px 24px; dekoracja tekstu: brak; }

Przegląd-of-przyciski-TinyMCE-dodanie-of-style-personalizuje

Arkusz stylów edytora kontroluje wygląd pliku treść w edytorze wizualnym. Sprawdź dokumentację, aby dowiedzieć się, jak znaleźć lokalizację tego pliku.

Jeśli Twój motyw nie ma pliku arkusza stylów, zawsze możesz go utworzyć. Po prostu utwórz nowy plik CSS i nazwij go " zlecenie redaktor style.css ".

Musisz przesłać ten plik do katalogu głównego motywu, a następnie dodać ten kod do pliku „functions.php” motywu.

my_theme_add_editor_styles function () {add_editor_style ( "custom-editor-style.css '); } Add_action ( 'init', 'my_theme_add_editor_styles');

To wszystko. Właśnie dodałeś własne style w edytorze wizualnym WordPress. Możesz teraz dokonać dostosowań, które uważasz za właściwe.

Udostępnij ten samouczek znajomym w swoich ulubionych sieciach społecznościowych.