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

Почему важно создавать собственные шорткоды в WordPress

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

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

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

Основы создания шорткода в WordPress

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

function wpelementor_custom_shortcode_example() {
    return '<div style="padding: 10px; background-color: #f0f0f0;">Привет от WPelementor!</div>';
}
add_shortcode('wpelementor_greeting', 'wpelementor_custom_shortcode_example');

Теперь в любом месте сайта, включая виджеты Elementor, вы можете вставить шорткод [wpelementor_greeting], и он выведет стилизованное приветствие.

Ключевое — всегда использовать префикс (например, wpelementor_) в названии функции и шорткода, чтобы избежать конфликтов с другими плагинами.

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

Elementor поддерживает вставку шорткодов через виджет "Шорткод". Просто перетащите его на страницу и вставьте название вашего шорткода. Но что если нужно сделать шорткод, который принимает параметры для гибкой настройки вывода?

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

function wpelementor_custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => '#0073aa'
        ), $atts, 'wpelementor_button');

    return '<a href="' . esc_url($atts['url']) . '" style="display:inline-block; padding: 10px 20px; background-color:' . esc_attr($atts['color']) . '; color:#fff; text-decoration:none; border-radius:4px;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpelementor_button', 'wpelementor_custom_button_shortcode');

Теперь в Elementor вы можете использовать шорткод вида [wpelementor_button text="Перейти" url="https://wpelementor.ru" color="#ff6600"], и кнопка будет адаптирована под ваши нужды. Это значительно расширяет возможности быстрого создания уникального контента.

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

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

function wpelementor_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 3
    ), $atts, 'wpelementor_recent_posts');

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

    if (!$query->have_posts()) {
        return '<p>Нет записей для отображения.</p>';
    }

    $output = '<div class="wpelementor-recent-posts" style="border:1px solid #ddd; padding:10px;">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<article style="margin-bottom:15px;">';
        $output .= '<h3 style="margin:0 0 5px 0; font-size:18px;"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
        $output .= '<div style="font-size:12px; color:#666; margin-bottom:5px;">' . get_the_date() . '</div>';
        $output .= '<p style="margin:0; font-size:14px; color:#333;">' . wp_trim_words(get_the_excerpt(), 20) . '</p>';
        $output .= '</article>';
    }
    wp_reset_postdata();

    $output .= '</div>';

    return $output;
}
add_shortcode('wpelementor_recent_posts', 'wpelementor_recent_posts_shortcode');

Вставьте [wpelementor_recent_posts count="5"] в блок шорткода Elementor — и вы получите красивый список из 5 последних записей. Можно менять количество с помощью параметра count.

Советы по безопасности и оптимизации шорткодов в WordPress

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

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

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

Как зарегистрировать шорткод правильно в плагине или functions.php

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

<?php
/**
 * Plugin Name: WPelementor Custom Shortcodes
 * Description: Собственные шорткоды для сайта wpelementor.ru
 * Version: 1.0
 * Author: Ваше Имя
 */

// Здесь ваш код шорткодов

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