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


обновлено: 2024-02-13 в теме: Контент, шапка site; Сниппеты, хаки, функции
Запросто с WordPress создание и продвижение сайтов ATs media

Как добавить свои кнопки в текстовый HTML редактор WordPress

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

 

В прошлых статьях рассказывалось о том, как запросто добавить видео к себе на сайт посредством плагина шорткоды И… не используя плагина…  А в сегодняшней мы подытожим обе: модернизируем (упростим) вывод кода в HTML редакторе, а именно добавим свою кнопку YouTube и определимся какой из способов нам более симпатичен.

 

Акуна матата…

 


 

 

 

 

 

Первоначально наш редактор выглядит приблизительно так: (на фотки кликать)

 

 

как добавить свою кнопочку в HTML редактор TinyMCE Advanced

 

 

зелёная стрелка – опция HTML-редактора; красная стрелка – плагин Shortcodes Ultimate и подчёркнуто ниже – скудость выбора кнопочек редактора по умолчанию.

 

 

 

 

 

как добавить свою кнопочку в HTML редактор для вставки кода видеролика

 

 

 

 

 

 

Итак: теперь же приступаем к добавлению кнопок, чтобы у нас получился вот такой функциональный html редактор (фото ниже).

 

 

как добавить свою кнопочку в HTML редактор TinyMCE Advanced для вставки кода видеролика

 

 

Как я и говорил: если вы внимательно изучите вот этот мой пост, вы без труда сможете добавить любую необходимую вам кнопочку, ибо я показал принцип. Кстати, на идею этой добавки натолкнул сайт коллеги  http://filwebs.ru/ Егора,  а я только немного добавил своего.

 

 

 

Поехали… нам потребуются файлы: functions.php (функций) и style.css (файл стилей).

 

 

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

 

 

Ну, давайте… откроем файл functions.php и внесём следующий код:

 

/*** добавление кнопок в HTML редактор ***/
add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
?>
<script>
jQuery(document).ready(function(){
if(typeof(QTags) !== 'undefined') {
QTags.addButton( 'YouTube', 'YouTube', '<div class="teni"><iframe src="VASH_COD" width="320" height="200" allowfullscreen="allowfullscreen"></iframe></div>' );
QTags.addButton( 'warning', 'warning', '<div class="bs-callout bs-callout-warning">ТЕКСТ</div>' );
QTags.addButton( 'danger', 'danger', '<div class="bs-callout bs-callout-danger">ТЕКСТ</div>' );
QTags.addButton( 'info', 'info', '<div class="bs-callout bs-callout-informer"><h4>ЗАГЛАВИЕ</h4>ТЕКСТ</div>' );
QTags.addButton( 'FIN-Staty', 'FIN-Staty', '<p style="text-align: center;"><em>На этом у меня на сегодня решительно всё!..</em></p>');
}
});
</script>
<?php
}
/*** ФИН добавление кноп HTML ***/

 

 

 

Или вот такой вариант, более новый… смотрите что подойдёт более органично к вашему сайту…

 

 

/*** добавление кнопок - HTML редактор другой ***/
add_action( 'admin_print_footer_scripts', 'html_button' );
function html_button() {
if ( wp_script_is('quicktags') ){
?>
<script type="text/javascript">
QTags.addButton( 'SMART', 'SMART', '[ssa]' );
QTags.addButton( 'YSHA', 'YSHA', '[sas]' );
QTags.addButton( 'video', 'video', '<div class="teni"><iframe src="VASH_COD" style="border:0" width="320" height="200" allowfullscreen="allowfullscreen"></iframe></div>' );
QTags.addButton( 'JS', 'JS', '<pre lang="javascript" line="1">\n', '\n</pre>');
QTags.addButton( 'JS', 'JS-NOVY', '<pre><code>', '</code></pre>');
</script>
<?php
}
}
/*** ФИН добавление кнопок - HTML редактор другой ***/

 

 

…теперь немного поясню: как вы помните из прошлой статьи, мы добавляли код видео с канала Ютюб к себе в статью.

 

