Шорткоды в WordPress — это простой способ добавить динамический контент к записям, страницам, боковым панелям и шаблонам. Многие плагины используют их для вывода контактных форм, галереи изображений, слайдеров.
В этой статье мы расскажем, как легко добавить шорткод в WordPress, а также создавать кастомные шорткоды с помощью Shortcode API.
Что такое шорткод в WordPress
Шорткоды — это ярлык кода, который позволяет добавлять динамический контент к различным типам записей, боковым панелям и шаблонам.
Синтаксис шорткода представляет собой текст (ключевое число) внутри квадратных скобок.
Простой шорткод без параметров выглядит так:
[shortcode]Шорткод с параметрами имеет вид:
[shortcode params="foo"]Шорткод с текстом в качестве параметра обычно выглядит, так:
[shortcode]Здесь может быть любой текст[/shortcode]Косая черта может применяться, как в одиночных, так и в контентных шорткодах:
[shortcode /]
[shortcode]Еще один пример[/shortcode]Чтобы лучше понять для чего нужны шорткоды, давайте взглянем на предысторию того, почему они были добавлены в первую очередь.
Shortcode API
Система WordPress в целях безопасности при сохранении контента выполняет фильтрацию данных, чтобы не допустить внесения выполняемого вредоносного кода в базу данных.
Это означает, что вы можете писать HTML-разметку в своих постах, но не можете выполнить PHP-код и сценарии JavaScript.
Shortcode API позволяет разработчикам добавлять свой код внутрь функции, а затем зарегистрировать ее в WordPress в качестве шорткода для вызова в контенте.
Когда WordPress находит шорткод, он автоматически запускает код связанный с ним и показывает результат его работы на странице.
Область применения шорткодов на сайте достаточно широка. Вы можете использовать их при написании плагинов, для размещения счетчиков посещаемости, добавления интерактивной карты, показа рекламных объявлений и других задач.
Как добавить шорткод на страницу в WordPress
Если вы используете редактор Gutenberg, добавьте новый блок с типом Шорткод в процессе редактирования записи:
Если вы используете классический редактор начните редактирование записи в которой вы хотите добавить динамический контент. Вы можете вставить шорткод в любом месте текстового редактора:
Для добавления шорткода на боковую панель, перейдите на экран Внешний вид -> Виджеты и добавьте новый виджет типа Блок:
Для вставки шорткода в шаблон WordPress используйте функцию do_shortcode():
<?php echo do_shortcode("[shortcode]"); ?>Создание шорткодов в WordPress
В качестве примера напишем простой кастомный шорткод с помощью функции add_shortcode(), который вернет некоторый результат.
Добавим код в functions.php:
<?php
add_shortcode( 'shortcode', 'example_shortcode' );
function example_shortcode( $atts ) {
return 'Привет, мир!';
}
?>Вставим шорткод [shortcode] в текст записи и увидим результат выполнения функции:
Привет, мир!Шорткод с поддержкой параметров
Пример шорткода с поддержкой параметров:
<?php
add_shortcode( 'car', 'car_shortcode' );
function car_shortcode( $atts ) {
$atts = shortcode_atts( [
'brand' => 'Марка автомобиля',
'hp' => 0,
], $atts );
return "Мощность автомобиля {$atts['brand']} — {$atts['hp']} лошадиных сил";
}
?>Размещаем шорткод с двумя параметрами [car brand="Porsche" hp="220"] в тексте записи и получаем результат:
Мощность автомобиля Porsche — 220 лошадиных сил.Контентный шорткод
Обычно контентный шорткод используют для обрамления какого-либо фрагмента текста. Например, на сайте используется цитирование, которое представляет текст внутри тега <blockquote> с каким-то текстом внутри.
Для удобства редактирования записей можно сформировать шорткод, который будет содержать в себе обертку HTML, которую так не любят контент-менеджеры:
<?php
add_shortcode( 'blockquote', 'blockquote_shortcode' );
function blockquote_shortcode( $atts, $text ) {
return '<blockquote>' . $text . '</blockquote>';
}
?>Чтобы использовать этот шорткод, добавьте его в текст записи:
[blockquote]Еще одна цитата[/blockquote]Контентный шорткод с поддержкой атрибутов
Вывод цитат можно преобразовать в блоки внимания, добавив поддержку атрибутов. Например, вы часто используете блоки внимания в своих записях для вывода: примечаний, цитат и предупреждений.
<?php
add_shortcode( 'blockquote', 'blockquote_shortcode' );
function blockquote_shortcode( $atts, $text ) {
$atts = shortcode_atts( [
'class' => 'example',
], $atts );
return '<blockquote class="' . esc_attr( $atts['class'] ) . '">' . $text . '</blockquote>';
}
?>Теперь мы сможем задать класс для тега <blockquote> и добавить текст:
[blockquote class="danger"]Внимание! Продукция для лиц старше 16 лет.[/blockquote]Шорткод с буферизацией вывода
Чтобы вставить в текст записи фрагменты HTML, PHP-код или JS-сценарий, воспользуемся буферизацией вывода в PHP.
Например, добавим рекламный блок Рекламной сети Яндекса в контент на странице с помощью шорткода. Вывод рекламного блока без буферизации:
<?php
add_shortcode('sponsored', 'yandex_rtb');
function yandex_rtb() {
$string .= '<div id="yandex_rtb_R-A" class="yandex_rtb_container"></div>
<script>window.yaContextCb.push(()=>{
Ya.Context.AdvManager.render({
renderTo: "yandex_rtb_R-A",
blockId: "R-A-0000-00"
})
})</script>';
return $string;
}
?>Пример кода c буферизацией вывода:
<?php
add_shortcode('sponsored', 'yandex_rtb');
function yandex_rtb() {
ob_start();
?>
<div id="yandex_rtb_R-A" class="yandex_rtb_container"></div>
<script>window.yaContextCb.push(()=>{
Ya.Context.AdvManager.render({
renderTo: 'yandex_rtb_R-A',
blockId: 'R-A-0000-00'
})
})</script>
<?php
return ob_get_clean();
} ?>В результате шорткод [sponsored] покажет рекламное объявление на странице.
Удаление шорткодов в WordPress
Чтобы удалить шорткод воспользуйтесь функцией remove_shortcode(). Функция принимает лишь один параметр: имя шорткода, который требуется снять с регистрации.
<?php add_action( 'init', 'delete_shortcode', 20 );
function delete_shortcode(){
remove_shortcode( 'sponsored' );
}
?>