Шорткоды WordPress

Введённые начиная с версии WordPress 2.5, шорткоды - это мощная, но до сих пор малоизвестная функция WordPress. Представь, что ты можешь просто напечатать "adsense" что бы показывать рекламу AdSense или "post_count", что бы моментально узнать количество постов в твоём блоге.

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

Что такое шорткоды(shortcode)?

Шорткоды WordPress

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

[showcase]

Так же с шорткодами есть возможность использовать атрибуты. Тогда они будут выглядеть так:

[showcase id="5"]

Шорткоды также позволяют встраивать контент:

[url href="http://www.smashingmagazine.com"]Smashing Magazine[/url]

Шорткоды управляются набором функций, введённых в WordPress 2.5 и называемых Shortcode API. Когда пост сохранён, его содержание парсится и Shortcode API автоматически трансформирует шорткоды для исполнения возложенной на них функции.

Создание простого шорткода

Шорткоды очень просто создать. Если ты знаешь, как написать простую Php-функцию, то ты уже знаешь, как создать WordPress шорткод. Для начала давай создадим известное сообщение "Привет, мир"

1. Открой файл functions.php твоей темы. Если его нет, то создай.
2. Первое, мы должны создать функцию для вывода строки "Привет, мир". Вставь следующий код в твой файл functions.php:

function hello() {
return 'Привет, мир!';
}

3. Теперь у нас есть функция, мы должны превратить её в шорткод. Это очень просто сделать, благодаря функции add_shortcode(). Вставь эту строку после нашей функции hello(), потом сохрани и закрой файл functions.php:

add_shortcode('hw', 'hello');

Первый параметр это имя шорткода, а второй это имя функции.

4. Теперь, когда шорткод создан, мы можем использовать его в постах и на страницах. Для этого просто переключись в HTML режим и введи следующее:

[hw]

Вот и всё! Конечно, это очень простой шорткод, но это хороший пример того, насколько просто их создавать.

Создание продвинутых шорткодов

Как упоминалось, шорткоды могут быть использованы с атрибутами, которые очень полезны. В этом примере мы покажем тебе, как создать шорткод для вывода URL, точно так же, как ты это делал с BBCode на форумах вроде VBulletin и PHPBB.

1. Открой твой файл functions.php. Вставь в него следующую функцию:

function myUrl($atts, $content = null) {
extract(shortcode_atts(array(
"href" => 'http://'
), $atts));
return '<a href="'.$href.'">'.$content.'</a>';
}

2. Теперь преобразуем функцию в шорткод:

add_shortcode("url", "myUrl");

3. Шорткод создан. Ты можешь использовать его в постах и на страницах примерно так:

[url href="http://www.wp-info.ru"]WP-INFO.ru - настройка WordPress[/url]

Когда ты сохранишь пост, шорткод выведет ссылку озаглавленную "WP-INFO.ru - настройка WordPress" и ведущую на http://www.wp-info.ru.

Объяснение кода. Для правильной работы, функции нашего шорткода необходимо обращаться с двумя параметрами: $atts и $content. $atts(attribute(s)) это шорткод-атрибут. В этом примере атрибут называется href и содержит ссылку на URL. $content это содержание шорткода, встроенное между доменом и поддиректорией(т.е. между "www.example.com" и "/subdirectory"). Как ты можешь убедиться в коде мы дали $content и $atts значения по-умолчанию.

Теперь мы знаем, как создать и использовать шорткоды, давай заценим несколько готовых к использованию шорткодов!

1. Шорткод Отправить в твиттер

Шорткоды WordPress

Цель. Выводить ссылку для отправки поста в твиттер.

Этот шорткод просто создать. Вставь следующий код в файл functions.php твоей темы:

function twitt() {
return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Кликни и отправь этот пост в твиттер!" >Отправить в твиттер</a></div>';
}

add_shortcode('twitter', 'twitt');

Чтобы его использовать, просто переключись в HTML-режим и введи:

[twitter]

И ссылка Отправить в твиттер появится там где ты оставил шорткод.

2. Создать шорткод "Подпишись на RSS"

Шорткоды WordPress

