Добавляем меню кнопок в текстовый редактор TinyMCE WordPress

Увидел на просторах инета неплохой вариант расширения текстового редактора вордпресс и, чуть поправив понятности для, решительно делюсь с моими читателями. Способ добавления элементов форматирования проверял – 99.9% – работает духовно и гармонично. Валидатор Html никаких ошибок не выдаёт.

Фишка заключается в следующих полезных “кнопках”, которые и появятся у вас нынче в панели редактора (в панели-вкладке визуального редактора): выпадающее меню с полезными и абсолютно настраиваемыми кнопками. Рассмотрим пример с использованием div-классов: сниппет-подсветка:

расширения текстового редактора вордпресс

Для развития в web-разработке будет полезно, да и поможет избежать каких-то промахов в дальнейшем. Об ошибках, заблуждениях и целесообразности того или иного варианта реализации технических расширений текстового редактора – смотрите ССЫЛКУ финале статьи.

Итак:

Представленное в статье кодовое решение возможно вертеть как хотите: в подсвеченном блоке запросто всё настраивается: во-первых ФОРМА посредством DIV классов (всё на что только способны ДИВ-классы) – цвет текста, шрифт и величина – например чёрный фон – белые буковки и многое-многое Тому Подобное.

Помните! я только в качестве примеров взял “подсветку” – но можно задавать абсолютно любые свойства DIVов на уровне статьи, вплоть до сеток и таблиц на ваш манер. Тольче задавайте свойства определённому классу и ВПЕРЁД…

Всё зависит от вашей абсолютно-отличной от других фантазии, и совершенно бесплатно!

Кстати, вот полезная статья, в которой научитесь создавать свои шорткоды. Эта примочка много поможет в ведении и продвижении вашего сайта/блога или и того и другого Добавляем свои кнопки в визуальный редактор WordPress TinyMCE

…ниже дам ссылку, как избежать ошибок, создавая и используя вообще всевозможные улучшалки.

По-о-ехали…

…напоминаю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Пригодится!
Поверьте: так короче до профессионализма, ибо возможность переварки накопленных крупиц знаний в кашу маловероятна!

Копируйте этот КОД и прописывайте у себя в файле функций functions.php

//Добавляем выпадающее меню в визуальный редактор
function wpb_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

//Функция вызова фильтра для настроек MCE
function my_mce_before_init_insert_formats( $init_array ) {

// Определяем массив стилей и форм - 
//каждый дочерний элемент - формат со своими собственными настройками
$style_formats = array(
array(
'title' => 'Жёлтый фон',
'block' => 'div',
'classes' => 'yellow_background',
'wrapper' => true,

),

array(
'title' => 'Зелёный сниппет',
'block' => 'div',
'classes' => 'green_background',
'wrapper' => true,

),

array(
'title' => 'Синий фон',
'block' => 'div',
'classes' => 'blue_background',
'wrapper' => true,

),

);
// выводим массив - в стилях
$init_array['style_formats'] = json_encode( $style_formats );

return $init_array;

}
// Прикрикручиваем вызов к 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Как видите, в примере кода показан пример задачи отработки трёх кнопочек: сниппетов жёлтого, зелёного и синего. Вы вольны всё это заменить на своё или что-то убрать, либо добавить…

добавляем сниппет – подсветку

Как это делается:

возьмём, к примеру, жёлтый фон.

Строки 14 и 20. title – это понятно, имя кнопки.

16 – block – указывается что обработка будет в div-классах.

17 – classes – говоря проще, ИМЯ селектора CSS, в котором вы и станете задавать нужные свойства и значения.

Ну вот, с этим будто и всё.

А мне остаётся сказать, что, когда приспичит добавить какую-то кнопку в выпадающем меню визуального редактора, – берёте, как и говорилось строки 14 – 20, копируете и помещаете между соседних циклов, скажем так. НЕ НАРУШАЯ логику вложенности…

Затем в перекопированной фразе меняете “имя кнопки” “имя селектора” и у вас почти готова новая кнопка редактора, но не настроенная…

…пришло время задать значения CSS в файле style.css.

Напомню: путь ко всем нужным нам файлам находится в корне темы.

css селектор меню редактора вордпресс

Ну, и, занавешивая подмостки нонешнего балагана, даю скрипт-код стилистики css.

Чтобы далеко не бегать, вот мои селекторы CSS. Когда немного освоитесь, многое полезное для себя допишете сами!!

.yellow_background{background-color:#FFFF80;color:#000;border:1px solid #FFFF03;border-radius:7px 7px;font-style:italic;padding:10px;margin:5px 10px}
.green_background{background-color:#33FF00;border-radius:7px 7px;font-style:italic;padding:10px;margin:5px 10px}
.blue_background{background-color:#5EDFFF;border-radius:7px 40px;font-style:italic;padding:10px;margin:5px 10px}
.Red_background{background-color:#E1E4E8;border-radius:7px 7px;font-style:italic;padding:10px;margin:5px 10px}

Всё! больше говорить – только портить тему и полёт вашей фантазии.

Экспериментируйте.

Online консультация по настройкам и созданию сайтов на WordPress

…и конечно же делитесь в комментариях новеньким открытиями…

…кому что-то неясно: спрашивайте. Всегда помогу.

На этом занавес представления опускается…
…на рампы пыль печальная ложится…