wp-code.ru wordpress WP-Codе

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

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

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

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

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

  • Вставлять сложный функционал без прямого редактирования шаблонов;
  • Давать пользователям простой способ размещать интерактивный контент;
  • Облегчать поддержку и расширение функционала сайта.

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

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

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

function wpcode_hello_shortcode() {
    return '<p>Привет от wp-code.ru!</p>';
}
add_shortcode('wpcode_hello', 'wpcode_hello_shortcode');

Теперь, если в редакторе записей вставить [wpcode_hello], на странице появится текст «Привет от wp-code.ru!».

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

Передача параметров в шорткод: динамический контент

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

function wpcode_greet_shortcode($atts) {
    $attributes = shortcode_atts(
        array('name' => 'гость'),
        $atts
    );
    $name = esc_html($attributes['name']);
    return "<p>Привет, $name! Добро пожаловать на wp-code.ru.</p>";
}
add_shortcode('wpcode_greet', 'wpcode_greet_shortcode');

Теперь можно использовать шорткод так: [wpcode_greet name="Иван"], и на странице выведется «Привет, Иван! Добро пожаловать на wp-code.ru.»

Функция shortcode_atts() задаёт значения по умолчанию для параметров, а esc_html() обеспечивает безопасность вывода.

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

Создадим шорткод, который выводит список последних N записей с заголовками и ссылками. Это полезно, если вы хотите встроить свежие новости в любую страницу или виджет.

function wpcode_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts);
    $count = intval($atts['count']);

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

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

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

    return $output;
}
add_shortcode('wpcode_recent_posts', 'wpcode_recent_posts_shortcode');

Теперь, вставив [wpcode_recent_posts count="3"], вы получите список из трёх последних опубликованных записей с ссылками.

Как улучшить и кастомизировать шорткод с постами

Можно добавить параметры, чтобы фильтровать по рубрикам, форматировать вывод или выводить дату публикации. Например, добавим параметр категории:

function wpcode_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => '',
    ), $atts);
    $count = intval($atts['count']);
    $category = sanitize_text_field($atts['category']);

    $args = array(
        'posts_per_page' => $count,
        'post_status' => 'publish',
    );
    if ($category) {
        $args['category_name'] = $category;
    }

    $query = new WP_Query($args);

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

    $output = '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        $title = get_the_title();
        $link = get_permalink();
        $date = get_the_date('d.m.Y');
        $output .= "<li><a href='$link'>$title</a> <span>($date)</span></li>";
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpcode_recent_posts', 'wpcode_recent_posts_shortcode');

Теперь можно использовать шорткод так: [wpcode_recent_posts count="5" category="novosti"] — и выведется 5 последних записей из категории «новости» с датами.

Использование популярных плагинов для расширения шорткодов

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

  • Shortcodes Ultimate — предоставляет набор готовых шорткодов и визуальный конструктор;
  • WP Shortcode — облегчает вставку элементов интерфейса без кода;
  • Custom Content Shortcode — позволяет создавать свои шорткоды через интерфейс.

Однако собственный код даёт максимальную гибкость и производительность без лишних зависимостей.

Советы по безопасности и производительности при создании шорткодов

При создании шорткодов важно учитывать несколько моментов:

  • Используйте функции экранирования вывода, например, esc_html() и esc_url(), чтобы предотвратить XSS-атаки;
  • Избегайте тяжёлых запросов к базе данных в шорткодах, кешируйте результаты при необходимости;
  • Всегда используйте wp_reset_postdata() после кастомных запросов, чтобы не сломать глобальный цикл;
  • Не выводите напрямую пользовательские данные без очистки и проверки.

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

Заключение по созданию шорткодов на wp-code.ru

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

×

AI-плагин от WPShop.ru

анализирует конкурентов

пишет статьи

готовит SEO

генерирует изображения

и еще кое-что...
WPGPT
Плагин, который наполняет ваш сайт WordPress
Узнать больше