Ты уже знаешь, что очень хорший способ увеличить количество RSS подписчиков это показывать, хорошо оформленное сообщение, которое говорит, что-то вроде "Подпишись на RSS фид". Но снова, нам не особо нужно конкретно менять код нашей темы и терять контроль над тем, где появляется это сообщение. В этом приёме мы создадим шорткод "Подпишись на RSS". Показывать в одних местах, в других не показывать, в постах и на страницах, наверху и внизу основного контента, решать тебе.

Как и раньше мы создаём функцию, а потом переводим её в шорткод. Этот код должен быть в твоём файле functions.php. Не забудь изменить URL фида в примере на твой собственный!

function subscribeRss() {
return '<div class="rss-box"><a href="http://feeds.feedburner.com/vverxcom">Понравился пост? Подпишись на мой RSS фид!</a></div>';
}

add_shortcode('subscribe', 'subscribeRss');

Стилизация. Ты возможно заметил класс rss-box, который добавлен в div, содержащий ссылку. Он позволит тебе стилизовать сообщение по вкусу. Вот пример некоторого CSS стиля, который ты можешь применить на своём сообщении. Просто вставь его в файл style.css своей темы:

.rss-box{
background:#F2F8F2;
border:2px #D5E9D5 solid;
font-weight:bold;
padding:10px;
}

3. Вставляй Google AdSense везде где хочешь

Шорткоды WordPress

Многие блоггеры пользуются Google AdSense. Очень просто вставить код AdSense в файл темы, такой как sidebar.php. Но успешные онлайн маркетологи знают, что люди кликают чаще на рекламу, которая встроена в контент.

Что бы встроить AdSense в любом месте твоего поста или страницы, создай шорткод:

1. Открой файл functions.php твоей темы и вставь следующий код. Не забудь заменить код JavaScript своим собственным кодом AdSense!

function showads() {
return '<div id="adsense"><script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXX";
google_ad_slot = "4668915978";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>';
}

add_shortcode('adsense', 'showads');

2. Сохранив изменения в functions.php, ты можешь использовать следующий шорткод для отображения AdSense в любом месте твоих постов и страниц:

[adsense]

Заметь, что наш код AdSense обёрнут в div с id="adsense", мы можем добавить ему стиля в файле style.css.

Объяснение кода. Верхний код использован просто для вывода объявлений AdSense. Когда шорткод вставлен в пост, он возвращает AdSense объявление. Это довольно просто, но согласись реально экономит время!

4. Встроить RSS поток

Шорткоды WordPress

Давай встроим RSS поток прямо в наши посты и страницы. (Этот трюк глючит с русской кодировкой, если кто знает причину, пожалуйста отпишитесь в каментах)

Как обычно, что бы этот трюк удался, просто скопируй следующий код в файл function.php твоей темы.

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
extract(shortcode_atts(array(
"feed" => 'http://',
"num" => '1',
), $atts));

return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

Что бы использовать шорткод, введи:

[rss feed="http://feeds.feedburner.com/wprecipes" num="5"]

Аттрибут feed это URL, встраиваемого фида, а num, это количество постов для вывода.

5. Бери посты из базы данных WordPress с помощью шорткодов

Когда-нибудь хотел вызывать список связаных постов прямо в редактор WordPress? Конечно, плагин "Simple Tags" или "Related posts" может показать связанные записи, но с шорткодом ты можешь легко получить список любого числа постов из отдельной категории.

Вставь этот код в твой файл functions.php.

function sc_liste($atts, $content = null) {
extract(shortcode_atts(array(
"num" => '5',
"cat" => ''
), $atts));
global $post;
$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
$retour='<ul>';
foreach($myposts as $post) :
setup_postdata($post);
$retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
endforeach;
$retour.='</ul> ';
return $retour;
}
add_shortcode("list", "sc_liste");

Для использования вставь следующее в редактор WordPress, в HTML режиме:

[liste num="3" cat="1"]

Это выведет список трёх постов из категории с ID 1.

Объяснение кода. После извлечения аргументов и создания глобальной переменной $posts, функция sc_liste() использует функцию get_posts() с параметрами numberposts, order, orderby и category, что бы получить Х наиболее похожих постов из Y категории. После этого, посты встраиваются в виде HTML списка и выводятся на экран.

6. Вызывай картинку последнего поста

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

Открой файл functions.php и вставь следующий код:

