Шорткоды (shortcode) WordPress. Как добавить новые кнопки в редактор WordPress

Logo
Шоткаты (shortcode) Wordpress. Как добавить новые кнопки в редактор Wordpress

Из данной статьи вы узнаете о двух очень важных моментах в работе с WordPress – shortcode WordPress и добавлении кнопок в редактор Wordrpess. Шорткоды (shortcode) используются для простого добавления кода на сайт при помощи специальных коротких идентификаторов. Это сильно облегчает работу при добавлении больших участков кода, например, при добавлении рекламных блоков Google Adsense в материалы сайта WordPress. Кроме этого мы также рассмотрим процесс добавления дополнительных кнопок в редактор WordPress на примере кнопки созданного нами шорткода рекламных блоков Google Adsense.

Шорткоды (shortcode) WordPress

Шорткоды являются прекрасным решением при вставке кода на сайт и широко применяются вебмастерами во всем мире. С их помощью можно с легкостью вставить любой код на сайт WordPress, например, рекламный блок Google Adsense. При этом код вставки будет выглядеть примерно следующим образом.

[shortcode_1]

где, shortcode_1 – идентификатор нужного нам шорткода.

После вставки на месте данного кода выведется содержимое соответствующего шорткода. Как видите, это очень удобно, особенно если вы очень часто любите менять код. Например, вы используете рекламные блоки Google Adsense в тексте статей и вдруг вам захотелось вместо них отображать рекламные блоки Яндекс Директ. Для этого вам не нужно будет править каждую статью отдельно. Достаточно просто заменить в шорткоде код Google Adsens на код Яндекс Директа.

Ну а теперь давайте сразу перейдем непосредственно к инструкции по созданию шорткодов в WordPress.

Как создать шорткод (shortcode) в WordPress

Для того чтобы создать шорткод в WordPress, первым делом открываем на редактирование файл function.php вашей темы оформления. Если его нет, то создаем данный файл вручную. Для этого создаем новый файл с расширением php и даем ему имя function. Внутри него открываем php-блок (<?php ?>) внутри которого (между <?php и ?> ) будет прописываться код шорткода. Если же файл function.php у вас есть, то код шорткода добавляем в конец файла перед закрывающим тегом «?>».

Синтаксис создания шорткодов в Wordrpess следующий.

/*Создаем функцию*/
function имя_функции (параметры) {
Тело функции
}
/*Создаем шорткод*/
add_shortcode ('имя шорткода', 'имя функции');

Как видите, сначала нам нужно создать функцию php, которая будет вызываться посредством шорткода. В качестве примера мы можем создать функцию, которая будет выводить рекламные блоки Google Adsense.

Далее мы создаем сам шорткод. Для этого в качестве параметра функции add_shortcode() мы передаем имя шорткода и имя функции, которая будет вызываться в месте, где будет обнаружен код вызова шорткода. Для более полного понимания давайте рассмотрим пример шорткода для вывода рекламного блока Google Adsense.

/*Создаем функцию*/
function adsense_468x60() {
return '<script type="text/javascript"><!--
google_ad_client = "ca-pub-0195254549404429";
/* page-top-468x60 */
google_ad_slot = "8832447580";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>';
}
/*Создаем шорткод*/
add_shortcode ('ads_1', 'adsense_468x60');

В примере выше мы видим, что сначала создается функция adsense_468x60(), которая в качестве результата возвращает код рекламного блока Google Adsense (return ‘код рекламного блока’; ). Далее мы создаем сам шорткод и даем ему имя ads_1, а в качестве функции указываем функцию adsense_468x60. Теперь для вызова функции adsense_468x60, которая выводит код рекламного блока Google Adsense, достаточно в тексте статьи указать следующий код.

[ads_1]

Как только обработчик обнаружит данный код, он сразу же приведет в исполнение соответствующую функцию, которая выведет на месте шорткода код рекламного блока Google Adsense.

Теперь давайте перейдем ко второй части статьи и рассмотрим процесс добавления дополнительных кнопок в редактор WordPress. В качестве примера мы также рассмотрим процесс добавления кнопки созданного нами шорткода в HTML редактор WordPress.

Добавление новых кнопок в редактор WordPress

Для того чтобы добавить новые кнопки в редактор WordPress нам придется править специальный файл quicktags.js, который находится по адресу ваш сайт/wp-includes/js/quicktags.js. Для этого открываем данный файл на редактирование и ищем там следующий код.

edButtons[edButtons.length]=new edButton("ed_more","more","<!--more-->","","t",-1);

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

