Как создать шорткод с эффектом наведения и сложными опциями

Содержание

Вопрос или проблема
Ответ или решение
1. Создание шорткода
2. CSS для оформления hover-состояний
3. Динамическое добавление стилей
Заключение

Вопрос или проблема

Мне интересно, как поступать, когда нужно создать шорткод с несколькими эффектами наведения или сложными опциями (градиент, тень коробки и т.д., вещи, которые нельзя сделать встроенно). Как вы генерируете CSS?

Я не хочу генерировать блок <style></style>, потому что для простого шорткода, используемого 10 раз на странице, будет сгенерировано 10 блоков.

Все шорткоды устанавливаются со страницы пользователем, поэтому они создаются, когда вызывается the_content().

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

Ищу вариант, который соответствовал бы стандартам HTML5 и WC3.

Добавление ID к каждому шорткоду и генерация пользовательского CSS – это то, что я хочу сделать, но не могу найти, как это правильно реализовать (без создания блока <style></style> повсюду).

Буду рад любым советам и примерам.

Заранее спасибо!

Градиент и тень коробки можно вставлять встроенно. Вашими проблемами будут состояния наведения. К счастью, есть уловка. Вы можете поместить стили наведения во внешний элемент и заставить их наследоваться при наведении. Вот так:

<div class="myshortcode">
<a style="color:blue;"><span style="color:red;">Содержимое</span></a>
</div>

В вашем style.css вы добавляете эту обобщающую строку с эффектом перехода в качестве бонуса:

.myshortcode a span {transition:color 1s;}
.myshortcode a:hover span {color:inherit !important;}

Ответ или решение

Создание шорткода с возможностью сложных опций, такими как градиенты и тени, требует внимательного подхода для обеспечения правильной работы с hover-состояниями. Вот полная инструкция о том, как вы можете это реализовать, избегая создания лишних блоков <style>.

1. Создание шорткода

Сначала необходимо зарегистрировать ваш шорткод в functions.php вашей темы или в пользовательском плагине:

function my_custom_shortcode($atts) {
    // Задать атрибуты по умолчанию
    $atts = shortcode_atts(
        array(
            'border_radius' => '5px',
            'gradient' => 'linear-gradient(to right, #ff7e5f, #feb47b)',
            'boxshadow' => '0 4px 8px rgba(0,0,0,0.1)',
            // Добавить другие атрибуты по мере необходимости
        ),
        $atts,
        'my_shortcode'
    );

    // Генерировать уникальный ID для каждого шорткода
    $unique_id = uniqid('my_shortcode_');

    // Вернуть HTML-код для шорткода
    ob_start();
    ?>
    <div id="<?php echo esc_attr($unique_id); ?>" class="myshortcode" style="border-radius: <?php echo esc_attr($atts['border_radius']); ?>; background: <?php echo esc_attr($atts['gradient']); ?>; box-shadow: <?php echo esc_attr($atts['boxshadow']); ?>;">
        <a style="color: blue;">
            <span style="color: red;">Содержимое</span>
        </a>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

2. CSS для оформления hover-состояний

В файле style.css вашей темы добавьте общий стиль для вашего шорткода, а также стили для hover-состояний:

.myshortcode a span {
    transition: color 1s;
}

.myshortcode a:hover span {
    color: inherit !important; /* Унаследовать цвет от родительского элемента */
}

/* Добавьте стили для вашего уникального ID, если необходимо */

3. Динамическое добавление стилей

Вы также можете добавить динамические стили с помощью функции wp_add_inline_style, чтобы для каждого уникального шорткода применялись особые стили. Вот пример, как это можно сделать:

function my_custom_shortcode($atts) {
    $atts = shortcode_atts(array(
        'border_radius' => '5px',
        'gradient' => 'linear-gradient(to right, #ff7e5f, #feb47b)',
        'boxshadow' => '0 4px 8px rgba(0,0,0,0.1)',
    ), $atts);

    $unique_id = uniqid('my_shortcode_');

    // Добавление стилей в обертку
    $custom_css = "
        #{$unique_id} {
            border-radius: {$atts['border_radius']};
            background: {$atts['gradient']};
            box-shadow: {$atts['boxshadow']};
        }
    ";
    wp_add_inline_style('your-style-handle', $custom_css);

    ob_start();
    ?>
    <div id="<?php echo esc_attr($unique_id); ?>" class="myshortcode">
        <a style="color: blue;">
            <span style="color: red;">Содержимое</span>
        </a>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

Заключение

Теперь, используя вышеописанный метод, вы сможете создать шорткод с возможностью настройки, который будет использовать динамически сгенерированные стили, избегая проблем с множественными <style> блоками. Этот подход отвечает требованиям HTML5 и W3C, обеспечивая правильное отображение и поведение на всех устройствах. Пользователи смогут легко настраивать свои шорткоды, а вы сможете контролировать стили без излишнего кода.