Как создать свой шорткод с параметрами в WordPress

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

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

Стандартный шорткод в WordPress — это тег вида [example], который заменяется на определённый код или контент. Однако шорткоды могут принимать параметры, например, [example color="red" size="large"]. Это позволяет изменять поведение шорткода без правки кода плагина или темы.

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

• Вывода разных вариантов одного и того же контента (например, разные цвета или стили кнопок).
• Передачи данных в шорткод для динамической генерации результата.
• Повышения гибкости и повторного использования кода.

В итоге вы получаете мощный инструмент для кастомизации сайта через простой интерфейс редактора WordPress.

Создание базового шорткода с параметрами в WordPress

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

Пример кода:

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

    $color = esc_attr($atts['color']);
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);

    return '<a href="' . $url . '" style="background-color:' . $color . '; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px;">' . $text . '</a>';
}
add_shortcode('wpeasy_button', 'wpeasy_button_shortcode');

В этом примере используется функция shortcode_atts для установки значений по умолчанию и безопасного получения параметров. Мы создаём ссылку- кнопку с фоном заданного цвета и текстом из параметра.

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

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

Иногда нужно, чтобы шорткод принимал не только параметры, но и содержимое между тегами, например:

Для этого функция-обработчик должна принимать второй параметр — содержимое, и вернуть обработанный HTML.

Пример кода:

function wpeasy_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array('color' => 'lightgray'),
        $atts,
        'wpeasy_box'
    );

    $color = esc_attr($atts['color']);
    $content = do_shortcode($content); // Обрабатываем вложенные шорткоды

    return '<div style="background-color:' . $color . '; padding: 15px; border-radius: 8px;">' . $content . '</div>';
}
add_shortcode('wpeasy_box', 'wpeasy_box_shortcode');

Такой шорткод позволяет оборачивать любой контент в цветной блок. Важно обработать вложенные шорткоды через do_shortcode, иначе они не будут работать.

Практические советы по безопасности и оптимизации шорткодов

При создании шорткодов с параметрами важно помнить о безопасности:

• Всегда используйте функции esc_html, esc_attr, esc_url для очистки входящих данных.
• Не доверяйте напрямую пользовательскому вводу — фильтруйте и валидируйте.
• Избегайте вывода опасного HTML и JavaScript внутрь шорткодов.

Кроме того, для оптимальной работы не стоит перегружать шорткод сложными запросами к базе или тяжелыми вычислениями. Если нужно — кешируйте результат.

Другие примеры полезных шорткодов с параметрами

Шорткод для вывода последних записей с выбором количества

function wpeasy_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'wpeasy_recent_posts');

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

    if (!$query->have_posts()) {
        return '<p>Нет записей.</p>';
    }

    $output = '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    $output .= '</ul>';
    wp_reset_postdata();

    return $output;
}
add_shortcode('wpeasy_recent_posts', 'wpeasy_recent_posts_shortcode');

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

Шорткод для вставки Google карты с настройками

function wpeasy_google_map_shortcode($atts) {
    $atts = shortcode_atts(array(
        'lat' => '55.7558',
        'lng' => '37.6173',
        'zoom' => 10,
        'width' => '100%',
        'height' => '400px'
    ), $atts, 'wpeasy_google_map');

    $lat = esc_attr($atts['lat']);
    $lng = esc_attr($atts['lng']);
    $zoom = intval($atts['zoom']);
    $width = esc_attr($atts['width']);
    $height = esc_attr($atts['height']);

    return '<iframe width="' . $width . '" height="' . $height . '" frameborder="0" style="border:0" src="https://maps.google.com/maps?q=' . $lat . ',' . $lng . '&z=' . $zoom . '&output=embed" allowfullscreen></iframe>';
}
add_shortcode('wpeasy_google_map', 'wpeasy_google_map_shortcode');

Использование: [wpeasy_google_map lat="59.939" lng="30.315" zoom="12" width="600px" height="400px"]

Заключение

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