Як додати свої стилі до візуального редактора записів WordPress

WordPress укомплектований потужним візуальним редактором TinyMCE. Ця утиліта сама по собі є окремим проектом з відкритим кодом, який підтримується та розробляється. MoxieCode Systems. TinyMCE - потужний, крос-платформний WYSIWYG редактор, заснований на наявність. Він використовується в багатьох системах керування контентом, не тільки WordPress.

TinyMCE - це як звичайний хороший текстовий редактор з великою кількістю кнопок для того, щоб робити різні речі. Як і WordPress, він розширюється, і може бути використаний для забезпечення розширеного інтерфейсу для написання постів користувачами.

Більшість таких кнопок просунутого рівня у стандартному візуальному редакторі WordPress приховані. Ви можете відобразити всі кнопки, перейшовши в режим Advanced Editor Mode.

Підказка: Використовуйте Shift+Alt+Z щоб показати всі кнопки у візуальному редакторі або клацніть по кнопці Показати/приховати додаткову панель.

Навіщо вам може знадобитися налаштовувати TinyMCE

Як WordPress розробника або власника сайту, у вас будуть моменти, коли не тільки ви, але і користувачі привносять контент на ваш сайт. Не всі вони будуть знайомі із вашим стилем оформлення. Іноді у вас будуть навіть автори, які не знають, як додати посилання на об'єкт у HTML редакторі.

Так як адміністратор/розробник сайту ви зобов'язані спростити їм слідування вашому стилю оформлення, надавши їм інтерфейс, в якому вони зможуть просто використовувати ті стилі, які вам потрібні. Сайти, які мають багато технічно непідкованих авторів, дуже виграють, якщо розширять налаштування свого TinyMCE редактора в WordPress. Це забезпечить сталість стилю, контент виглядатиме краще, а автори зможуть зосередитися лише на написанні текстів.

У цьому прикладі ми додамо меню, що випадає Styles в TinyMCE, потім ми додамо до нього лілову кнопку та ще один елемент для написання тегів. На багатьох ресурсах в адмінці використовуються кнопки різного кольору для виділення посилань на зовнішні сайти та завантаження. Так що я вирішив, що буде круто вивчити, як це можна додати до TinyMCE.

Як додати свої стилі до візуального редактора WordPress

Спочатку ми включимо меню, що випадає Стилі для TinyMCE на екран редагування WordPress.

Підказка: Цей код буде у файлі functions.php вашої теми.

