Что такое шорткод с аргументами и зачем он нужен
В WordPress шорткоды позволяют вставлять динамический контент в записи и страницы, используя простые текстовые команды, обрамленные в квадратные скобки. Однако часто требуется, чтобы шорткод принимал параметры — аргументы, позволяющие изменять вывод в зависимости от нужд пользователя. Кроме того, иногда нужно, чтобы шорткод включал форму, данные из которой обрабатывались бы без перезагрузки страницы или с минимальными усилиями.
Например, можно создать шорткод обратной связи, поиска, подписки на рассылку или калькулятор с настройками. В этой статье мы подробно разберём, как создать собственный шорткод с аргументами, который выводит форму, и как обрабатывать данные этой формы на стороне сервера.
Создание простого шорткода с аргументами в WordPress
Начнём с базового примера шорткода, который принимает аргументы и выводит текст на страницу. Вставим следующий код в файл functions.php вашей темы или в отдельный плагин:
function wpdir_shortcode_example($atts) {
// Задаём значения по умолчанию
$atts = shortcode_atts(
array(
'title' => 'Заголовок по умолчанию',
'color' => 'black',
), $atts, 'wpdir_example'
);
return '<h3 style="color:' . esc_attr($atts['color']) . '">' . esc_html($atts['title']) . '</h3>';
}
add_shortcode('wpdir_example', 'wpdir_shortcode_example');Использование шорткода в записи:
[wpdir_example title="Привет, WPDir!" color="blue"]
В результате на странице появится заголовок с указанным текстом и цветом. Это базовый пример, который мы усложним, добавив форму.
Добавление формы в шорткод: вывод и обработка данных
Для примера сделаем шорткод, который выводит форму подписки на рассылку с полем email и кнопкой отправки. После отправки формы данные будут проверены, и выведется сообщение об успехе или ошибке.
Код шорткода:
function wpdir_subscribe_shortcode() {
// Проверяем, была ли отправлена форма
$message = '';
if (isset($_POST['wpdir_subscribe_nonce']) && wp_verify_nonce($_POST['wpdir_subscribe_nonce'], 'wpdir_subscribe_action')) {
$email = sanitize_email($_POST['wpdir_email']);
if (is_email($email)) {
// Здесь можно добавить логику подписки, например, сохранить в базу или отправить письмо
$message = '<p style="color:green;">Подписка успешно оформлена для ' . esc_html($email) . '</p>';
} else {
$message = '<p style="color:red;">Введите корректный email.</p>';
}
}
// Форма подписки
$form = '<form method="post" action="">'
. wp_nonce_field('wpdir_subscribe_action', 'wpdir_subscribe_nonce', true, false)
. '<label>Ваш email: <input type="email" name="wpdir_email" required /></label>'
. '<input type="submit" value="Подписаться" />'
. '</form>';
return $message . $form;
}
add_shortcode('wpdir_subscribe', 'wpdir_subscribe_shortcode');Этот шорткод можно вставить в любую запись или страницу через [wpdir_subscribe]. При отправке формы происходит проверка nonce для безопасности, затем проверяется правильность email. В случае успеха выводится сообщение, что подписка оформлена.
Используем AJAX для обработки формы без перезагрузки страницы
Чтобы повысить удобство пользователя, обработку формы можно сделать через AJAX, чтобы страница не перезагружалась при отправке.
1. Добавляем JavaScript и локализацию скрипта
В functions.php добавим регистрацию и подключение скрипта:
function wpdir_enqueue_scripts() {
wp_enqueue_script('wpdir-subscribe-js', get_template_directory_uri() . '/js/wpdir-subscribe.js', array('jquery'), null, true);
wp_localize_script('wpdir-subscribe-js', 'wpdir_ajax_obj', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpdir_subscribe_nonce')
));
}
add_action('wp_enqueue_scripts', 'wpdir_enqueue_scripts');2. Создаём JS файл wpdir-subscribe.js
jQuery(document).ready(function($) {
$('#wpdir-subscribe-form').on('submit', function(e) {
e.preventDefault();
var email = $('#wpdir-email').val();
$.ajax({
url: wpdir_ajax_obj.ajax_url,
type: 'POST',
data: {
action: 'wpdir_subscribe_ajax',
email: email,
nonce: wpdir_ajax_obj.nonce
},
success: function(response) {
$('#wpdir-subscribe-message').html(response.data.message);
},
error: function() {
$('#wpdir-subscribe-message').html('<p style="color:red;">Ошибка отправки запроса.</p>');
}
});
});
});3. Обработка AJAX-запроса в PHP
function wpdir_subscribe_ajax_handler() {
check_ajax_referer('wpdir_subscribe_nonce', 'nonce');
$email = sanitize_email($_POST['email']);
if (!is_email($email)) {
wp_send_json_error(array('message' => '<p style="color:red;">Введите корректный email.</p>'));
}
// Логика подписки, например, сохранение в базу или отправка письма
wp_send_json_success(array('message' => '<p style="color:green;">Подписка успешно оформлена для ' . esc_html($email) . '</p>'));
}
add_action('wp_ajax_wpdir_subscribe_ajax', 'wpdir_subscribe_ajax_handler');
add_action('wp_ajax_nopriv_wpdir_subscribe_ajax', 'wpdir_subscribe_ajax_handler');4. Обновляем шорткод для вывода формы с id
function wpdir_subscribe_shortcode() {
$form = '<form id="wpdir-subscribe-form" method="post" action="">'
. '<label>Ваш email: <input type="email" id="wpdir-email" name="wpdir_email" required /></label>'
. '<input type="submit" value="Подписаться" />'
. '</form>'
. '<div id="wpdir-subscribe-message"></div>';
return $form;
}Рекомендации по безопасности и оптимизации
1. Всегда используйте wp_nonce_field и check_ajax_referer для защиты от CSRF-атак.
2. Проверяйте и фильтруйте все входящие данные через функции sanitize_email, esc_html и подобные.
3. Если необходимо хранить данные, используйте функции WordPress для работы с базой данных, например, $wpdb, и избегайте прямых SQL-запросов.
4. Для сложных форм с множеством полей лучше использовать готовые решения или расширять их, например, плагин Clearfy Pro, который обеспечивает оптимизацию и безопасность WordPress, включая работу с формами.
Вывод
Создание шорткода с аргументами и формой — частая задача при разработке WordPress-сайтов. Используя описанные методы, вы сможете создавать гибкие и удобные решения, которые легко вставляются в контент и обеспечивают интерактивность без лишней нагрузки на ресурс.