Jak dodać niestandardowe style do edytora wizualnego WordPress

Czy chcesz dodać niestandardowe style w edytorze wizualnym WordPress? Dodawanie niestandardowych stylów pozwala szybko zastosować formatowanie bez przełączania na edytor tekstu. W tym artykule pokażemy, jak dodać niestandardowe style do edytora wizualnego WordPress.

Uwaga: Ten poradnik wymaga podstawowej wiedzy praktycznej CSS.

Dlaczego I Kiedy potrzebujesz niestandardowych stylów dla edytora wizualnego WordPress

Domyślnie edytor wizualny WordPress zawiera kilka podstawowych opcji formatowania i stylu. Czasami jednak możesz potrzebować własnych stylów, aby dodać przyciski CSS, bloki treści, slogany itp.

Zawsze możesz przełączyć się z edytora wizualnego na tekstowy i dodać niestandardowy HTML i CSS. Ale jeśli regularnie używasz niektórych stylów, najlepiej byłoby dodać je do edytora wizualnego, abyś mógł je łatwo ponownie wykorzystać.

Pozwoli to zaoszczędzić czas spędzony na przełączaniu się między edytorem tekstowym i wizualnym. Pozwoli to również na konsekwentne korzystanie z tych samych stylów w całej witrynie.

Co najważniejsze, możesz łatwo modyfikować lub aktualizować style bez konieczności edytowania postów w swojej witrynie.

Powiedziawszy to, przyjrzyjmy się, jak dodawać niestandardowe style w edytorze wizualnym WordPress.

Metoda 1: Dodaj własne style w edytorze wizualnym za pomocą wtyczki

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę TinyMCE Custom Styles. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Ustawienia ” Niestandardowe Style TinyMCE strona konfiguracji ustawień wtyczki.

Wtyczka pozwala wybrać lokalizację plików arkusza stylów. Może korzystać z arkuszy stylów motywu lub motywu podrzędnego lub możesz wybrać własną lokalizację.

Następnie kliknij przycisk “Zapisz wszystkie ustawienia”, aby zapisać zmiany.

Teraz możesz dodać własne style. Musisz przewinąć trochę w dół do sekcji styl i kliknąć przycisk Dodaj nowy styl.

Najpierw musisz wprowadzić tytuł dla stylu. Ten tytuł zostanie wyświetlony w rozwijanym menu. Następnie musisz wybrać, czy jest to element Wbudowany, blok czy selektor.

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

Po dodaniu stylu CSS po prostu kliknij przycisk “Zapisz wszystkie ustawienia”, aby zapisać zmiany.

Możesz teraz edytować istniejący post lub utworzyć nowy. W drugim wierszu edytora wizualnego WordPress pojawi się menu rozwijane formatu.

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

Możesz teraz wyświetlić podgląd swojego postu, aby zobaczyć, że Twoje niestandardowe style są stosowane poprawnie.

Metoda 2: Ręcznie Dodaj niestandardowe style do edytora wizualnego WordPress

Ta metoda wymaga ręcznego dodania kodu do plików WordPress. Jeśli po raz pierwszy dodajesz kod do WordPress, zapoznaj się z naszym przewodnikiem na temat dodawania fragmentów kodu z sieci do WordPress.

Krok 1: Dodaj niestandardowe style rozwijane menu w edytorze wizualnym WordPress

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

Musisz dodać następujący kod do funkcji motywu.plik php lub wtyczka specyficzna dla witryny.

function wpb_mce_buttons_2 ($buttons) {
	array_unshift ($buttons, 'styleselect');
	return $ buttons;
}
add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');

Krok 2: Dodaj wybierz opcje do rozwijanego menu

Teraz musisz dodać opcje do menu rozwijanego, które właśnie utworzyłeś. Następnie będziesz mógł wybrać i zastosować te opcje z menu rozwijanego formaty.

Ze względu na ten samouczek dodajemy trzy niestandardowe style do tworzenia bloków treści i przycisków.

Będziesz musiał dodać następujący kod do funkcji motywu.plik php lub wtyczka specyficzna dla witryny.

/*
* Funkcja Callback do filtrowania ustawień MCE
*/

function my_mce_before_init_insert_formats ($init_array ) {  

// Define the style_formats array

	$style_formats = array(  
/*
* Każde dziecko tablicy jest formatem z własnymi ustawieniami
* Zauważ, że każda tablica ma title, block, klasy i argumenty wrapper
* Tytuł to etykieta, która będzie widoczna w menu Formaty
* Blok określa, czy jest to span, div, selektor lub styl inline
* Classes pozwala definiować klasy CSS
* Wrapper, czy dodać nowy element na poziomie bloku wokół 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' = > 'Red Button',  
			'block' = > 'span',  
			'classes' = > 'red-button',
			'wrapper' = > true,
		),
	);  
	// Wstaw tablicę, JSON zakodowaną, do 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Dołącz callback do 'tiny_mce_before_init' 
add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats'); 

Możesz teraz dodać nowy post w WordPress i kliknąć menu rozwijane formaty w edytorze wizualnym. Zauważysz, że Twoje niestandardowe style są teraz widoczne w sekcji formaty.

Jednak ich wybranie nie ma teraz żadnej różnicy w edytorze postów.

Krok 3: Dodaj style CSS

Ostatnim krokiem jest dodanie reguł stylu CSS dla własnych stylów.

Musisz dodać ten CSS do stylu motywu lub motywu podrzędnego.css i styl edytora.pliki css.

.content-block { 
    border: 1px solid #eee; 
    padding: 3px;
    tło: # ccc;
    max-width:250px;
    float: right; 
    text-align:center;
}
.content-block: after { 
    clear: zarówno;
} 
.blue-button { 
	background-color:#33bdef;
	- moz-border-radius: 6px;
	/ - WebKit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #057fd0;
	wyświetlacz: inline-block;
	kursor: wskaźnik;
	color: # ffffff;
	padding: 6px 24px;
	tekst-Dekoracja: Brak;
}

.red-button {
	background-color: # bc3315;
	- moz-border-radius: 6px;
	/ - WebKit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid # 942911;
	wyświetlacz: inline-block;
	kursor: wskaźnik;
	color: # ffffff;
	padding: 6px 24px;
	tekst-Dekoracja: Brak;
}

Arkusz stylów edytora kontroluje wygląd treści w edytorze wizualnym. Sprawdź dokumentację motywu, aby dowiedzieć się, gdzie znajduje się ten plik.

Jeśli twój motyw nie ma pliku arkusza stylów edytora, zawsze możesz go utworzyć. Po prostu utwórz nowy plik CSS i nadaj mu nazwę custom-editor-style.css.

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

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

To wszystko. Pomyślnie dodałeś własne style do edytora wizualnego WordPress. Możesz swobodnie bawić się kodem, dodając własne elementy i style.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać niestandardowe style do edytora wizualnego WordPress. Możesz również zobaczyć nasz przewodnik, jak dodawać niestandardowe style do widżetów WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.