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

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

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

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

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

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

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

Для регистрации шорткода используется функция add_shortcode(). Она принимает два параметра: имя шорткода и callback-функцию, которая возвращает HTML-код, заменяющий шорткод.

Рассмотрим простой пример шорткода, который выводит приветствие:

function wpzoom_hello_shortcode() {
    return '<p>Привет, это мой первый шорткод!</p>';
}
add_shortcode('wpzoom_hello', 'wpzoom_hello_shortcode');

После добавления этого кода в файл functions.php вашей темы или в собственный плагин, вы сможете использовать в редакторе шорткод [wpzoom_hello], который выведет абзац с текстом приветствия.

Передача параметров в шорткод

Шорткод может принимать параметры, которые передаются в callback-функцию в виде массива. Это позволяет делать шорткод универсальным и настраиваемым.

Пример шорткода с параметром name:

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

Использование: [wpzoom_greet name="Алексей"] выведет «Привет, Алексей!».

Создание сложного шорткода с использованием внешних данных

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

Рассмотрим пример шорткода, который выводит список последних постов в виде ссылок.

function wpzoom_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 5), $atts, 'wpzoom_latest_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>';
    }
    wp_reset_postdata();
    $output .= '</ul>';
    return $output;
}
add_shortcode('wpzoom_latest_posts', 'wpzoom_latest_posts_shortcode');

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

Оптимизация и безопасность шорткодов

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

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

Рекомендуется помещать шорткоды в плагины или в отдельные файлы, а не прямо в functions.php, чтобы облегчить поддержку и переносимость.

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

Шорткод для кнопки с кастомным стилем

function wpzoom_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'color' => 'blue',
    ), $atts, 'wpzoom_button');
    $color = esc_attr($atts['color']);
    $url = esc_url($atts['url']);
    $text = $content ? $content : 'Кнопка';
    return '<a href="' . $url . '" class="wpzoom-button wpzoom-button-' . $color . '">' . esc_html($text) . '</a>';
}
add_shortcode('wpzoom_button', 'wpzoom_button_shortcode');

CSS для кнопки можно добавить в файл стилей темы или плагина:

.wpzoom-button {
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
}
.wpzoom-button-blue { background-color: #0073aa; }
.wpzoom-button-red { background-color: #d54e21; }

Использование: [wpzoom_button url="https://wpzoom.ru" color="red"]Перейти на WPZOOM[/wpzoom_button]

Шорткод для вывода текущей даты с форматированием

function wpzoom_date_shortcode($atts) {
    $atts = shortcode_atts(array('format' => 'd.m.Y'), $atts, 'wpzoom_date');
    return date($atts['format']);
}
add_shortcode('wpzoom_date', 'wpzoom_date_shortcode');

Использование: [wpzoom_date format="l, j F Y"] выведет текущую дату в читаемом формате.