wp-kurs.ru wordpress WP-Kurs

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

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

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

Шорткод — это специальный тег в квадратных скобках, который WordPress распознаёт и заменяет на определённый контент или функциональность. Например, стандартный шорткод [gallery] выводит галерею изображений. С помощью собственных шорткодов можно добавить любые элементы: кнопки, формы, таблицы, результаты запросов к базе данных и многое другое.

Преимущества собственных шорткодов:

  • Упрощают редактирование контента без необходимости писать HTML или PHP;
  • Позволяют повторно использовать код на разных страницах;
  • Обеспечивают безопасность, если реализованы корректно;
  • Расширяют возможности стандартного редактора WordPress.

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

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

Пример простого шорткода для сайта wp-kurs.ru:

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

Теперь, если вы вставите в редактор [wp_kurs_hello], на странице отобразится "Привет от wp-kurs.ru!".

Важно: функция должна возвращать строку, а не выводить её напрямую через echo.

Регистрация шорткода в плагине или functions.php

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

Для создания плагина:

  • Создайте папку wp-kurs-shortcodes в каталоге wp-content/plugins.
  • Создайте файл wp-kurs-shortcodes.php с заголовком плагина и вставьте функцию шорткода.

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

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

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

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

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

Шорткод с вложенным содержимым (enclosed shortcode)

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

function wp_kurs_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array('color' => 'yellow'), $atts, 'wp_kurs_box');
    $color = esc_attr($atts['color']);
    $content = do_shortcode($content); // обработка вложенных шорткодов
    return '<div style="padding:10px; background-color:' . $color . '; border:1px solid #ccc;">' . $content . '</div>';
}
add_shortcode('wp_kurs_box', 'wp_kurs_box_shortcode');

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

[wp_kurs_box color="lightblue"]Это важное сообщение в цветном блоке.[/wp_kurs_box]

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

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

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

  • Экранирование данных: Всегда используйте функции esc_html, esc_attr, wp_kses_post и подобные для обработки вывода.
  • Ограничение выполняемого кода: Не выполняйте опасные операции, такие как включение файлов на основе параметров пользователя или произвольный PHP-код.
  • Кэширование: Если шорткод делает запросы к базе данных или API, подумайте о добавлении кэширования, чтобы не замедлять загрузку страниц.

Для кэширования можно использовать транзиенты WordPress:

function wp_kurs_cached_shortcode() {
    $cache_key = 'wp_kurs_cached_data';
    $data = get_transient($cache_key);
    if (false === $data) {
        // Тяжёлая операция, например, запрос к внешнему API
        $data = 'Результат сложного запроса';
        set_transient($cache_key, $data, 3600); // кэш на 1 час
    }
    return '<p>' . esc_html($data) . '</p>';
}
add_shortcode('wp_kurs_cached', 'wp_kurs_cached_shortcode');

Популярные плагины для расширения функционала шорткодов

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

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

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

Выводы и рекомендации для разработчиков

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

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

×

AI-плагин

WPGPT
Сам создает статьи для вашего сайта WordPress

SEO и мета-теги

Парсинг конкурентов

Изображения

Комментарии

Подробнее