Шорткоды

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

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

В итоге мы получаем на экран готовую галерею, параметры которой разработчик задает в панели администратора.

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

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

WordPress включает в себя API шорткодов, что значительно облегчает процесс создания собственных шорткодов. Создадим шорткод, который будет ответственен за реализацию цитат (pullquotes). Текстовый редактор, включенный в WordPress по умолчанию, имеет стандартное средство для отображения цитат — blockquote, — однако оно довольно ограничено в своих возможностях. Наши цитаты, реализованные с помощью шорткода, позволят дополнительно определять ширину и указывать автора.

Разметка цитаты в HTML будет выглядеть следующим образом:

<blockquote>
<p>Maecenas ante nisi, placerat … </p>
<cite> &mdash; Allan Cole</cite>
</blockquote>

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

[ pullquote width="400" author="Allan Cole" ]Maecenas … [ /pullquote ]

Также как и HTML, шорткоды могут иметь открывающие и закрывающие теги. Для того чтобы добавить произвольный шорткод, нам понадобится создать функцию, принимающую два параметра: $atts и $content. Первый параметр включает в себя опции, обеспечиваемые шорткодом, а второй — содержит контент, размещенный между открывающим и закрывающим тегами шорткода. Сначала мы извлекаем атрибуты, хранящиеся в $atts, которые будут выступать в качестве значений по умолчанию; затем мы возвращаем требуемый вывод, включающий в себя полученный контент и атрибуты:

function pull_quote_sc($atts, $content = null) {
extract(shortcode_atts(array(
'width' => '600',
'author' => '',
), $atts));
if (!$author == '') {
$authorname = '<cite><em>' . esc_attr($author) . '</em></cite>';
} else {
$authorname = null;
}
return '<blockquote style="width=' . esc_attr($width) . '">
<p>' . $content . '</p>' . $authorname . '</blockquote>';
}

Затем следует вызов функции add_shortcode, которая передает название нашего шорткода, а также контент, размещенный в нем:

add_shortcode("pullquote", "pull_quote_sc");

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

blockquote.pull-quote {
border-left: 1px dotted #CCC;
padding: 5px 0 5px 20px;
}blockquote.pull-quote cite {
display: block;
text-align: right;
}

blockquote.pull-quote cite:before {
content: "— ";
}

blockquote.pull-quote p {
font-size: 1.5em;
line-height: 1.1em;
}