Создание и использование shortcode в WordPress: практические примеры и советы

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

Что такое shortcode в WordPress и зачем они нужны

Shortcode – это специальный тег, который вы можете вставить в контент WordPress. При отображении страницы WordPress автоматически заменяет этот тег на определенный функционал или контент, заданный в коде. Это позволяет легко добавлять сложные элементы, например, формы, галереи, кнопки, без необходимости каждый раз писать HTML, CSS или PHP.

Например, стандартный shortcode [gallery] выводит галерею изображений. Но что если вам нужно создать свой собственный? Для этого WordPress предоставляет функцию add_shortcode().

Как создать простой shortcode для вывода текста

Начнем с простейшего примера. Допустим, мы хотим создать shortcode, который выведет приветственное сообщение. Для этого добавим следующий код в файл functions.php вашей темы или в файл вашего плагина:

function wpskills_hello_shortcode() {
    return '<p>Привет, это мой первый shortcode на WordPress!</p>';
}
add_shortcode('wpskills_hello', 'wpskills_hello_shortcode');

Теперь в любом посте или странице вы можете вставить [wpskills_hello], и на сайте отобразится сообщение.

Объяснение кода

Функция wpskills_hello_shortcode() возвращает строку с HTML. Именно эта строка и будет подставлена на место shortcode. Функция add_shortcode() регистрирует shortcode с именем wpskills_hello и связывает его с нашей функцией.

Создание shortcode с параметрами

Очень часто нужно, чтобы shortcode принимал параметры и выводил контент в зависимости от них. Рассмотрим пример кнопки с настраиваемым текстом и ссылкой.

function wpskills_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ), $atts, 'wpskills_button'
    );

    return '<a href="' . esc_url($atts['url']) . '" class="wpskills-btn">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpskills_button', 'wpskills_button_shortcode');

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

[wpskills_button text="Перейти на WPSkills" url="https://wpskills.ru"]

Разбор кода и безопасность

Функция shortcode_atts() задает значения по умолчанию и объединяет их с параметрами, переданными пользователем. Важно использовать функции esc_url() и esc_html() для защиты от XSS-атак и корректного вывода.

Добавление стилей и скриптов для shortcode

Если ваш shortcode выводит элементы, для которых нужны стили или JavaScript, лучше подключать их только тогда, когда shortcode присутствует на странице. Для этого пригодится фильтр the_posts или проверка в функции вывода.

Пример подключения стилей для кнопки из предыдущего примера:

function wpskills_enqueue_shortcode_styles() {
    wp_enqueue_style('wpskills-shortcode-css', get_stylesheet_directory_uri() . '/css/wpskills-shortcode.css');
}

function wpskills_button_shortcode($atts) {
    wpskills_enqueue_shortcode_styles();
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ), $atts, 'wpskills_button'
    );

    return '<a href="' . esc_url($atts['url']) . '" class="wpskills-btn">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpskills_button', 'wpskills_button_shortcode');

В файле wpskills-shortcode.css можно описать стили для класса wpskills-btn.

Полезные плагины для работы с shortcode

Если вы хотите расширить возможности shortcode без ручного кодинга, рекомендуем обратить внимание на следующие плагины:

• Shortcodes Ultimate — содержит множество готовых для использования shortcode с настройками через визуальный редактор.
• WP Shortcode by MyThemeShop — набор полезных элементов, от кнопок до вкладок и колонок.
• Shortcoder — позволяет создавать собственные shortcode, включая HTML, CSS и JavaScript, через удобный интерфейс.

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

Советы по оптимизации и безопасности shortcode

При создании shortcode стоит помнить:

• Всегда проверяйте и фильтруйте входящие данные с помощью функций esc_html(), esc_url() и других.
• Не выводите напрямую пользовательский ввод без обработки.
• Подключайте стили и скрипты только при необходимости, чтобы не нагружать сайт.
• Документируйте свои shortcode, чтобы в будущем было проще поддерживать код.

Так вы обеспечите стабильную работу сайта и безопасность.

Пример комплексного shortcode с выводом последних постов

Для практики создадим shortcode, который выведет список последних постов в компактном виде с заголовками и датами.

function wpskills_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 5), $atts, 'wpskills_latest');

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish'
    ));

    if (!$query->have_posts()) {
        return '<p>Посты не найдены.</p>';
    }

    $output = '<ul class="wpskills-latest-posts">';
    while ($query->have_posts()) : $query->the_post();
        $title = get_the_title();
        $permalink = get_permalink();
        $date = get_the_date('d.m.Y');
        $output .= '<li><a href="' . esc_url($permalink) . '">' . esc_html($title) . '</a> <span>' . esc_html($date) . '</span></li>';
    endwhile;
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpskills_latest', 'wpskills_latest_posts_shortcode');

Используйте в записи: [wpskills_latest count="3"] — выведет 3 последних поста.

Данный пример демонстрирует работу с WP_Query внутри shortcode, правильное очищение данных и вывод в HTML-списке.