Вопрос или проблема
Мне интересно, как поступать, когда нужно создать шорткод с несколькими эффектами наведения или сложными опциями (градиент, тень коробки и т.д., вещи, которые нельзя сделать встроенно). Как вы генерируете 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, обеспечивая правильное отображение и поведение на всех устройствах. Пользователи смогут легко настраивать свои шорткоды, а вы сможете контролировать стили без излишнего кода.