// Add the Style Dropdown Menu to the second row of visual editor buttons
function my_mce_buttons_2($buttons)
{
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Тут ми увімкнули меню Стилі. Код вище покаже доступні за промовчанням класи стилю. Ми не хочемо, щоб класи за замовчуванням заплутали нашого користувача, тому ми додамо свої власні стилі зі зрозумілими назвами.

function my_mce_before_init($init_array)
	{
		// Now we add classes with title and separate them with;
		$init_array['theme_advanced_styles'] = "Tag Line=tag-line;Button=custom-button";
	return $init_array;
}

add_filter('tiny_mce_before_init', 'my_mce_before_init');

Тепер нам потрібно додати меню із двома елементами стилю в ньому. Теги та кнопка. Проте, якщо користувач вибере текст і потім вибере ці варіанти з меню, нічого не станеться. Отже, нам потрібно визначити ці стилі в наших таблицях стилю. Editor Style Sheet и Theme Stylesheet.

Починаючи з версії 3.0, WordPress дозволяє розробникам тем та адміністраторам сайтів визначати власні стилі візуального редактора. Це означає, що розробники тем можуть робити стилі свого візуального редактора такими ж, як їхні теми, і коли користувач пише пост, він знає, як виглядатиме опублікованим. Ця можливість робить TinyMCE в WordPress дійсно WYSIWYG редактором.

Використовуючи add_editor_style ми додаємо ці стилі та повідомляємо WordPress, де шукати CSS для цих стилів. За умовчанням це editor-style.cssВи можете створити цей файл у папці вашої теми, якщо його там ще немає. Або ви можете використовувати таблицю стилів.

add_editor_style();
	// OR
add_editor_style('custom-editor-style.css');

Тепер ми додамо CSS в editor-style.css або Спеціально редактор style.css і ми також додамо той же CSS в style.css нашої теми.

.tag-line {

	Font:italic 14px Georgia, serif;
	color:#ccc;
}

.custom-button {

	font-size:13px;
	background: #9027A2;
	display: inline-block;
	padding: 2px  5px 2px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-  radius: 4px;
	border:none;
	position: relative;
	cursor: pointer;
	margin:10px 10px 0 0;

}

Відображення та приховування кнопок у TinyMCE

Налаштування за замовчуванням для кнопок та плагінів TinyMCE зберігаються в /wp-includes/class-wp-editor.php. Ці налаштування можна перезаписати за допомогою фільтра tiny_mce_before_init. Є кілька кнопок у візуальному редакторі, які більшість людей ніколи не використовують, і ви можете прибрати ці кнопки, якщо хочете.

Подивіться на наведений код і вирішіть, чи є речі, які вам не потрібні. Також зверніть увагу, що ви можете додати третій або четвертий ряд кнопок у ваш інтерфейс візуального редактора.

function myformatTinyMCE($in)
	{
			$in['remove_linebreaks']=false;
			$in['gecko_spellcheck']=false;
			$in['keep_styles']=true;
			$in['accessibility_focus']=true;
			$in['tabfocus_elements']='major-publishing-actions';
		$in['media_strict']=false;
		$in['paste_remove_styles']=false;
		$in['paste_remove_spans']=false;
		$in['paste_strip_class_attributes']='none';
			$in['paste_text_use_dialog']=true;
		$in['wpeditimage_disable_captions']=true;
		$in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
			$in['content_css']=get_template_directory_uri() . "/editor-style.css";
		$in['wpautop']=true;
		$in['apply_source_formatting']=false;
		$in['theme_advanced_buttons1']='formatselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,wp_fullscreen,wp_adv';
		$in['theme_advanced_buttons2']='pastetext,pasteword,removeformat,|outdent,indent,|,undo,redo';
		$in['theme_advanced_buttons3']='';
		$in['theme_advanced_buttons4']='';
	 return $in;
	}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Створення власних кнопок TinyMCE у WordPress

Як і WordPress, TinyMCE може бути розширено за рахунок використання плагінів. Є кілька планинів TinyMCE у папці /wp-includes/js/tinymce/pluginsна які ви можете звернути увагу, якщо хочете написати власний плагін. Також перегляньте документацію TinyMCE щодо створення плагінів. Ці плагіни можуть бути вбудовані в інтерфейс користувача візуального редактора WordPress.

Тим не менш, створення TinyMCE плагіна для WordPress — не таке просте завдання. Для користувачів, які не хочуть заглиблюватися в написання плагінів, є відмінні плагіни WordPress, які дозволять вам розширити TinyMCE в Wordpress.

1. плагін Ultimate TinyMCE

плагін Ultimate TinyMCE — потужний WordPress плагін, який розширює ваш TinyMCE редактор до максимуму. Він поставляється з безліччю кнопок, які можуть спростити створення постів у візуальному редакторі для користувачів Microsoft Word. Особисто мені подобається кнопка YouTube, яка дозволяє користувачам встановлювати, окрім інших налаштувань, ширину та висоту. Тим не менш, є деякі кнопки, які можуть вважатися марними, ці кнопки можна відключити на сторінці налаштувань плагіна.

У плагіна Ultimate TinyMCE також є преміум доповнення, яке можна купити на сайті автора плагіна. Ці доповнення включають веб-шрифти Google Web Fonts, власні стилі, смайли, розширені налаштування тощо.

2. плагін Шаблон TinyMCE

плагін TinyMCE template — дуже корисний інструмент для сайтів, на яких авторам необхідно дотримуватися посібника з форматування та стилів контенту, що надається.

Плагін TinyMCE template дозволяє створювати шаблонні записи, які ви можете використовувати всередині візуального редактора для створення нових записів. Ідея проста, красива та відмінно працює. Ви можете створити шаблони, визначити необхідні поля, які автори записів можуть швидко заповнити та рухатися далі.

3. плагін TinyMCE Advanced

Як відомо з назви, цей плагін додає додаткові можливості візуальний редактор WordPress. Одна можливість, яку особисто я вважаю дуже корисною – можливість завантажувати CSS класи з таблиці стилів теми та робити їх доступними у візуальному редакторі.

У сторінки налаштувань плагіна drag-and-drop інтерфейс для встановлення кнопок, додавання роздільників між ними, а також зміни редактора під свої потреби.

Висновок

Використання своїх стилів у TinyMCE може спростити та прискорити для користувачів створення кнопок, форматування контенту, стилізацію постів. Це не виключає періодичну необхідність перемикання в HTML редактор повністю, але може стати відмінним інструментом для користувачів, які перейшли з оффлайн-редагування і хочуть писати текст, а не код.

Джерело: WPLift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/