Смотрите выше, строка 9 – это и есть наш необходимый код. Но теперь он помещён в этакую функцию и будет добавляться автоматически в ваш в пост – как только вы кликните по иконке YouTube. А вам всего-то и останется заместо VASH_COD. добавить адресок нужного видео.

 

Напоминание!! …где отыскать и как выбрать код правильно, читайте: лёгкое добавление на сайт видеоролика YouTube. БЕЗ плагина!

 

 

 

 

добавляем теги кнопок сниппетов в редактор html

 

 

 

 

И ещё !! думаю, кому-то будет полезно – строки 10 – 12 – это возможные пояснения-выделения вашего текста (сниппет) в стиле warning и informer

 

Всё это можно замечательно регулировать по стилистике, а главное, вы сможете добавить любые кнопки, какие только захотите))

…Стоит только по аналогии примеров дописать строчку – так тут же появится и новая кнопка.
Вот так это выглядит наглядно))

 

 

Вот для наглядности общее фото – пример каких-то возможных стилистик:

 

 

 

как добавить свою кнопочку в HTML редактор TinyMCE Advanced для вставки кода видеролика

 

 

 

Обогащаем своими кнопками HTML редактор – для вставки кода видероликов и медиафайлов

 

 

 

Вот несколько дополнений: обратите внимание на примерчик (в ВЕРХНЕМ коде) добавления кнопки “внимание” (warning) и т.п. На мой взгляд, в некоторых случаях подобный вывод тегов несколько неудобен, так как после клика по кнопке выскакивает цельный пример и приходится подставлять текст между тегов, а в этом случае – возможно ошибиться.

 

 

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

 

QTags.addButton( 'warning', 'warning', '<div class="bs-callout bs-callout-warning"><h4>\n', '\n</h4></div>' );

 

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

 

 

Так что – вам выбирать наиболее удобный для себя вариант! А пока внимательнее вглядитесь и отыщите разницу предлагаемых примеров (коли не ясно – спрашивайте).

 

 

Для чего я так сегодня поступил, разделив ВАРИАНТЫ кодов..? …а для того, что у каждого пользователя свои требования!

 

 

Напоминаю: …также вы можете реализовать в своём блоге подсветку текста snippet (сниппет) различных цветов.

Вот только нужные кнопочки будут в этом случае располагаться уже в ВИЗУАЛЬНОМ редакторе и работать посредством шорткода.

 

…И…

 

 

…Финальная глава моей нынешней повести ))

 

 

Откроем файл стилей style.css и в самом его конце поместим вот эти селекторы, расположенные ниже.

 

 

