Шорткоды — это мощный инструмент WordPress, который позволяет вам вставлять динамический контент в записи, страницы и виджеты с помощью простой и понятной конструкции. В этой статье мы подробно разберем, как создавать собственные шорткоды, какие возможности они предоставляют и как их правильно использовать для расширения функционала вашего сайта.
Что такое шорткод в WordPress и зачем он нужен
Шорткод — это особая метка в квадратных скобках, например, [wplog_example], которая при выводе страницы заменяется на определенный контент или результат выполнения кода. Благодаря шорткодам можно легко внедрять сложный функционал без необходимости писать длинные HTML или PHP-блоки вручную в каждой записи.
Основные преимущества шорткодов:
- Удобство использования для контент-менеджеров и редакторов.
- Повторное использование кода в разных местах сайта.
- Гибкость и расширяемость функционала без изменения темы.
Создание простого шорткода: пошаговое руководство
Чтобы создать собственный шорткод, достаточно добавить в файл functions.php вашей темы или в файл собственного плагина функцию, которая будет возвращать нужный контент, и зарегистрировать её с помощью функции add_shortcode().
Рассмотрим пример создания простого шорткода, который выводит приветствие:
function wplog_hello_shortcode() {
return '<p>Привет, это шорткод от WPLog!</p>';
}
add_shortcode('wplog_hello', 'wplog_hello_shortcode');Теперь в любой записи или странице вы можете вставить [wplog_hello], и WordPress заменит его на текст "Привет, это шорткод от WPLog!".
Передача параметров в шорткод
Шорткоды могут принимать параметры для большей гибкости. Например, добавим параметр name, чтобы выводить персональное приветствие:
function wplog_hello_shortcode($atts) {
$atts = shortcode_atts(
array('name' => 'Гость'),
$atts,
'wplog_hello'
);
return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на WPLog.</p>';
}
add_shortcode('wplog_hello', 'wplog_hello_shortcode');Теперь [wplog_hello name="Алексей"] выведет "Привет, Алексей! Добро пожаловать на WPLog."
Примеры полезных шорткодов для реальных задач
Давайте рассмотрим несколько примеров, которые часто нужны на практике.
1. Вывод списка последних записей с кастомным оформлением
Для отображения последних записей в любом месте сайта можно создать шорткод, который выводит заголовки с ссылками:
function wplog_recent_posts_shortcode($atts) {
$atts = shortcode_atts(array(
'count' => 5,
'category' => ''
), $atts, 'wplog_recent_posts');
$args = array(
'posts_per_page' => intval($atts['count']),
'post_status' => 'publish'
);
if (!empty($atts['category'])) {
$args['category_name'] = sanitize_text_field($atts['category']);
}
$posts = get_posts($args);
if (empty($posts)) {
return '<p>Записей не найдено.</p>';
}
$output = '<ul>';
foreach ($posts as $post) {
$title = esc_html(get_the_title($post));
$link = esc_url(get_permalink($post));
$output .= "<li><a href=\"$link\">$title</a></li>";
}
$output .= '</ul>';
return $output;
}
add_shortcode('wplog_recent_posts', 'wplog_recent_posts_shortcode');Использование: [wplog_recent_posts count=3 category=novosti] выведет 3 последние записи из категории «новости».
2. Вставка пользовательской формы обратной связи с валидацией
Частая задача — добавить простую форму, не используя сторонние плагины. Пример шорткода с формой и обработкой данных:
function wplog_contact_form_shortcode() {
if ('POST' === $_SERVER['REQUEST_METHOD'] && !empty($_POST['wplog_contact_nonce']) && wp_verify_nonce($_POST['wplog_contact_nonce'], 'wplog_contact_form')) {
$name = sanitize_text_field($_POST['wplog_name']);
$email = sanitize_email($_POST['wplog_email']);
$message = sanitize_textarea_field($_POST['wplog_message']);
if (empty($name) || empty($email) || empty($message) || !is_email($email)) {
$response = '<p style="color:red;">Пожалуйста, заполните все поля корректно.</p>';
} else {
$to = get_option('admin_email');
$subject = 'Новое сообщение с сайта WPLog';
$body = "Имя: $name\nEmail: $email\nСообщение:\n$message";
$headers = array('Content-Type: text/plain; charset=UTF-8');
wp_mail($to, $subject, $body, $headers);
$response = '<p style="color:green;">Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.</p>';
}
}
ob_start();
if (!empty($response)) {
echo $response;
}
?>
<form method="post" action="">
<p><label>Имя<br><input type="text" name="wplog_name" required></label></p>
<p><label>Email<br><input type="email" name="wplog_email" required></label></p>
<p><label>Сообщение<br><textarea name="wplog_message" rows="5" required></textarea></label></p>
<p><input type="hidden" name="wplog_contact_nonce" value="<?php echo wp_create_nonce('wplog_contact_form'); ?>"></p>
<p><button type="submit">Отправить</button></p>
</form>
<?php
return ob_get_clean();
}
add_shortcode('wplog_contact_form', 'wplog_contact_form_shortcode');Вставляя [wplog_contact_form], вы получите работающую форму с базовой защитой и отправкой писем.
Подключение шорткодов в виджетах и Gutenberg
По умолчанию шорткоды работают в содержимом записей и страниц. Чтобы использовать их в виджетах, добавьте следующий код в functions.php:
add_filter('widget_text', 'do_shortcode');В редакторе Gutenberg можно вставлять блок "Код шорткода" или использовать блок "Классический", где шорткод отработает корректно.
Советы по безопасности и производительности
Создавая шорткоды, всегда фильтруйте и валидируйте пользовательские данные, чтобы избежать XSS и других уязвимостей. Используйте функции WordPress, такие как esc_html(), sanitize_text_field(), wp_verify_nonce().
Также не стоит перегружать шорткоды тяжелыми запросами или большим объемом данных, чтобы не замедлять загрузку страниц.
Заключение
Шорткоды — отличный способ расширить функционал WordPress без глобальных изменений. Создавая собственные шорткоды, вы можете значительно упростить работу с динамическим контентом и сделать сайт более удобным для пользователей и редакторов. В этой статье мы рассмотрели базовые и продвинутые примеры, которые помогут вам начать использовать шорткоды на практике.