Рубрики
WordPress

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

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

Создание простого шорткода

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

Простой шорткод для вывода приветственного сообщения

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

function greeting_shortcode() {
    return "<h2>Добро пожаловать на наш сайт!</h2>";
}
add_shortcode('greeting', 'greeting_shortcode');

Теперь вы можете использовать шорткод [greeting] в любом месте вашего сайта, и он выведет сообщение «Добро пожаловать на наш сайт!».

Шорткод с атрибутами

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

Шорткод для вывода сообщения с динамическим текстом

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

function custom_message_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'message' => 'Это стандартное сообщение.',
        ),
        $atts,
        'custom_message'
    );
    return "<p>{$atts['message']}</p>";
}
add_shortcode('custom_message', 'custom_message_shortcode');

Теперь вы можете использовать шорткод [custom_message message="Привет, мир!"], и он выведет сообщение «Привет, мир!».

Шорткод с вложенным контентом

Вы также можете создавать шорткоды, которые обрабатывают вложенный контент.

Шорткод для оборачивания текста в блок

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

function wrap_text_shortcode($atts, $content = null) {
    return "<div class='custom-wrap'>" . do_shortcode($content) . "</div>";
}
add_shortcode('wrap', 'wrap_text_shortcode');

Теперь вы можете использовать шорткод [wrap]Ваш текст здесь[/wrap], и он обернет текст в <div> с классом custom-wrap.

Шорткод с более сложной логикой

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

Шорткод для вывода последних записей

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

function latest_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
        ),
        $atts,
        'latest_posts'
    );

    $query_args = array(
        'post_type' => 'post',
        'posts_per_page' => $atts['count']
    );

    $query = new WP_Query($query_args);

    if ($query->have_posts()) {
        $output = '<ul class="latest-posts">';
        while ($query->have_posts()) {
            $query->the_post();
            $output .= '<li><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></li>';
        }
        wp_reset_postdata();
        $output .= '</ul>';
    } else {
        $output = '<p>Записей не найдено.</p>';
    }

    return $output;
}
add_shortcode('latest_posts', 'latest_posts_shortcode');

Теперь вы можете использовать шорткод [latest_posts count="3"], и он выведет список из трех последних записей вашего блога.

Шорткод для отображения динамических данных

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

Шорткод для отображения текущей даты

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

function current_date_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'format' => 'Y-m-d',
        ),
        $atts,
        'current_date'
    );

    return date_i18n($atts['format']);
}
add_shortcode('current_date', 'current_date_shortcode');

Теперь вы можете использовать шорткод [current_date format="F j, Y"], и он выведет текущую дату в формате «January 1, 2023».

Шорткод для интеграции с внешними API

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

Шорткод для отображения погоды

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

function weather_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'city' => 'Moscow',
            'api_key' => 'your_api_key_here',
        ),
        $atts,
        'weather'
    );

    $response = wp_remote_get("http://api.openweathermap.org/data/2.5/weather?q={$atts['city']}&appid={$atts['api_key']}&units=metric");

    if (is_wp_error($response)) {
        return 'Не удалось получить данные о погоде.';
    }

    $data = wp_remote_retrieve_body($response);
    $weather = json_decode($data);

    if (isset($weather->main->temp)) {
        return "<p>Текущая температура в {$atts['city']}: {$weather->main->temp}°C</p>";
    } else {
        return 'Не удалось получить данные о погоде.';
    }
}
add_shortcode('weather', 'weather_shortcode');

Теперь вы можете использовать шорткод [weather city="Moscow" api_key="your_api_key_here"], и он выведет текущую температуру в указанном городе.

Полезные советы и рекомендации

  • Кэширование: Если ваш шорткод делает сложные вычисления или отправляет запросы к внешним API, рассмотрите возможность кэширования результата для уменьшения нагрузки на сервер.
  • Безопасность: Всегда проверяйте и очищайте входные данные шорткода, чтобы предотвратить XSS и другие уязвимости.
  • Документация: Документируйте свои шорткоды и их атрибуты, чтобы другие разработчики могли легко понять и использовать их.

Больше на AIDA

Subscribe to get the latest posts sent to your email.