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

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

Как добавить свои кнопки в текстовый 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', '[SSS]' );
QTags.addButton( 'YSHA', 'YSHA', '[SS]' );
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 редактор — для вставки кода видероликов и медиафайлов

 

 

 

 

Вот несколько дополнений: обратите внимание на примерчик (в ВЕРХНЕМ коде) добавления кнопки «внимание» (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 — полезные фишки!

 

 

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

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

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

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

 

 


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

 


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

 

 

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

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

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

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


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


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

  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. _http://imglink.ru/pictures/29-05-16/6d111e99b785dcbc3d981d0753c65255.jpg сам код
    _http://imglink.ru/show-image.php?id=78410da34dc6d15ffdcca7ed269c8d81 окно в редакторе
    вот к нему бы добавить еще другие поля для ввода

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

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

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

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

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

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

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

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

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

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

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

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