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

Что такое shortcode в WordPress и зачем он нужен

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

Например, с помощью shortcode можно вывести формы, галереи, кнопки, специальные блоки с информацией и даже сложные интерактивные элементы. Главное — создать shortcode один раз и использовать его везде, где нужно.

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

Создаем базовый shortcode: пошаговое руководство

Начнем с самого простого примера. Допустим, нам нужно вывести на страницу приветственное сообщение с возможностью менять имя пользователя через параметр shortcode.

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

function wpassist_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'Гость'),
        $atts,
        'hello'
    );
    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на наш сайт.';
}
add_shortcode('hello', 'wpassist_hello_shortcode');

Здесь мы создали функцию wpassist_hello_shortcode, которая принимает массив атрибутов $atts. Функция устанавливает значение по умолчанию для параметра name — "Гость". Затем возвращает строку с приветствием, безопасно экранируя имя.

Чтобы использовать этот shortcode в записи или на странице, достаточно вставить:

[hello name="Иван"]

После чего на сайте отобразится: Привет, Иван! Добро пожаловать на наш сайт.

Передача нескольких параметров и работа с ними

Shortcode может принимать сколько угодно параметров. Рассмотрим пример с выводом кнопки с настраиваемым текстом, ссылкой и классом CSS.

Добавим следующий код:

function wpassist_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'class' => 'wpassist-btn'
        ),
        $atts,
        'button'
    );
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);
    $class = esc_attr($atts['class']);
    return "<a href=\"$url\" class=\"$class\">$text</a>";
}
add_shortcode('button', 'wpassist_button_shortcode');

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

[button text="Перейти" url="https://wpassist.ru" class="btn-primary"]

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

Обработка вложенного контента в shortcode

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

Вот пример подобного shortcode, который выделяет текст рамкой:

function wpassist_box_shortcode($atts, $content = null) {
    return '<div style="border: 2px solid #0073aa; padding: 10px; background: #f0f8ff;">' . do_shortcode($content) . '</div>';
}
add_shortcode('box', 'wpassist_box_shortcode');

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

[box]Текст внутри выделенной рамки[/box]

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

Советы по безопасности и оптимизации shortcode

При создании shortcode важно помнить:

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

Использование плагинов для расширенного управления shortcode

Для упрощения работы и расширения функционала можно использовать плагины:

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

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

Пример: Создание shortcode для вывода последних 3 записей блога

Ниже пример, который выведет заголовки и даты последних трех записей в виде списка:

function wpassist_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 3), $atts, '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 class="wpassist-latest-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $title = get_the_title();
        $permalink = get_permalink();
        $date = get_the_date();
        $output .= "<li><a href=\"$permalink\">" . esc_html($title) . "</a> — <span>" . esc_html($date) . "</span></li>";
    }
    wp_reset_postdata();
    $output .= '</ul>';
    return $output;
}
add_shortcode('latest_posts', 'wpassist_latest_posts_shortcode');

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

[latest_posts count="3"]

Этот shortcode легко настроить под нужное количество записей и стиль оформления.

Заключение: как и где использовать shortcode на практике

Shortcode — отличный инструмент для повышения гибкости контента в WordPress. Их можно применять в записях, страницах, виджетах, а также в шаблонах темы через функцию do_shortcode().

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