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

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

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

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

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

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

Создание простого шорткода: пример для кнопки соцсети

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

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

function wpsocial_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => 'https://facebook.com',
        'text' => 'Подписаться на Facebook',
        'class' => 'wpsocial-btn'
    ), $atts, 'wpsocial_button');

    return '<a href="'.esc_url($atts['url']).'" class="'.esc_attr($atts['class']).'" target="_blank" rel="noopener noreferrer">'.esc_html($atts['text']).'</a>';
}
add_shortcode('wpsocial_button', 'wpsocial_button_shortcode');

Этот шорткод принимает три параметра: url — ссылка на соцсеть, text — текст кнопки, class — CSS класс для стилизации. Например, чтобы вставить кнопку, используйте:

[wpsocial_button url="https://vk.com/wpsocial" text="Наш ВКонтакте"]

Стилизация кнопки

Чтобы кнопка выглядела красиво, добавьте CSS в файл стилей темы или в раздел «Дополнительные стили» в кастомайзере:

.wpsocial-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4a76a8;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.wpsocial-btn:hover {
    background-color: #3b5c7a;
}

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

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

Обновлённый пример функции:

function wpsocial_button_shortcode($atts) {
    $networks = array(
        'facebook' => array('url' => 'https://facebook.com/wpsocial', 'icon' => '<i class="fab fa-facebook-f"></i>'),
        'vk' => array('url' => 'https://vk.com/wpsocial', 'icon' => '<i class="fab fa-vk"></i>'),
        'twitter' => array('url' => 'https://twitter.com/wpsocial', 'icon' => '<i class="fab fa-twitter"></i>'),
    );

    $atts = shortcode_atts(array(
        'network' => 'facebook',
        'text' => '',
        'class' => 'wpsocial-btn'
    ), $atts, 'wpsocial_button');

    if (!isset($networks[$atts['network']])) {
        return '';
    }

    $url = $networks[$atts['network']]['url'];
    $icon = $networks[$atts['network']]['icon'];
    $text = $atts['text'] ?: ucfirst($atts['network']);

    return '<a href="'.esc_url($url).'" class="'.esc_attr($atts['class']).'" target="_blank" rel="noopener noreferrer">'. $icon .' '. esc_html($text) .'</a>';
}
add_shortcode('wpsocial_button', 'wpsocial_button_shortcode');

Для корректного отображения иконок используйте библиотеку Font Awesome, подключив её в вашем шаблоне:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>

Теперь можно использовать шорткод так:

[wpsocial_button network="vk" text="ВКонтакте"]

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

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

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

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

Обработка атрибутов и ошибок

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

Примеры полезных шорткодов для WordPress

Кроме кнопок соцсетей, можно создавать шорткоды для:

• Вставки контактной формы с автозаполнением
• Отображения последних записей из определённой категории
• Динамического вывода пользовательских данных
• Встраивания интерактивных элементов, например, карт или калькуляторов

Например, шорткод для вывода последних 3 записей из категории «Новости» может выглядеть так:

function wpsocial_latest_news_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 3,
        'category' => 'news'
    ), $atts, 'wpsocial_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 class="wpsocial-latest-news">';
    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('wpsocial_latest_news', 'wpsocial_latest_news_shortcode');

Использование: [wpsocial_latest_news count=5 category="novosti"]

Заключение: создавайте шорткоды для упрощения управления сайтом

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

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