Czasami pisząc blok tekstu za pomocą edytora WordPress, potrzebujesz, aby wyglądał w określony sposób, zwykle robimy to dodając style do fragmentów tekstu, ale nie zawsze chcemy, aby nasi klienci musieli otwierać edytor tekstu i zrób to ręcznie.
W tym przykładzie utworzymy mały filtr, który możesz dodać do swojego functions.phppliku, aby dać użytkownikowi dodatkowe opcje formatowania, aby dodać niestandardowy styl akapitu „Lead".
Korzystanie z niestandardowego formatowania TinyMCE
Oto super szybki przykład działania filtra. Pokazuje:
- Jak przełączyć pasek narzędzi, aby zobaczyć menu Formaty?
- Jak zastosować formatowanie za pomocą menu Formaty
- Jak wyczyścić style?
Formatowanie TinyMCE w akcji
Kod
Kod jest naprawdę prosty, wystarczy podłączyć tiny_mce_before_initi dodać własny styl do style_formatstablicy. Pamiętaj, aby podać tytuł, typ elementu, którego chcesz użyć, a co najważniejsze, klasę.
function wholesomecode_tinymce_formatting( $settings) {
$style_formats = array(
array(
'title' => 'Lead Paragraph',
'block' => 'p',
'classes' => 'lead',
'wrapper' => false,
),
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );
Style
Oczywiście nic się nie wydarzy bez odrobiny stylizacji. Pamiętaj, aby dodać style do obu głównych WordPress styles.css, aby Twój Lead był wyświetlany w interfejsie, a także zarejestruj arkusz stylów edytora, aby kod wyświetlał się w edytorze (możesz add_editor_style()to zrobić).
.lead {
font-size: 120%;
}