Шорткоды Вордпресс(WordPress Shortcodes)

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

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

Этот пост является переводом статьи Mastering WordPress Shortcodes[smashingmagazine.com]

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

Использовать шорткоды очень просто. Что бы это сделать, создай новый пост(или открой для редактирования уже имеющийся), переключи редактор на 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.vverx.com"]Вверх_ком, настройка WordPress[/url]

   Когда ты сохранишь пост, шорткод выведет ссылку озаглавленную «Вверх_ком, настройка WordPress» и ведущую на http://www.vverx.com.

Classic.dachi.ru – строительство загородных дач.

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

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

Примеры кода на PHP и JavaScript

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

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

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

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

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

[twitter]

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

Глянь также плагин Twitter tools[alexking.org]

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

Ты уже знаешь, что очень хорший способ увеличить количество 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 везде где хочешь

Многие блоггеры пользуются 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-8683604175367491";
   /* 468x60, создано 05.02.09 */
   google_ad_slot = "5183274352";
   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 поток

Давай встроим 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, это количество постов для вывода.

Бери посты из базы данных 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(). После этого картинка возвращается, встроенной в содержание поста.

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

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

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

add_filter('widget_text', 'do_shortcode');

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

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

Луший софт для рассылки и рекламы, с искуственным интеллектом!