Как создать свой шорткод в WordPress: практические примеры и советы

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

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

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

Шорткоды полезны, если вам нужно:

• Вставить динамический или интерактивный контент в записи и страницы.
• Сделать контент более удобным для редактирования без программирования.
• Разграничить логику и представление, сохранив код в одном месте.

Теперь перейдем к практической части.

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

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

function yelly_simple_shortcode() {
    return '<p>Привет от шорткода yelly!</p>';
}
add_shortcode('yelly_hello', 'yelly_simple_shortcode');

Добавьте этот код в файл functions.php вашей темы или создайте небольшой плагин. Теперь в любом месте сайта, где вы напишете [yelly_hello], появится текст "Привет от шорткода yelly!".

Советы по именованию функций и шорткодов

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

Передача параметров в шорткод

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

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

Использование: [yelly_greeting name="Алексей"] выведет «Привет, Алексей! Добро пожаловать на yelly.ru.»

Создание сложного шорткода с выводом HTML и логикой

Шорткод может возвращать любой HTML, включая списки, таблицы, формы и даже JavaScript. Рассмотрим пример шорткода, который выводит список последних записей с миниатюрами.

function yelly_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
        ), $atts, 'yelly_recent_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="yelly-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $thumb = get_the_post_thumbnail(get_the_ID(), 'thumbnail');
        $title = get_the_title();
        $link = get_permalink();
        $output .= '<li><a href="' . esc_url($link) . '">' . $thumb . esc_html($title) . '</a></li>';
    }
    wp_reset_postdata();

    $output .= '</ul>';
    return $output;
}
add_shortcode('yelly_recent_posts', 'yelly_recent_posts_shortcode');

Параметр count регулирует количество записей. Пример использования: [yelly_recent_posts count="3"].

Стилизация и безопасность

Для корректного отображения списка добавьте CSS в ваш файл стилей:

.yelly-recent-posts {
    list-style: none;
    padding: 0;
}
.yelly-recent-posts li {
    margin-bottom: 10px;
}
.yelly-recent-posts img {
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 4px;
}

Обращайте внимание на экранирование вывода с помощью функций esc_html() и esc_url() для безопасности.

Расширение: шорткод с вложенным содержимым (content)

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

function yelly_highlight_shortcode($atts, $content = null) {
    return '<span style="background-color: yellow;">' . esc_html($content) . '</span>';
}
add_shortcode('yelly_highlight', 'yelly_highlight_shortcode');

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

[yelly_highlight]Важный текст[/yelly_highlight]

Результат: текст выделится желтым фоном.

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

При разработке шорткодов:

• Тестируйте разные варианты параметров.
• Проверяйте вывод в визуальном и текстовом редакторах WordPress.
• Используйте функции shortcode_exists() чтобы избежать повторного добавления шорткода.
• Добавляйте обработку ошибок и проверку входных данных.

Например, проверка перед добавлением:

if (!shortcode_exists('yelly_hello')) {
    add_shortcode('yelly_hello', 'yelly_simple_shortcode');
}

Выводы и рекомендации

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

На сайте yelly.ru вы можете создавать уникальный контент с помощью шорткодов, которые легко интегрируются и управляются.