Posiadanie komfortu pracy podczas dodawania/edytowania tekstów w edytorze wizualnym to podstawa. W końcu to tutaj powstają historię, które po kliknięciu przycisku „Opublikuj” są czytane przez dziesiątki osób i zaczynają żyć własnym życiem. Zadbaj o komfort swojego blogowania dostosowując wielkość i krój tekstu, odstępy między wierszami czy krawędziami edytora. Te i inne modyfikacje możesz wykonać samodzielnie po zapoznaniu się z prostą metodą pozwalającą na podłączenie do edytora pliku ze stylami CSS.

Zobacz jaki efekt możesz osiągnąć korzystając z tego kursu:

Zanim rozpoczniesz dodawać kolejne linie w stylach CSS powinieneś dodać pewien fragment do pliku z funkcjami w Twoim motywie. Znajdziesz go wchodząc do sekcji Wygląd -> Edytor i wybierając plik functions.php. Po wejściu do edycji tego pliku wklej między znacznikami <?php i ?> poniższy fragment kodu:

// Dodaj niestandardowe style do edytora wizualnego
if ( ! function_exists('tinymce_css') ) {
	function tinymce_css($wp) {
		$wp .= ',' . get_bloginfo('stylesheet_directory') . '/css/tinymce.css';
		return $wp;
	}
}
add_filter( 'mce_css', 'tinymce_css' );

Zwróć uwagę na linię 4 tego fragmentu kodu. Znajduje się tam informacja o pliku tinymce.css który znajduje się w motywie. To z tego pliku będzie pobierany kod CSS, który będzie miał wpływ na wygląd treści w Twoim edytorze wizualnym.

Teraz przejdź do plików na serwerze korzystając z klienta FTP. Po zalogowaniu się wejdź do katalogu:

/wp-content/themes/nazwa-twojego-motywu/

oczywiście zamiast nazwa-twojego-motywu wybierając katalog z motywem. Aby upewnić się jak nazywa się Twój motyw możesz przejść do sekcji Wygląd -> Motywy i sprawdzić który z motywów jest aktywny.

Kiedy już znajdziesz się we właściwym katalogu Twoim zadaniem będzie stworzyć nowy katalog „css” i umieścić tam plik tinymce.css. Do pliku możesz wrzucić kod CSS wedle uznania ale przygotowałem dla Ciebie gotowy fragment kodu zmieniający font pisanego tekstu, wielkość tekstu, odstępy między wierszami oraz odstęp między krawędziami edytora. Takie ustawienia są optymalne i dzięki nim dodawanie nowych wpisów jest jeszcze większą przyjemnością.

body#tinymce {
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif!important;
    font-size: 16px!important;
    line-height: 1.5!important;
	padding: 10px 20px!important;
}