BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Как добавить свои кнопки в HTML редактор WordPress?

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

2014-10-14 / Вр:10:53 / просмотров: 9303

Сегодняшняя статья поможет облегчить работу блогеру при написании статей.  В  HTML редакторе блогер может добавить свои кнопки, которые он часто будет использовать. Вот, например, вы часто используете в HTML редакторе WordPress тег  <H3></H3>, и каждый раз прописывать тег для заголовка <H3> забирает у вас время. Для этого стоит один раз установить кнопку, которая будет при нажатии автоматически добавлять к заголовку  <H3></H3>.

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

 

Если включить фантазию, вы сможете вывести не только HTML теги, но и рекламный код, шоркод, таблицы и т.д.

Итак, приступим.

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

Чтобы добавить кнопки в HTML редактор WordPress, нужно сделать маленькое изменение, а точнее, добавление кода в файл «functions.php» вашей темы. Откройте «functions.php» и добавьте в самый конец перед знаком «?>»вот этот код:

if( !function_exists('bloggood_ru_quicktags') ){
function  bloggood_ru_quicktags()
{ ?>
<script ENGINE="text/javascript">
QTags.addButton( 'Название кнопки на латинице', 'Название кнопки в редакторе', 'Открывающая часть тэга', 'Закрывающая часть тэга' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'bloggood_ru_quicktags');
}

Давайте рассмотрим строчку №5 и настроим кнопку. Для примера выведем в HTML редактор WordPress тег <p></p>.
Настройки:

Название кнопки на латинице – пропишем <p>
Название кнопки в редакторе - пропишем <p>
Открывающая часть тэга - пропишем <p>
Закрывающая часть тэга - пропишем </p>

В общем, это будет выглядеть вот так:

QTags.addButton( 'p', 'p', '<p>', '</p>' );

Готовый код:

if( !function_exists('bloggood_ru_quicktags') ){
function bloggood_ru_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'p', 'p', '<p>', '</p>' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'bloggood_ru_quicktags');
}

Результат:

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

Вот так можно добавить несколько кнопок:

if( !function_exists('bloggood_ru_quicktags') ){
function bloggood_ru_quicktags()
{ ?>
<script type="text/javascript">
QTags.addButton( 'p', 'p', '<p>', '</p>' );
QTags.addButton( 'br', 'br', '<br>', '<br>' );
QTags.addButton( 'h3', 'H3', '<h3>', '</h3>' );
QTags.addButton( 'h4', 'H4', '<h4>', '</h4>' );
</script>
<?php }
add_action('admin_print_footer_scripts', 'bloggood_ru_quicktags');
}

Теперь научимся добавлять кнопки в визуальный html редактор wordpress.

Как добавить кнопки в визуальный html редактор wordpress

Бывает парой недостаточно возможностей, которые нам предлагаются в визуальном html редакторе WordPress по умолчанию. Вы можете вывести скрытые кнопки, которые встроены  в редактор WYSIWYG. Кстати, об этом я подробней расписывал вот в этой статье.

Откройте файл functions.php вашей темы и вставьте вот такой код:

function bloggood_ru_buttons($buttons) {
  $buttons[] = 'hr';
  $buttons[] = 'sub';
  $buttons[] = 'sup';
  $buttons[] = 'fontselect';
  $buttons[] = 'fontsizeselect';
  $buttons[] = 'cleanup';
  $buttons[] = 'styleselect';
  return $buttons;
}
add_filter("mce_buttons_3", "bloggood_ru_buttons");

В панели редактора WYSIWYG появится третий ряд с дополнительными кнопками:

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

Это все! До скорых встреч!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

7 Ответов на комментарий - Как добавить свои кнопки в HTML редактор WordPress?

  1. Анастасия

    Очень полезно, спасибо. Я все собираю кнопки, которые добавить хочу, но не соберусь никак

  2. Статья классная!!! Мне честно очень пригодилось, а то приходилось после написания статьи копировать код по отдельности и вставлять в пост. А тут нажал кнопочку и все готово. Отличная функция и Отличный пост! Спасибо за инфу

  3. Avatar photo Степан => автор блога

    Спасибо, Александр!

  4. Pasagir

    Спасибо. Доходчиво. Пригодилось!

  5. Avatar photo Степан => автор блога

    Пожалуйста!

  6. Иван

    Степан молодец. Всё четко разжевал, получилось с первого раза. Правда php кавычки испугали, думал работать не будет, но вроде всё норм.

  7. Avatar photo Степан => автор блога

    Спасибо, Иван!

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716