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

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

 

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

 

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

 

 

 

 

 

 

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

 

 

 

 

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

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

Как я и говорил: если вы внимательно изучите вот этот мой пост, вы без труда сможете добавить любую необходимую вам кнопочку, ибо я показал принцип. Кстати, на идею этой добавки натолкнул сайт коллеги  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 редактор – для вставки кода видероликов и медиафайлов

 

 

 

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

 

 

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

 

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

 

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

 

 

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

 

 

 

 

 

…И…

 

 

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

 

 

Откроем файл стилей 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 можно и нужно регулировать на своё усмотрение: комментарии в помощь…

 

 

 

 

 

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

 

 

 

 

 

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

 

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

 

 

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

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

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