При размещении контента на сайте часто возникает необходимость интегрировать различные элементы внутрь ваших публикаций. Периодически прописывать такие вставки вручную может быть довольно сложно, особенно когда их становится много. Чтобы упростить эту задачу, в системе управления контентом WordPress, начиная с версии 2.5, были внедрены шорткоды.
Шорткод представляет собой конструкцию, заключенную в квадратные скобки, которая, при обнаружении в тексте, заменяется заданным значением. Эти конструктивы широко используются в темах и плагинах платформы.
Рассмотрим на примере плагина для создания галереи изображений, как работают шорткоды. После установки и активации плагина в административной панели вашего WordPress-сайта появится раздел со всеми нужными инструментами для формирования галерей. После добавления изображений и настройки параметров галереи она будет сохранена. Чтобы вывести её на сайте, плагин предоставит вам уникальный шорткод, который необходимо разместить в нужном месте, и на этом месте будет отображаться созданная галерея.
Шорткод будет выглядеть следующим образом:
Для создания собственного шорткода вам нужно будет воспользоваться функцией add_shortcode(). Например, вы можете создать шорткод, который выводит простое сообщение:
function my_custom_shortcode() {
return 'Привет, это мой кастомный шорткод!';
}
add_shortcode('my_shortcode', 'my_custom_shortcode');
После добавления этого кода в файл functions.php вашей темы, вы сможете использовать шорткод [my_shortcode] в любом месте вашего контента, и он будет автоматически заменен на определённое вами сообщение.
Также стоит отметить, что шорткоды могут принимать параметры. Например, можно изменить текст сообщения в зависимости от переданного параметра:
function my_param_shortcode($atts) {
$atts = shortcode_atts(array(
'text' => 'К default тексту!',
), $atts);
return 'Привет, ' . esc_html($atts['text']);
}
add_shortcode('my_param_shortcode', 'my_param_shortcode');
Теперь, если вы используете шорткод [my_param_shortcode text="ваше сообщение"], он будет отображать: Привет, ваше сообщение!
Как создать шорткод в WordPress?
Функционал WordPress позволяет не только использовать уже готовые шорткоды, но и создавать собственные для реализации уникальных задач.
Если вы не уверены в своих навыках редактирования файла functions.php, то для этого существует плагин ProFunctions, который предоставляет удобный интерфейс для создания шорткодов без необходимости непосредственного редактирования кода.
В качестве примера мы создадим шорткод, который будет выводить текст “Привет, site!”
Для этого нужно добавить в ранее упомянутый файл следующие строки:
function site_text_shortcode() { return 'Привет, site!'; } add_shortcode('textshortcode', 'site_text_shortcode');
Наш код состоит из двух основных частей. Блок function site_text_shortcode() представляет собой функцию, которая отвечает за вывод значения шорткода. В данном примере она возвращает текст “Привет, site!”.
Команда add_shortcode() служит для создания самого шорткода и принимает два параметра. ‘textshortcode’ — это имя шорткода, которое будет заключено в квадратные скобки. Вторым параметром указываем название нашей функции, выводящей текст.
В результате мы получим следующий шорткод, готовый к использованию:
[textshortcode]
Теперь его можно вставить в контент записи или страницы.
На сайте это будет выглядеть вот так:
В следующем примере мы создадим шорткод для вставки изображения с заданными размерами.
function site_picture_shortcode( $atts ) { extract( shortcode_atts( array( 'width' => 100, 'height' => 100 ), $atts ) ); return '
'; } add_shortcode( 'picture', 'site_picture_shortcode' );
Теперь наш шорткод поддерживает параметры и имеет аргумент $atts. Для работы с параметрами необходимо использовать две функции: shortcode_atts() и extract(). Первая функция встроена в WordPress и отвечает за сопоставление атрибутов шорткода с переданными значениями, присваивая им значения по умолчанию, если это требуется. extract() — функция PHP, которая создает переменные из массивов. Наша функция возвращает HTML-код изображения с указанными размерами.
Теперь, при использовании шорткода [picture], будет сгенерировано изображение размера 100 на 100. Чтобы изменить размеры, шорткод будет иметь вид:
[picture width="150" height="100"]
Вы также можете добавлять функциональность к вашему шорткоду, например, возможность установки параметров атрибутов, чтобы изменить поведение шорткода. Например, добавление атрибута class позволит вам управлять стилем изображения через CSS.
function site_picture_shortcode( $atts ) { extract( shortcode_atts( array( 'width' => 100, 'height' => 100, 'class' => '' ), $atts ) ); return ''; } add_shortcode( 'picture', 'site_picture_shortcode' );
Теперь при использовании шорткода вы можете добавить класс, если это необходимо, вот так:
[picture width="150" height="100" class="my-custom-class"]
Это поможет вам более гибко управлять стилем и отображением ваших шорткодов на странице.
Регистрация шорткода в functions.php
Для добавления нового элемента в систему, необходимо внести изменения в файл functions.php вашей темы. Это ключевой файл, который отвечает за функциональность вашего сайта. Откройте его через редактор тем или FTP-клиент.
Структура кода выглядит следующим образом:
function my_custom_shortcode() {
return 'Ваш текст или HTML-код';
}
add_shortcode('my_shortcode', 'my_custom_shortcode');
После сохранения внесенных изменений, новый элемент можно использовать в записях или на страницах, просто написав [my_shortcode]. Система заменит этот текст на то, что возвращает функция.
Важно помнить, что каждое имя шорткода должно быть уникальным, чтобы избежать конфликтов.
Если нужен параметр для шорткода, структура будет такой:
function my_custom_shortcode($atts) {
$a = shortcode_atts(array('param' => 'значение по умолчанию'), $atts);
return 'Ваш текст: ' . $a['param'];
}
add_shortcode('my_shortcode', 'my_custom_shortcode');
Изменения в functions.php требуют аккуратности. Неправильный код может привести к ошибкам на сайте. Всегда сохраняйте резервную копию перед редактированием.