edButtons[edButtons.length]=new edButton("ed_name","текст на кнопке","открывающий тег","закрывающий тег","");

где name – имя создаваемой кнопки.

Для добавления кнопки, которая будет вставлять только определенный код можно воспользоваться следующим шаблоном.

edButtons[edButtons.length]=new edButton("ed_name","текст на кнопке","код для вставки","","",-1);

Ну а теперь давайте перейдем непосредственно к рабочим примерам.

Код для добавления в редактор WordPress кнопки заголовков второго уровня H2

edButtons[edButtons.length]=new edButton("ed_h2","h2","<h2>","</h2>","");

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

Теперь давайте рассмотрим код для вставки кнопки шорткода (см. пример выше), который будет выводить рекламные блоки Google Adsense в тексте статей.

edButtons[edButtons.length]=new edButton("ed_ads_1","ads_1","[ads_1]","","",-1);

После добавления соответствующих кнопок не забываем сохранить файл quicktags.js и перезаписать его на хостинге. В результате после обновления страницы у вас получится следующее.

Добавление новых кнопок в редактор WordPress

Как видите, процесс добавления кнопок в редактор Wordrpess очень простой и не займет много времени. Если же у вас вдруг возникнут какие-то вопросы или трудности при создании шорткодов или добавлении новых кнопок в редактор, вы всегда сможете задать свой вопрос в комментариях к статье.

На этом все. Удачи вам и успехов в освоении Wordrepss.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 14

  • Евгений

    Подскажите пожалуйста как вставить ссылку в шорткод? Есть к примеру такой шорткод в функшон.пихапи:

    function my4 () {return ‘  ‘;}

    add_shortcode (‘lessons’,’my4′);

    Как вставить туда вывод пихапи файла через инклуд пихапи: ‘http://сайт.com.ua/wp-content/themes/шаблон/lessons.php

    Очень надо, подскажите плиз!

  • Дмитрий

    Можете написать обычную функцию, а потом вызвать ее при помощи шорткода. Чтобы сказать что-то более конкретное, мне нужно все проверить. Я не могу написать вам код, если я полностью не уверен в его работоспособности. Иногда вроде все и правильно, но почему-то не работает. То есть нужно все проверять. В общем если хотите, то можете написать мне в «Контакты» и напомнить вечером. Просто я сейчас ухожу на тренировку и меня не будет до вечера.

  • Игорь Гордеев

    Вы предлагаете редактировать файлы самого движка, а это неудобно потому, что это придется делать при каждом обновление движка. Есть способ проще и легче через функцию wordpress studio-gost.ru/wordpress-redaktor-dobavlenie-knopok/

  • Дмитрий

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

  • Александр

    Игорь Гордеев, ваша функция не работает :(

  • Дмитрий

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

  • Олег

    Спасибо! Очень полезная статейка оказалась! значительно сокращает время

  • Дмитрий

    Был рад помочь. Заходите на сайт снова, а также подписывайтесь на новостную рассылку. Здесь еще много чего полезного есть.

  • Григорий

    Здравствуйте, подскажите как сделать чтобы шоткат выводил сам код непосредственно в редактор.Т.е чтобы вместо [shortcode] был код который я вставляю в шоткат.Очень нужно!

  • Дмитрий

    В примере все это описано. Читайте внимательнее. Там есть пример кода для добавления кнопки в редактор WordPress, при нажатии на которую в редакторе будет появляться нужный код. Этот код можно самостоятельно задать на этапе добавления новой кнопки в редактор WordPress.

  • Григорий

    К сожалению по вашему примеру кнопка в редакторе не появлилась, да и данного кода edButtons[edButtons.length]=new edButton("ed_more","more","<!—more—>","","t",-1); в файле quicktags.js у меня нет, есть подобный edButtons[120]=new edButton("ed_more","more","<!—more—>","","t"), после него и вставлял.

  • Дмитрий

    Значит сделайте аналогичным образом, но без "-1". Если после манипуляций с кодом кнопка не появится, то причин может быть две: 1. Была допущена ошибка при добавлении кнопки. 2. На сайте установлен плагин, который подключает свои кнопки. В этом случае придется редактировать файл плагина. Такое тоже иногда случается. Для решения проблемы используйте поиск по файлам. Для этих целей прекрасно подойдет программа Total Commander.

  • Григорий

    стоит плагин TinyMCE Advanced

  • Дмитрий

    Используйте поиск по файлам, чтобы найти нужный файл для редактирования. В качестве параметра для поиска используйте кусочек кода из файла quicktags.js

Оставить комментарий

отменить ответ