Shortcode в WordPress. Инструкция для начинающих

17.06.2011

Добрый день(вечер, утро, у кого там что за окном?), сегодня я хочу рассказать, что такое шорткоды (shortcodes) в WordPress. Штука замечательная, но мало кто пользуется этим функционалом, разве что самые продвинутые разработчики шаблонов и плагинов. Для начала нужно разобраться, что это такое, а потом каждый для себя решит, надо ему это или нет. Стало хоть чуточку интересно? Тогда вэлкам, это совсем не сложно…

Основы. Как это работает?

Итак, шорткоды. Используются в плагинах и шаблонах оформления WordPress для достижения дополнительного функционала, без модификации файлов.  Объясню как это происходит на примере — напишем шорткод, который меняет оформление текста.

function extra_style_shortcode( $atts, $content = null ) {
   return '<span style="color: blue; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

Это очень простой пример, который не несет в себе никакой полезной нагрузки, но очень хорошо иллюстрирует процесс создания шорткодов.
Добавили в файл functions.php код, который выше, теперь можно применять его таким образом:

[extra-style]Lorem Ipsum[/extra-style]

Теперь рассмотрим, что же происходит, как работает данная функция? Очень просто — мы говорим WordPress, чтобы контент, расположенный между []…[/] передавать в переменную strong>$content, которая в свою очередь выводится с некоторыми простыми стилями. В данном случае — подчеркивание и синий цвет.

Добавляем дополнительные параметры

Прошлый пример был очень простым, теперь немного усложним задачу и добавим возможность выбора цвета текста.

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
		"color" =&gt; 'blue',
	), $atts));
   return '<span style="color: ' . $color . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

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

 extract(shortcode_atts(array(
		"color" =&gt; 'blue',
	), $atts));

Применять можно так:

[extra-style color=red]Lorem Ipsum[/extra-style]

Аналогичным образом можно добавлять различные переменные, это может быть начертание шрифта, его размер, отступы и тому подобные вещи. Чтобы было понятнее, приведу еще один пример:

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
	"color" =&gt; 'blue',
        "size" =&gt; '14px',
	), $atts));
   return '<span style="color: ' . $color . '; font-size: ' . $size . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

Я ввел переменную, которая будет отвечать за размер шрифта в блоке, как это будет выглядеть в итоге:

[extra-style color=purple size=18px ]Lorem Ipsum![/extra-style]

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

Создаем информационный блок

Иногда нужно выделить некий объём текста в сообщении, для привлечения внимания или для других подобных целей. Попробуем сделать это с помощью шорткодов, смотрите код ниже:

function box_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'yellow',
      'size' => 'medium',
      ), $atts ) );
       return '
<div class="shortcode_box ' . $size . ' ' .  $color . '">' . $content . '</div>';
 }
add_shortcode('box', 'box_shortcode');

Назначены стили для нескольких видов блоков, желтый, синий и серый.

Lorem Ipsum dolor...

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

Кнопка с помощью shortcodes и CSS3

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

function button_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' =&gt; 'blue',
      'size' =&gt; 'medium',
      ), $atts ) );
      return '<div class="shortcode_button ' . $size . ' ' .  $color . '">' . $content . '</div>';
}
add_shortcode('button', 'button_shortcode');

Вот такой вот большой и страшный код, но не пугайтесь — основная его часть это CSS, включая CSS3, который я особенно уважаю На самом деле код совершенно не отличается от простых примеров с текстом. Обратите внимание, все тоже самое, только секция вывода поменялась. Я добавил два цвета кнопок и три размера, при желании можно сделать еще, но это уже оставляю вам, вы для чего это все читаете?

<a href="#">Наверх</a>

На сегодня хочу закончить, статья и так достаточно объёмная. Дам пару дней на усвоение материала и опубликую вторую часть, в которой расскажу о том, как применять шорткоды совместно друг с другом, а также рассмотрю более сложные приемы, которые будут затрагивать не только CSS, с которым мы работали сегодня, но и PHP код.
Так что не переключайтесь, будет интересно. Подписывайтесь на RSS, комментируйте, удачного вам дня
P.S. Ссылка на вторую часть статьи. Откроется в новой вкладке

,