Добавляем список с CSS классами на панель Визуального редактора в WordPress 3.3.2

Понадобился функционал в редакторе TinyMCE для добавления заданного класса к текущему параграфу. Нужной кнопки на панели Визуального редактора не оказалось, поэтому начал искать решение.

Задача состоит в том, чтобы после выделения параграфа был доступен список с классами, из которого я бы выбрал необходимый. Главное не переключаться в HTML режим. Например, текущий текст:

<p>Текст параграфа.</p>

после выбора класса "stars" становится следующим:

<p class="stars">Текст параграфа.</p>

Думаю, что идея и ранее была понятна.

Мне помогла следующая статья:

• http://www.wpmayor.com/articles/how-to-add-buttons-css-classes-to-tinymce/

Для добавления списка с классами требуется открыть в Закрытой части блога "Внешний вид", затем "Редактор" и файл functions.php.

Решением задачи становится добавление следующего кода в файл:

function my_mce_before_init( $init ) {
	$init['theme_advanced_buttons2'] .= ',styleselect';
	$init['theme_advanced_styles'] = 'Stars=stars';
	return $init;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Можно добавить сразу несколько классов, разделив их с помощью ";". Это список в конце концов. Для меня это было не нужно.

Автор указанной выше статьи предлагал использовать следующую строчку вместо моей 2-й:

$init['theme_advanced_buttons2_add'] = 'styleselect';

Хотя метод и рабочий, но мой вариант мне более нравится.

Также есть еще одно решение в официальной документации по WordPress:

• http://codex.wordpress.org/TinyMCE_Custom_Buttons

Код выглядит так:

// Add the Style selectbox to the second row of MCE 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)
{
	// add classes using a ; separated values
	$init_array['theme_advanced_styles'] = "First Class=first-class;Other class=other-class";
	return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Получается, что 2 раза вызывается функция add_filter(). Возможно это сделано для демонстрации возможностей. Я предпочту опять же свой вариант.

Tags: WordPress, WordPress 3.3.2, Визуальный редактор Wordpress, Визуальный редактор Wordpress 3.3.2, дополнения к Визуальному редактору WordPress, дополнения к Визуальному редактору WordPress 3.3.2, изменение functions.php WordPress, изменение functions.php WordPress 3.3.2

Запись опубликована Воскресенье, Июнь 3, 2012 в 18:33 и находится в WordPress, Программирование . Вы можете следить за ответами к этой записи через RSS 2.0 ленту. Вы можете оставить комментарий, или обратиться к записи со своего сайта.