/*инфоблоки*/
.bs-callout {width:100%;height:auto;box-sizing:border-box;padding:10px 20px 10px 20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px}/*ЗНАЧЕНИЯ ВЫНОСКИ ЗАДАЧИ*/
.bs-callout-warning {font-style:italic;border-left-color:#FF7575}/*рамка внимание*/
.bs-callout-informer {font-style:italic;border-left-color:#F9FF4F}/*рамка информации*/
.bs-callout h4 {margin-top:10px}/*ОТСТУП*/
.bs-callout-warning h4 {font-weight:bold;color:#FF0808}/*цвет текста блока внимание*/
.bs-callout-informer h4 {font-weight:bold;color:#39DE07}/*цвет текста инфоблока*/
/*финал инфоблоков*/

 

 

Теги  <h4></h4> – располагайте на своё усмотрение, или исключите вообще… Кому как угодно – предложенные варианты я показал для примера…

 

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

 

Конечно же, стили CSS можно и нужно регулировать на своё усмотрение: комментарии в помощь…

 

 

 

Важное!! будет полезно прочесть Как правильно пользоваться шорткодом или кнопками в HTML редакторе чтобы избежать множества ошибок связанных с использованием расширений.

 

 

А в следующей статье… а в следующей… Подписывайтесь и узнаете (а я пока ещё не придумал тему: хотя, может, что вам интересно – спрашивайте, напишу))

 

 

 

Кстати, вот – очень рекомендую познакомиться меню кнопок в текстовый редактор TinyMCE WordPress – полезные фишки!

 

А это статья рассказывает о том, как создать кнопку в html редакторе добавить видео с youtube указываем во всплывающем окне размеры отображаемого видео для конкретной статьи – без правок кода – легко и просто! с возможностью указания во всплывающем окне размеров конкретного отображаемого ролика.

 

Однако тут дело вот в чём:

Прописка кода в файл functions.php, это дело хорошее !! Однако не всё и вся стоит в него пихать – правильнее (и для скорости загрузки в том числе) сгруппировать некоторые циклы кода в оформленном плагине: легко, надёжно и правильно в плане создания сайта.

Все доказательства «ЗА» читать:

Вот ссылка – как сделать собственный плагин WordPressдобавочный файл my-functions.php

 

 


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


 


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

 

 

Видео для разрядки: Баренцево море, 90-е…

Приводнение венков!

…близ места гибели АПЛ “Комсомолец”

 

 

 

 

Условные теги: пример страницы пагинации – закрываем в noindex,follow

 

 

 


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


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

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





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

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

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

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


  1. Здравствуйте Александр. А я тоже руками привык писать код, есть уже целая библиотека готовых сниппетов.
    Но уж основные, особо часто применяемые мной теги добавил в текстовый редактор. Уж больно он скудноват изначально был :) Удобнее намного с дополнительными кнопочками, к примеру теги заголовков. Я вообще приверженец всего удобного, если это удобное не вредит делу. :)

    Ответить - Егор

    • …касательно «вреда делу:
      И я того же мнения! Но…
      К нам в группу этот сайт пришёл месяца два-три назад — было много ошибок в коде и т.п. Дай, думаю, возьмусь неук) /выпросил у ребят вести тех-сторону/ Короче, (вероятно обратили внимание) сайт тяжеловат: я его загрузил всем тем чем хотел бы…
      А теперь вот как тот скуЛПтор буду отсекать лишнее, всё для НЕ вреда делу… и скорости загрузки ради.
      Но вот боюсь что в скорости мы с нашими сайтами (при наших шустрых услугах хостеров и самого инетпровайдЕрА) — будем бегать с нашими блогами, как с кипами пахнущих краской газет «искра», по домам лично с доставкой. На, мол, юзСэр, смотри какой я с моим сайтиком быстрогрузящийся…

      Это я к тому, что слишком много вредного ноне завелось в SEO-догматике)

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

      • «Это я к тому, что слишком много вредного ноне завелось в SEO-догматике»
        Это бизнесс. Друг sorry, ничего личного.

        Ответить - Егор

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

          Когда кидалу ловят за руку… Коммы излишни.

          Америкосы тоже называли business, когда солярой до по резервациям…

          Я к тому, что инет-бизнесс, как вы называете, своим историческим временем иде-то рядом и индейскими бусами, пока что…

          Так шты об бизнесе не бум.

          Я бы иным словом это назвал: но за столом негоже.

          Ничего личного, конеш.

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

  2. Подскажите пожалуйста как быть если нужно сделать вставку в текст статьи – кода из нескольких строчек?
    получается вставить только если пишу весь код в одну строчку!
    а в две строчки и более не работает

    Ответить - Алексей

    • Здравствуйте, Алексей!
      Если Вы хотите перенести текст, используя код этой статьи, то дописываете так:

      QTags.addButton( 'SOTSSETY', 'SOTSSETY', '<p style="text-align: center;">ВАШ ТЕКСТ.<code>\n</code> ВАШ ТЕКСТ, но НА НОВОЙ СТРОКЕ</p>');

      Обратите внимание на обратный слэш и n между нужным текстом \n – это перенос.

      В HTML делается так: там где нужно перенести добавляете тег

      <br />
      Ответить - Михаил

      • Спасибо огромное!

        Ответить - Алексей

  3. Михаил а не подскажите ещё как можно доработать то что есть
    Для вставки видео с ютуба чтобы оно было адаптивным использую следующий код

    add_action( 'admin_print_footer_scripts', 'html_button_class' );
    function html_button_class() {
    	if ( wp_script_is('quicktags') ){
    ?>
    	
            QTags.addButton( 'my_prompt', 'YouTube', div_class);
            function div_class() {
            var new_class = prompt( 'Введите часть ссылки кода видео с YouTube:', '' );     
            if ( new_class ) {
            QTags.insertContent('');
          }
        }
    	
    <?php
    	}
    }

    в нем выводится окошко куда вставляю часть кода ссылки с ютуба
    Задумался над микроразметкой видео Подскажите Пожалуйста! как можно дополнить чтобы в открывающемся окошке можно было вводить не только ссылку но еще и другие параметры (чтобы поле ввода было не одно а несколько)?

    Ответить - Алексей

    • …я не совсем понял что Вы хотите…
      Если с модальным окном (т.е с подменю для ввода информации – в визуальном редакторе) – всё делается несколько иначе…
      Во-вторых, у Вас код, возможно, не совсем верный – странный какой-то)) и (проверьте у себя: параметры должны быть в одинарных апострофах ‘ . И Джава не указан: (или в КОММЕ ПРОПАЛ) – код вообще рабочий конкретно у Вас?

      <script type="text/javascript">
      парам...
      </script>

      Такой код давно известен.

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

      А вообще нужно видеть Ваш код целиком, чтобы помочь…

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

  4. _были неважные ссылки сам код
    _были неважные ссылки окно в редакторе
    вот к нему бы добавить еще другие поля для ввода…

    Ответить - Алексей

    • Понял! Визуально – код рабочий…
      …пришлите мне его на ***@yandex.ru попробую потестить… (у себя в zip-файлах лень искать)

      А какие поля Вы ещё хотите добавить? Вряд ли что-то кроме дивов будет логично… Или Вы хотите помимо видео, предположим – АУДИО..? …просто напросто другим параметром дополнить (вариантом).
      О Schema.org к примеру, я пояснял…

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

  5. отправил на почту

    Ответить - Алексей

  6. Умная голова сто голов кормит, а худая и себя не прокормит. Спасибо за умные советы и полезную статью.

    Ответить - Адениум.

    • …и где Вы такую толковую пословицу отыскали…
      Овёс и ноне дорог – де лошадёнка голодает)
      ))

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

  7. Михаил, вопрос на засыпку: а вы пробовали добавить дополнительные кнопки вставляя выше приведенный код не в плагин my-functions а непосредственно в файл functions.php ? Дело в том, что вставляю код в functions.php кнопки не появляются, вставляю в плагин my-functions всё ОК! Тестил на последней версии WordPress 4.7.3 а так же на версии WordPress 4.5 не добавляются кнопки. Как вы считаете в чём может быть причина?

    Ответить - Дмитрий

    • а вы пробовали добавить дополнительные кнопки вставляя выше приведенный код не в плагин my-functions а непосредственно в файл functions.php

      Конечно, пробовал! приведённый код обычно новички используют в файле функций. Об этом и статья.

      Однако я делаю на различных сайтах по-разному (в зависимости от требований)… в том числе и на сайтах заказчиков: как первый вариант с my-functions так и второй с файлом functions.php – работают.
      На 4.7.3 не пробовал, но, думаю, естественно – пойдёт…

      Как вы считаете в чём может быть причина?

      Коды идентичны как для 1-варианта, так и для 2-го. однако:
      …использовать или вариант с плагином, или же с файлом функций – иначе конфликты, – либо, для одновременного использования /что не целесообразно/) изменять имена функций привязок для отдельно взятых кнопок: но это излишняя морока.

      Либо банальная ошибка у Вас – “не отключение плагина”; в скрипте кода; кэше и пр..!

      ps|
      используйте более современный)) код из статьи – второй.

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

      • Либо банальная ошибка у Вас — «не отключение плагина»; в скрипте кода; кэше и пр..!

        ps|
        используйте более современный)) код из статьи — второй.

        Я попробовал в качестве теста на чистом сайте, на котором никогда не стоял плагин My-Functions.

        Был вставлен второй, более новый код.

        Уже не надеюсь на очистку кеша в браузере, поэтому результат смотрел в другом браузере, кеширование точно исключаем.

        Для отчётности сделал скриншоты:

        Кнопок нет! Я в полной растерянности (((

        Ответить - Дмитрий

        • Вы оставьте какую-то одну кнопку, например, для вывода шорткодов,
          QTags.addButton( 'SMART', 'SMART', '[ssa]' );
          – и тестите…
          Ну, вот такой к примеру:

          /*** добавление кнопок в HTML редактор ***/
          add_action( 'admin_print_footer_scripts', 'html_button' );
          function html_button() {
          if ( wp_script_is('quicktags') ){
          ?>
          <script type="text/javascript">
          QTags.addButton( 'YSHA', 'YSHA', '[ssa]' );
          </script>
          <?php
          }
          }
          /*** ФИН добавление кнопок в HTML ***/

          Сейчас проверил на 4.7.3: кнопка на месте…
          Проверяйте файл функций темы…

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

          • Проверяйте файл функций темы…

            Уже попробовал на 3 разных сайтах, с разными версиями вордпресса. Ситуация на всех 3 сайтах аналогичная, кнопок нет (((

            Вы оставьте какую-то одну кнопку, например, для вывода шорткодов

            Специально оставил все кнопки, чтобы код не отличался от вашего. Куда копать не знаю?

            Ответить - Дмитрий

  8. Почему то удалились ссылки на скриншоты, попробую добавить в тегах code:

    Ответить - Дмитрий

    • Ссылки я удалил: ни к чему они здесь…
      Скрины – посмотрел… в коде всё чисто! нормально.
      ps|
      В теги code всегда нужно код завёртывать…

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

      • Кроме кода добавления кнопок у меня в functions.php добавлено много других скриптов, которые работают нормально. Не работают именно функции выводящие какие-либо поля в админке вордпресса. Как только вставляю код в плагин My-Functions всё начинает работать на ура! Что это может быть?

        Ответить - Дмитрий

        • Плагин отрабатывает несколько – чуть иначе в этом смысле – от файла функций…

          Что это может быть?

          Конфликт с “Вашими” (или темными) скриптами functions.php – тестить методом исключения других кодов связанных по файлу фу…

          Всё это нужно видеть что называется “в живую”… чтобы отыскать ошибку или конфликт.

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

          • У меня уже возникала такая же мысль. Я удалил все функции из файла functions.php, оставил только код дополнительных кнопок. Кнопок нет! (((

            Как только устанавливаю плагин My-Functions кнопки появляются! Нет никакого кеша, кнопки появляются сразу. Неужели у меня одного такая ситуация?

            Пробовал с другого сайта код добавляющий дополнительное поле "description" при редактировании рубрик. Аналогичная ситуация! В functions.php не работает, в плагине My-Functions всё работает отлично! Буду разбираться (((

            Ответить - Дмитрий

            • Да, разбираться нужно – это ошибка! Темы, может быть (или фича какая в ней есть).

              дополнительное поле “description” при редактировании рубрик

              Это с Сео-Маяк (Кириллова код)?? Код хороший, должен работать и у Вас… и в плагине и в файле функ. если установить.

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

              • Да сео маяк. Ошибку разобрал, пишу отчёт…

                Всё просто до безобразия. Код надо вставлять в самое начало файла functions.php сразу после тега <?php и кнопки сразу появляются!!!

                Либо использовать плагин My-Functions в нем всё-равно куда вставлять код, как показала практика.


              • Не уверен, что ошибка только в этом… код кнопок прописывается практически в любое место файла functions (я, например, организую всё в темные-функ. блоки – чтоб искать при надобности удобнее было) а в этом случае, как понимаете, многое из кодов после тега <?php вписать не получится! – так что…
                Вот совет: уберите в файле функций закрывающий тег ?>. В php файлах это допустимо, да и удобнее так…


  9. Закрывающего тега ?> у меня нет.

    Само собой понятно, что если функцию вывода кнопок прописываю в начале – она работает, а в конце – нет, то это конфликт с какими то фуекциями которые уже были в теме. Выяснять с каким кодом конфликт, у меня честно говоря нет желания, проще прописать функцию вывода кнопок в начале. Спасибо вам за помощь в выявлении причины проблемы!

    Ответить - Дмитрий

    • Неплохо бы выяснить где “пробка”… иначе в будущем мало ли что…
      И Вам спасибо !! за комменты и активность)

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