
Из данной статьи вы узнаете о двух очень важных моментах в работе с 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.
Подскажите пожалуйста как вставить ссылку в шорткод? Есть к примеру такой шорткод в функшон.пихапи:
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