студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: В теме: Без плагинов
студия занимательная МИХАЛИКА

Добавляем меню кнопок в текстовый редактор 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}

 

 

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

 

 

Да, те которые используют плагин TinyMCE Advanced, не забудьте сгонять в его настройки и включить меню «Форматы» коли отключено!!

 

 

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

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 

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

 

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

 

Ну а тем, которые всегда движутся вперёд, вот статья-помощник. В ней вы найдёте предупреждения о многих ошибках в использовании расширений текстового редактора вордпресс. И вообще всевозможных шорткодов и т.п.

редактор WordPress — правильное использование созданных кнопок, шорткодов

 

2- Также будет полезно прочесть статью, коли мы говорим о div-классах, — как убрать h3 h4 h5 из заголовков сайдбаров и обернуть title в более логичные (в плане термина — продвижение сайта) ДИВЫ.

 

Да, вот ещё полезная статья, но в ней — мы добавим свои кнопки в HTML редактор вордпресс.

 


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

 

 

 

Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:
Комментарии: 4

  1. Спасибо за статью! С Визуальным редактором всё понятно. А вот как бы добавить своих кнопочек в Текстовый редактор ВП (вкладка рядом с визуальным)? Потому что при переключении между двумя этими вкладками — код портится. Я выбрал работать с выключенным Визуальным редактором, но как добавить парочку своих кнопок в Текстовый — вот вопрос.

    Ответить - WEBDIY

    • WEBDIY, это просто! Вот ссылка… там по аналогии можете добавить СВОИ какие угодно кнопки.
      Главное, определится в использовании, чтобы в дальнейшем избежать ошибок. Впрочем, там (в статьях), есть множество ссылок на полезные в этом плане примочки.

      Ответить - Михаил

  2. Спасибо большое, Михаил! То что надо! Думаю, ссылку на эту статью со вставкой доп. кнопок в Текстовый HTML редактор было бы неплохо разместить в начале этой, которая про Визуальный. Вещи-то ведь разные, а проблема похожая.

    Ответить - WEBDIY

    • Да, я уже кое-что сейчас поправил…
      Тут немного с переЛЕНЬковкой запутки. Постепенно привожу этот сайт в порядок.
      Спасибо, за дельное замечание!

      Ответить - Михаил

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *