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


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

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

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

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


 

 

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

 

 

 

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

 

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

 

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

 

 

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

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

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

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

 

 

 

Итак!

 

 

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

 

Не густо!

 

 

 

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

 

 

 

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

 

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

 

 

 

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

 

 

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

 

 

 

 

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

 

 

 

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

 

 

 

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

 

 

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

 

 

 

 

Приступим:

 

 

 

 

 

Кстати, для тех которые не очень-то любят заморачиваться с кодом вручную и вообще сторонники быстрого подхода к делу, вот неплохая тема для 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 сами, а если использовали родную, то в родной что-то и ещё будет. Всё здорово!

 

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

 

 

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

 

 

 

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

 

 

 

 

 

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

 

 

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

 

 

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

 

 

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

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

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

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

 

Финал!

 

 

 

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

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

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

 

 

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

 

 

 

 

 

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

 

 

 

 

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

 

 

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

 

 

Важное!! настоятельно рекомендую познакомиться со следующей статьёй, в ней рассматриваются эти кнопочные идеи подробнее, а важнее того – подсказки, как ПРАВИЛЬНО СОЗДАВАТЬ И ИСПОЛЬЗОВАТЬ подобные расширения текстового HTML/визуального редактора WordPress: правильное использование созданных кнопок, шорткодов

 

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

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

 

Если кому нужны различные цвета или какие-то полезные добавки в показанном коде, но вы пока затрудняетесь прописать его в недрах своего сайта, СМЕЛО пишите мне!

Дам на скачивание более полный шаблон файла newbuttons.js а вы уж его сами разовьёте под себя…

 

СИНИЙ и т.п.Спасибос

 

 

В качестве честнейшей рекламы:

…вот статья (аналогия сегодняшней, и, возможно, более доступная и лёгкая для реализации идей)  МЕНЮ кнопок в текстовый редактор TinyMCE WordPress – очень рекомендую!

 

…кстати, код, показанный в сегодняшней статье – Виталия Кириллова. Я его немного подредактировал под себя и снабдил именным вензелем mihalica удобства ради…

Можете взглянуть “о кнопках…” на сайте SEO-маяк: пройдите ко мне в лист dofollow там и найдёте ссылку…

 


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

 

 


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

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


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

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





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

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

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

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


  1. Делаю все так, как вы говорите.
    Появляется пустая строка но кнопок там нет…

    Ответить - Виталий

    • Здравствуйте Виталий!
      Пробежался по тексту (попробовал коды на тестовом сайте) — всё получилось… Но, возможно, это просто на автомате…
      Совет такой (поймите, тут всё просто) СНОВА – откройте файл functions.php и пропишите последовательно все коды: самый первый (код регистрации кнопок) и 2й — код задачи функций отработки шорткода с оператором return.
      Создавайте (в папке js) файл newbuttons.js и в него поместите соответствующий код.
      Самое главное: для начала пробуйте выполнить задачу ничего не меняя в именах и путях подключения. Папка js (в ней папка с картинкой) должна быть в той же директории что и файл функций, т.е в корне шаблона! Кнопку делайте не более 20х20 лучше чуть меньше (очень возможно, что в этом и закавыка)).
      …или что где-то как-то совершили ошибку.
      Так как Вы первый комментатор статьи, не стесняйтесь пишите, обязательно помогу… ибо статья написана прежним автором сайта — и теперь мой долг разобраться и помочь читателям.

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

  2. Копирую пример вставляю, все по инструкции…ничего не пойму, смотрю в сформировавшийся код, там просто пустой див

    Ответить - Виталий

    • О каком диве речь, не пойму..?
      в примере с оператором return задаётся только обозначение выделенного текста в определённый div-класс, свойства которого цепляются из селекторов CSS, т.е из файла стилей. Все значения поля (сниппета) задаются в style.css

      У вас кнопка появилась?? и в текстовом редакторе — текст завёртывается в теги шорткода?? Что на выходе!? если ошибка в файле функций, то на выходе должны быть костяшки (пустые теги) шорткода. Если тегов не видно (кроме как в редакторе)- значит всё правильно. Задавайте стили.

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

  3. Александр спасибо за то, что помогаете. Сделал как в статье “Добавляем меню кнопок в текстовый редактор TinyMCE WordPress”
    Полка этого более чем достаточно. С шорткодами позже заморочусь. Еще раз спасибо. Вы делаете хорошее дело!

    Ответить - Виталий

    • В общем да! На мой взгляд тот вариант удобнее в каком-то плане…
      Всё же уделите внимание и шорткодам, ибо во всех вариантах есть свои плюсы. Главный плюс шорткода в том, что при необходимости запросто всё можно перенастроить во всех статьях сайта РАЗОМ: легко и просто – и грязи не останется. Т.е шорткод никаких лишних теговых конструкций непосредственно в статье не несёт.
      Примочками нужно пользоваться правильно и по возможности с самого начала управления контентом сайта.
      Желаю удачи. Обращайтесь, коли что…

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

  4. Полностью с Вами согласен. В ближайшие дни обязательно займусь этим вопросом. Еще раз большое спасибо!!!

    Ответить - Виталий

  5. У Вас … ачепятка (скажу так). После слов “…вновь делаем курсором несколько пробелов от тега ?> и помещаем следующий ниже код:” (не знаю как указать место точнее) надо вместо “yellow” писать Вами же принятый код “yw”. C такой поправкой у меня получилось, по крайней мере…
    Спасибо, пригодилось :-)

    Ответить - Genna

    • Здравствуйте Genna!
      Да, совершенно верно!! опечатка вкралась тайкма)
      Дело в том, что однажды пришлось статью переделывать, ибо в ней были примеры со старой ныне невалидной организацией CSS.
      Кое что подправлял в именах коротких шорткодов и, видать, обмолвился)… вот и сегодня пришлось поработать редактором.
      Спасибо за комментарий и дельное замечание… и я вовсе не оправдываюсь, ибо ошибка есть ошибка, – но поясняю читателям: не ленитесь, спрашивайте…
      …ведь бывает так, что и не знаешь как править подобные статьи – вроде бы тебе всё это ясно как божий день, но кому-то из новичков многое не понятно: правишь… правишь… добавляешь/убираешь подробности и т.п. Отсюда и “зевки”…
      Ещё раз спасибо…

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

  6. Спасибо автору – враз разобралась… малость с жс не поняла поначалу ))))))))))) )))))))))
    …вот только хочется добавить небольшую картиночку на фон, как у вас в блоке, но пока не пнимаю как это организовать.Рисую сайт на локалке по вашей статье, а там кнопки наезжают на текст – скажите может это потому что на локалке пока??
    Создаю сайт “женщина без мужчины” о том как забивать гвозди!!)) Если сделаю, буду заходить официально с ссылкой, если позволите с такой темой))
    Спасибо Алекс за труд)

    Ответить - Валерия

    • Здравствуйте Валерия!! …это Вы удачно зашли))

      Заходите, буду ждать таких отчаянных читателей и коллег строителей веб)

      Локалка тут ни при чём – в css закавыка сокрыта.
      Именно в этой статье я не давал вариант с иконкой, но в иных есть… Припомню в которой, дам ссылку: там всё просто, как в жс))
      Подозреваю, что Ваш сайт будет востребован… ибо и я не умею колотить гвозди)
      Удачи…

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

  7. Спасибо Автору! Полезные и практичные примеры.
    Я нашел то, что искал + практический навык.
    ПОЛЕЗНО и доходчиво.

    Ответить - Genna

    • Вам спасибо, Genna, за визит и прочтение внимательное и правильное))
      Удачи в работе и творчестве кодировок!

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