Шорткоды (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 и перезаписать его на хостинге. В результате после обновления страницы у вас получится следующее.

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

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