Добавляем свои кнопки в визуальный редактор WordPress – TinyMCE (для вывода шорткодов, например)

В этой теме, объединяющей несколько постов, мы разберёмся, как настроить текстовый визуальный редактор Вордпресс под свои требования. А именно рассмотрим кнопки редактора вордпресс в его инструментарии…

Есть такая штука — shortcode – удобная «примочка» и в плане начинки редактора. Но – главное достоинство шорткодов – они сберегают массу полезного времени и обеспечивают лёгкость блогу, если, конечно, эти шорткоды мы используем без применения плагинов: чему нынче и выучимся, дабы обрести ЛЁГКОСТЬ без ошибок!

 

 

Изучаем визуальный редактор WordPress и Shortcodes (шорткоды)

 

 

 

А что такое “лёгкость” вообще??

 

Первое: скорость полной загрузки сайта. И второе — то же самое. Третье и четвёртое – простота управления.

 

Никто не станет спорить, что скверная скорость загрузки картинки сайта, напрямую влияет на посещаемость и рублики-с (кто промышляет рекламой) – безусловно, shortcode очень удобны, и они значительно облегчают жизнь блогерам в работе, скажем, с визуальным редактором. Ведь мы сегодня будем говорить именно о нём.

 

 

Вероятно, для многих блогеров-новичков будет открытием, что функциональность визуального редактора возможно, за счёт этих самых Shortcode, значительно расширить.

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

И не просто знать, но и научиться настраивать механическую часть вордпресс, а именно всевозможные редакторы и т.п. по своим желаниям.

И это, конечно же, здорово сократит наше время… при наполнении сайта контентом.

 

 

 

Итак!

 

 

После того, как вы установили свой сайт на локальный или реальный сервер, у вас в визуальном редакторе будет примерно следующая картинка:

 

Не густо!

 

 

 

 

 

 

Наша задача расширить этот начальный функционал, добавляя полезные кнопки в общий инструментарий, которые “в один клик” станут прикручивать к статье множество удобных фишек, избавляя вас вручную прописывать бюрократические теги. Будем подробно разбираться для того, чтобы вы поняли принцип, и сами уже устанавливали те кнопочки и расширения, которые будут необходимы – то есть в дальнейшем уже сами его настраивали, как говорят, под себя.

 

Поэтому заморачиваться на РАЗНОВИДНОСТЯХ КНОПОК я не стану, ведь потребности у нас всех разные, а попробую пояснить принцип на примерах ниже…

 

 

 

А в завершении статьи мы с вами запустим неактивные расширения редактора (есть и такие). И в итоге, после нашего усовершенствования, редактор будет выглядеть уже примерно так: (у меня на картинке кнопочки достаточно аскетичны, ибо это тестовый сайт, но – у вас всё будет в соответствии с вашей фантазий: красочно и красиво)

 

 

Теперь выбирайте сами, как станете работать с документами, в смысле редакции… Предлагаю использовать Нотепад. Как с ним работать читайте Нотепад ++.

 

 

 

 

 

 

 

Но, обо всём по порядку: для начала создадим редактору правило, что-то вроде собственной миниПРОГРАММЫ.

 

 

 

…и коли у нас уже есть два ряда кнопок, то создадим третий, для всех последующих…

 

 

Я же буду рассказывать на примере рабочего сайта: т.е на хостинге зайду в файловый менеджер. Вы же, можете перекопировать содержимое нужных файлов в Нотепад – отредактировать, а затем перености поправленный документ обратно. В любом случае, доступ к файловому менеджеру будет необходим.

 

 

 

 

Приступим:

 

 

 

 

 

Кстати, для тех которые не очень-то любят заморачиваться с кодом вручную и вообще сторонники быстрого подхода к делу, вот неплохая тема для WordPress шаблон Avada.

 

 

 

 

 

подключаем отработку кнопок в текстовом редакторе WordPress

 

 

 

 

 

Хотя эта статья более для новичков, всё же – очень разжёвывать не буду. Тут всё не так уж и сложно, вы скоро в этом убедитесь. От вас требуется только внимание.

 

Но если кому что не ясно – пишите…

 

 

Повторюсь, если решились просто копировать и править онлайн, то:

 

 

Заходим в Консоль (или в хостинговый файловый менеджер).

В консоли: переходим «Внешний вид» – «Редактор» и открываем файл functions.php. Помещаем содержимое в редактор Нотепад++ и… …прокручиваем в самый конец документа. Находим закрывающий тег ?>.

 

Перед ним выставим курсор и сделаем несколько отступов (пробелов).

 

 

Теперь копируем пример ниже: … и прописываем его на освобождённое место перед тегом ?>.

 

 

