Przejdź do głównej treści

Jak dodać stylu wizualnego do edytora WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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 opcje formatowania i podstawowe opcje stylu. Czasami jednak trzeba będzie mieć niestandardowe style, które pozwolą na przykład dodawać przyciski CSS, bloki treści, zaczepy i tak dalej.

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ć.

Pozwoli to zaoszczędzić ogromną ilość czasu, a także pozwoli ci zawsze używać tych samych stylów w całej witrynie.

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, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

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

Konfiguracja-the-plugin-TinyMCE

Wtyczka umożliwia wybranie lokalizacji plików arkuszy stylów. Może używać stylu Twojego motywu lub motywu potomnego lub możesz wybrać niestandardową lokalizację.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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 na temat dodawania wtyczki WordPress.

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, aby utworzyć zawartość bloku 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 steruje wyglądem zawartości w edytorze wizualnym. Zobacz dokumentację, aby dowiedzieć się, jak znaleźć lokalizację tego pliku.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
7 akcji
udział6
ćwierkanie
Enregistrer1