Ваш путь: Главная » WordPress без плагинов » текущая страница

возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено 2024-02-13 в теме: WordPress без плагинов
Запросто с WordPress создание и продвижение сайтов ATs media

Добавляем меню кнопок в текстовый редактор 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 Online консультация по настройкам и созданию сайтов на WordPress

 

 

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

 

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

 

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

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

 

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

 

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

 


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

 

 

 



Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





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

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

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


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

    Ответить - WEBDIY

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

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

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

    Ответить - WEBDIY

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

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

  3. Добрый день! Не подскажите как использовать не div, а p или h4. Тоже блочные элементы, но если прописываю в коде ‘block’ => ‘p’ свойства не применяются?

    Ответить - Леонид

  4. изменил wrapper на false и заработало)

    Ответить - Леонид

    • Ну и замечательно, что заработало))
      h4 или иные h… может быть логичнее вывести в html редакторе: кнопочками.
      Если, конечно, я Вас правильно понял…

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