function sc_postimage($atts, $content = null) {
extract(shortcode_atts(array(
"size" => 'thumbnail',
"float" => 'none'
), $atts));
$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
foreach( $images as $imageID => $imagePost )
$fullimage = wp_get_attachment_image($imageID, $size, false);
$imagedata = wp_get_attachment_image_src($imageID, $size, false);
$width = ($imagedata[1]+2);
$height = ($imagedata[2]+2);
return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Что бы использовать этот шорткод, просто введи следующую строку в редакторе в режиме HTML

[postimage size="" float="left"]

Объяснение кода. Функция sc_postimage() сначала выполняет аттрибуты шорткода. Потом она берёт картинку при помощи следующих функций WordPress get_children(), wp_get_attachment_image() и wp_get_attachment_image_src(). После этого картинка возвращается, встроенной в содержание поста.

7. Добавление шорткодов в виджеты боковой колонки

Шорткоды WordPress

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

Ещё немного кода для вставки в файл functions.php:

add_filter('widget_text', 'do_shortcode');

Это всё, что тебе нужно.

Объяснение кода. То, что мы сделали, довольно просто: мы добавили фильтр к функции widget_text(), что бы выполнить функцию do_shortcode(), которая использует API для исполнения шорткодов. Таким образом шорткоды теперь включены в виджетах боковой колонки.

Этот пост является переводом статьи Mastering WordPress Shortcodes
Перевод статьи Вверх_ком

Предыдущие записи из рубрики `Настройка WordPress`

11 комментариев

Андрей, 10.07.2011 в 12:06

Ваша статья, как бальзам на душу. Задался целью вывести на страницы заголовки постов из определенных категорий через шорткод и... вот оно.
Эта статья помогла справится с определенными трудностями.
Спасибо Вам большое за подробное описание.

ОтветитьОтветить
татьяна, 15.09.2011 в 11:57

ну почему все так сложно все написано, я нифига не понимаю

ОтветитьОтветить
Neo, 13.08.2013 в 23:37

Очень интересный пост! Завтра же поэкспериментирую!

ОтветитьОтветить
Decorative, 15.08.2013 в 03:33

Пункт 7 не получился увы -очень жаль, ничего не изменилось, может у меня с шаблоном что-то...

6. Вызывай картинку последнего поста
получилось ноне поняла зачем в одном посте две картинки...
Или я нуб ..))
А так спасибо,хоть к теме прикоснулась

ОтветитьОтветить
Александр, 09.09.2013 в 22:49

После вставки шоткода №5 у меня перестают отображаться комментарии на странице. В чём может быть причина?

ОтветитьОтветить
Sysadmin, 13.10.2013 в 17:36

Отличный пост, но не всё понятно. Будем продвигаться. Начал разбирать замену ссылок текстом с использованием крошек breadcrump NAVXT- закончил шорткодами.

ОтветитьОтветить
Александр, 25.10.2013 в 19:09

Добрый день!

А Вы можете подсказать почему после создания в шорткодах элемента с закладками как на странице http://www.brandariy.com/b2b/ перестают работать ссылки, если слова написаны на русском. Если что либо написать по английски то все норм работает. Такое же происходит и с некоторыми другими модулями. Приходится все через пейдж билдер делать. Если поможете решить проблему буду очень благодарен.

ОтветитьОтветить
Регина, 10.11.2013 в 01:08

Здравствуйте! Много полезной информации! Спасибо! А вот такой вопрос у меня, я на своем сайте использую плагин, который создает микроразметку. Я создаю статьи, вставляя текст в выведеные плагином произвольные поля, а сам текст поста выводится шорткодом. А где хранятся сами тексты постов?

ОтветитьОтветить
Игорь, 11.02.2014 в 14:57

Супер статья! спасибо, хочу создать свой плагин, во многом разобрался. С Татьяной не согласен - тут очень подробно...)

ОтветитьОтветить
Pasagir, 24.04.2014 в 19:39

Классно! Не знал, что так можно. Но для Adsense все-таки воспользуюсь каким-нибудь плагином. А то тестировать блоки через functions.php не очень удобно..в плагине проще и быстрее код менять..

ОтветитьОтветить
Bobmintoon, 29.04.2015 в 21:36

После 3 часового безрезультатного поиска решения (требовалось скрывать определенную контактную информацию в нерабочее время в sidebar) Ваша статья - находка !
Спасибо !

ОтветитьОтветить

Комментировать