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

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

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

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

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

Пример классического шорткода — [button url="https://wppuzzle.ru"]Перейти на сайт[/button], который выводит кнопку с ссылкой.

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

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

function wppuzzle_hello_shortcode() {
    return '<p>Привет от WP Puzzle!</p>';
}
add_shortcode('wppuzzle_hello', 'wppuzzle_hello_shortcode');

Теперь в любом посте или странице вы можете использовать шорткод [wppuzzle_hello], и он выведет текст «Привет от WP Puzzle!».

Этот пример показывает основы: функция возвращает HTML-код, а WordPress заменяет шорткод на результат выполнения функции.

Добавление параметров к шорткоду: динамический контент

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

function wppuzzle_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'url' => '#',
            'color' => 'blue'
        ), $atts, 'wppuzzle_button'
    );
    $content = $content ? $content : 'Кнопка';

    return '<a href="'.esc_url($atts['url']).'" class="wppuzzle-button" style="background-color:'.esc_attr($atts['color']).';padding:10px 20px;color:#fff;text-decoration:none;border-radius:5px;">'.esc_html($content).'</a>';
}
add_shortcode('wppuzzle_button', 'wppuzzle_button_shortcode');

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

[wppuzzle_button url="https://wppuzzle.ru" color="green"]Перейти на WP Puzzle[/wppuzzle_button]

Этот шорткод создаст зелёную кнопку с текстом «Перейти на WP Puzzle» и ссылкой на сайт. Параметры дают свободу настройки без изменения кода.

Обработка контента внутри шорткода и вложенные теги

Обратите внимание, что в нашем примере мы использовали второй параметр функции — $content, который позволяет помещать внутрь шорткода произвольный текст или HTML. Это удобно, когда хочется, например, сделать кнопку с разным текстом.

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

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

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

• Используйте функции esc_html, esc_url и esc_attr для защиты от XSS-атак.
• Ограничивайте допустимые значения параметров, если требуется.
• Проверяйте наличие и формат данных перед выводом.

Это поможет избежать критических ошибок и защитить ваш сайт.

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

Шорткоды отлично подходят для динамического вывода информации, например, списка последних новостей или товаров. Рассмотрим пример вывода списка последних 5 записей из категории «Новости»:

function wppuzzle_latest_news_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => 'novosti'
    ), $atts, 'wppuzzle_latest_news');

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'category_name' => sanitize_text_field($atts['category'])
    ));

    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('wppuzzle_latest_news', 'wppuzzle_latest_news_shortcode');

Такой шорткод [wppuzzle_latest_news count="3" category="novosti"] выведет 3 последних новости из категории «Новости». Этот подход очень полезен для кастомных новостных блоков.

Рекомендации по плагинам для работы с шорткодами

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

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

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

Выводы и советы по созданию шорткодов

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

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

Это позволит вам создавать уникальные решения, которые идеально впишутся в структуру вашего сайта на WordPress.