//начало вкладок прописка кнопок
    function mihalica_button()
    {
        if ( current_user_can('edit_posts') && current_user_can('edit_pages') )
 {
        add_filter('mce_external_plugins', 'mihalica_plugin');
        add_filter('mce_buttons_3', 'mihalica_register_button');
    }
}

        add_action('init', 'mihalica_button');

        function mihalica_plugin($plugin_array){
        $plugin_array['mihalica'] = get_bloginfo('template_url').'/js/newbuttons.js';
        return $plugin_array;
    }
    function mihalica_register_button($buttons){
        array_push($buttons, "bl");
        array_push($buttons, "ss");
        array_push($buttons, "sss");
        array_push($buttons, "gg");
        array_push($buttons, "yw");
        // место для продолжения задачь
        return $buttons;
    }

 

 

Это сделали!

 

Теперь, внимание:

 

строка 7.

 

add_filter(‘mce_buttons_3′, mihalica’_register_button’);

 

Обратите внимание в строке на цифру 3 – это есть номер ряда расположения кнопок (далее вам будет только необходимо эту цифру заменить на 4 , когда кнопок будет становится больше и больше.

 

Строки 18 – 22 – имена кнопок, которые появятся в редакторе. Имена между кавычек “Y?” можно писать абсолютно любые, только латиницей, но понятные для себя: главное – чтобы всё это было связано с остальной кодировкой! всё это поймёте далее по тексту…

Также обратите взор на то, что я дал вам больше вариантов, нежели рассматриваются сегодня. Это на будущее. Можете что-то добавлять по аналогии, а можете и повычёркивать.

 

 

 

Дальше:

 

…вновь делаем курсором (или Enter, как угодно) несколько пробелов перед тегом ?> и помещаем следующий ниже код:

 

 

// подсветка текста yw жёлтый
function mihalica_yw($attr,$content= null){
return'
<div class="yellow_background">'.$content.'</div><p>
';
}
add_shortcode('yw', 'mihalica_yw');
// FIN подсветка текста yw жёлтый

 

 

Этим примером мы обусловим работу свойств/значений шорткода при отработке “завёрнутого” текста в DIV-класс (скажем так)

 

 

4 – срока: имя селектора в файле стилей style.css  .yellow_background – зададим необходимые значения/свойств нужного divа.

 

7 – строка: ИМЯ ФУНКЦИИ обработки значений шорткода (всегда должно быть уникальным) у меня тут оно нескромно обозначено именным вензелем так  mihalica_yw  т.е вы можете сделать сколько угодно вариантов цветов (блоков, или иных информационных сообщений: пример в ЭТОЙ статье) – просто по аналогии повторяя/добавляя в свой файл соответствующие функции обработки по примеру показанному выше, НО !! не забывая каждый следующий пример оформлять уникальным именем. Возможно к буквенному имени функции (уникальности и понятности ради) добавлять цифру, к примеру 2.

Может быть и 4 и 5 и т.д – или какое-то добавочное буквенное имя на англ. наречии: например, любимой дамы или тайного любовника.

 

 

 

Что ж, если прописали примеры, сохраняйте редакцию..!

 

Если обратили внимание на тег <p> в строке 4 то его пока лучше убрать (это для теста html валидатора)

 

 

 

Переходим в файл стилей style.css (он находится в корне вашей темы). Советую, не путаться дабы, пока прописывать нижеследующий код в финал файла стилистики. А потом, когда мало-мало пообвыкнетесь, всё скомпонуете и организуете…

 

 

А вообще, работы с сайтом будет много! Так что предлагаю подписываться:

 

 

 

 

 

 

Продолжим: у себя в файле стилей style.css прописывайте следующий примерный селектор:

 

 

 

.yellow_background{background-color:#FFFF80;color:#000;border:1px solid #FFFF03;border-radius:7px 7px;font-style:italic;padding:10px;margin:5px 10px}

 

 

 

Что мы имеем!?.

 

 

Функции и задачи для работы кнопки редактора вордпресс поставлены.

 

Теперь нам предстоит организовать саму отработку вывода кнопочки в меню редактора, скажем так –

…что ж, давайте напишем и пропишем у себя в корне темы некую программку js

 

 

 

 

 

пишем программку функционала кнопок в редакторе WordPress

 

 

 

 

 

Снова открываем Нотепад++ и создаём новый документ с именем newbuttons.js – этот документ на языке JavaScript – видите расширение «js»?

 

Создали!? Тогда вписываем в него следующий код:

 

 

(function() {
tinymce.create('tinymce.plugins.mihalica', {
init : function(ed, url) {
ed.addButton('yw', {
title : 'Желтый фон',
image : url+'/images/Название_изображения.png',
onclick : function() {
ed.selection.setContent('[yw]' + ed.selection.getContent() + '[/yw]');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('mihalica', tinymce.plugins.mihalica);
})();

 

 

Немного разберёмся, чтобы было понятнее, когда вы станете создавать дополнительные иконки уже сами.

 

 

4 — строка: ed.addButton(‘yw’, { …. «yw» – старт загрузки функционала шорткода.

 

5 — строка: title : ПОДСКАЗКА ИМЕНИ КНОПОЧКИ – ‘Желтый фон’  – понятно.

 

6 — строка: image : url+’/images/Название_изображения.png’, — думаю, вы уже догадались, это, конечно же, название иконки и путь к ней…

 

И 8 строка самая важная на сегодня: [yw] и [/yw] – это и есть имя короткого шорткода (рекомендуется имена шорткодов прописывать в нижнем регистре /маленькими буквами/). А всё что между ними (пока ещё вам непонятная поэтическая зарисовка)) и есть алгоритм ЗАДАЧИ завёртывания выделенного куска текста тегами шорткода, а следовательно и значениями div-классов…

 

 

Ну, что..?

 

…теперь сохраняем наш документ (редактор Нотепад должен быть настроен UTF-8 без BOM. Ну, вы знаете…

 

 

Текстовый же редактор WordPress получил задачи на отработку-функции «подсветка текста» посредством нашей созданной программки.

 

 

 

Почему я взял жёлтый цвет? …его частенько используют, акцентируя внимание читателя на определённом участке текста. Думаю, и вам для великого начала пригодится.

 

 

 

 

 

Далее…

 

…нам потребуется «файловый менеджер» — заходим в папку вашей рабочей темы. В этой папке, среди прочего, должна быть подпапка, с говорящим понятием )) JavaScript, то есть «js» – если её у вас нет — не беда. Создаём её, не забывая указать безошибочно имя js

 

Повторяюсь: коли папочка js уже существует в вашей теме, одноимённую создавать ненужно: не получится! Организовывайте всё в той, которая уже есть.

 

 

…открывайте её, и вгоняйте в неё наш созданный документ)) newbuttons.js.

И чтобы не путаться впредь, сразу же внутри папки js создадим ещё одну (если подобной уже нет) папку images. В ней у нас и будет располагаться наша кнопочка, и все последующие… Но это чуть позже.

 

Почему мы не помещаем картинку в основную папку темы images?? Конечно, можно разместить и в ней, указав соответственный путь… однако – будет правильнее размещать картинки относительно их функций.

 

 

Подытожим наши действия: …у нас должно получиться следующее – в основной папке js документ newbuttons.js ….. и рядом папка images. Это если вы создавали папку js сами, а если использовали родную, то в родной что-то и ещё будет. Всё здорово!

 

ВОТ ТАКОЙ СЛОВЕСНЫЙ КАЛАМБУР ПОЛУЧИЛСЯ – но это я старался понятности для…

 

 

…настало время создать саму

 

 

 

кнопочку в меню визуального редактора

 

 

 

 

 

которая у нас и появится в третьем ряду нашего инструментария.

 

 

 

 

Итак: берите какой там у вас есть фотошоп, шоп смастырить иконку (хорошо бы пользоваться Adobe Photoshop) и мастерите саму кнопку-картинку размером 18×18px в формате .png Придумайте ей какое-нибудь название на ваше усмотрение (на английском языку)).

 

 

Раз мы брали жёлтый цвет, то у меня получился квадратик (иконка на прозрачном фоне) «Y» А у вас что за диво вышло?

 

…теперь берём нашу кнопочку и осторожненько помещаем в папочку images.

 

 

 

Вот – всё замечательно у нас распределено …дальше-больше…

 

 

 

Видите на фото кнопочку «Y»? Правда у меня их теперь там больше, но ничего , и у вас будет столько же. Даже больше! Ведь вы теперь знаете как добавить полезные расширения в редактор WordPress, и с короткими кодами (shortcode) мы также подробнее разберёмся вскорости.

 

 

 

 

 

 

Приступаем к проверке: откройте для редакции любую свою статью.

Смотрите… внимательно, у вас должна появиться иконка-кнопочка, которую мы создавали…

 

 

…И, коли кнопочка нарисовалась в редакторе…

 

Самое время проверить то, что получилось в плане функционала: (если всё верно сделали и кнопка на месте) выделяйте курсором нужный участок текста и — жмите на вашу свеженькую кнопочку редактора, у меня это «Y» …

 

 

Выделенный участок завернётся в теги. Их вы увидите прямо на страничке редакции статьи.

 

 

[yw]В Ы Д Е Л Е Н Н Ы Й Т Е К С Т[/yw]

 

 

И, соответственно заданной нами отработке шорткода,  на выходе (странице сайта) текст оденется в ЖЁЛТЫЙ…

 

 

Теперь изучите всё как следует. Полезно будет!

 

 

 

 

Финал!

 

 

 

И не пугайтесь, коли решите добавлять новые кнопки в редактор. Другой программы и такой объёмной работы выполнять уже не придётся.

Нужно будет только немного отредактировать нашу созданную прогу newbuttons.js добавить по аналогии функционал задач шорткода и нарисовать кнопочку – всё.

Уверяю, когда поймёте принцип работы нынешних кодов, дело обогащения редактора кнопочкам занимает не более 5 минут.

 

 

Смотрите подобный пример, с помощью которого можно добавить контекстную рекламу Правильное добавление рекламы на сайт от Google AdSense и Яндекс

 

 

 

 

 

Как добавить спящие функции в текстовый редактор ???

 

 

 

 

Может кому пригодится…

 

 

…это я расскажу в следующей статье Shortcode (шорткоды) WordPress и их применение ибо в этой я заболтался…

 

 

 

 

 

 

 

 

 

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

 

 

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