Как создать уникальный шорткод в WordPress

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

Что такое шорткод в WordPress и зачем он нужен

Шорткод — это специальный тег в квадратных скобках, который WordPress обрабатывает и заменяет на определенный контент или функциональность. Например, [gallery] — встроенный шорткод для отображения галереи изображений.

Создавая свои шорткоды, вы можете легко внедрять уникальные блоки контента, такие как кнопки, формы, таблицы и прочее, управляя ими через атрибуты.

Преимущества использования шорткодов:

• Удобство использования в редакторе без знаний PHP;
• Переиспользуемость кода на разных страницах;
• Гибкость за счет передачи параметров;
• Отделение логики от контента, что упрощает поддержку.

Как зарегистрировать уникальный шорткод в WordPress

Регистрация шорткода происходит с помощью функции add_shortcode. Для примера создадим простой шорткод, который выводит приветствие с именем пользователя.

function wpurok_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'гость'), $atts, 'wpurok_hello'
    );
    return '<div>Привет, ' . esc_html($atts['name']) . '!</div>';
}
add_shortcode('wpurok_hello', 'wpurok_hello_shortcode');

Теперь в записи можно использовать [wpurok_hello name="Иван"], и на странице отобразится «Привет, Иван!».

Обратите внимание на функцию shortcode_atts, которая задает значения по умолчанию и обеспечивает безопасность входных данных.

Работа с атрибутами и вложенным контентом шорткода

Часто шорткодам передают не только параметры, но и вложенный контент. Для этого функция обработчик должна принимать второй параметр $content.

Например, создадим шорткод, который оборачивает вложенный текст в стилизованный блок:

function wpurok_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'yellow',
    ), $atts, 'wpurok_box');

    return '<div style="padding: 15px; background-color: ' . esc_attr($atts['color']) . '; border-radius: 5px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpurok_box', 'wpurok_box_shortcode');

Использование в записи:

[wpurok_box color="#dff0d8"]Текст внутри цветного блока[/wpurok_box]

Это позволит выделять важные фрагменты контента, при этом цвет можно менять через атрибут.

Подключение CSS и JavaScript к шорткодам

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

Пример подключения CSS и JS при наличии шорткода на странице:

function wpurok_enqueue_assets() {
    global $post;
    if (has_shortcode($post->post_content, 'wpurok_box')) {
        wp_enqueue_style('wpurok_box_css', get_stylesheet_directory_uri() . '/css/wpurok_box.css');
        wp_enqueue_script('wpurok_box_js', get_stylesheet_directory_uri() . '/js/wpurok_box.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'wpurok_enqueue_assets');

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

Примеры полезных уникальных шорткодов для WordPress

1. Вывод последних записей с миниатюрой

Шорткод, который выводит 3 последние записи с миниатюрой и ссылкой:

function wpurok_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 3), $atts, 'wpurok_latest_posts');
    $query = new WP_Query(array('posts_per_page' => intval($atts['count'])));
    $output = '<ul class="wpurok-latest-posts">';
    while($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">';
        if (has_post_thumbnail()) {
            $output .= get_the_post_thumbnail(null, 'thumbnail');
        }
        $output .= get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';
    return $output;
}
add_shortcode('wpurok_latest_posts', 'wpurok_latest_posts_shortcode');

Используйте [wpurok_latest_posts count="5"] для вывода 5 последних записей.

2. Кнопка с возможностью кастомизации

Пример кнопки с настраиваемым текстом и ссылкой:

function wpurok_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => 'Нажми меня',
        'url' => '#',
        'color' => '#0073aa'
    ), $atts, 'wpurok_button');

    return '<a href="' . esc_url($atts['url']) . '" style="display:inline-block; padding:10px 20px; background-color:' . esc_attr($atts['color']) . '; color:#fff; border-radius: 4px; text-decoration:none;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpurok_button', 'wpurok_button_shortcode');

Вызов: [wpurok_button text="Перейти" url="https://wpurok.ru" color="#e74c3c"]

Советы по написанию безопасных и эффективных шорткодов

При создании шорткодов важно:

• Использовать esc_html, esc_attr, esc_url для защиты от XSS;
• Обрабатывать параметры с помощью shortcode_atts для установки значений по умолчанию;
• Избегать тяжелых запросов SQL внутри шорткодов;
• Подключать стили и скрипты только при необходимости, чтобы не перегружать сайт;
• Тестировать шорткод с разными данными и в разных условиях.

Следуя этим рекомендациям, вы создадите надежные и удобные шорткоды, которые помогут улучшить функциональность вашего сайта на WordPress.