Добавление встроенных стилей из виджета

Я работаю над темой, у которой есть дополнительный виджет, позволяющий пользователям размещать элементы сайта там, где они хотят. Один из них – список значков социальных сетей. Это значки шрифтов, поэтому они могут быть в стиле css, чтобы вписаться в палитру темы. Однако виджет также дает пользователю возможность выбирать другой цвет и наведение: цвет. Может быть несколько экземпляров одного и того же виджета с разными параметрами цвета на странице.

Чтобы получить эти стили там, где я хочу их, у меня есть два варианта, насколько я вижу:

  1. Поместите их в линию. Я могу поместить цвет на самом предмете, но состояние зависания должно быть в тегах стиля. Это прекрасно работает, но не подтверждает. (Я мог бы также прикрепить стили к двум перекрывающимся значкам с разными классами и высветить их при наведении или сохранить их в невидимом div и извлечь их с помощью jquery – это будет проверяться, но в противном случае это не очень привлекательно).

  2. Получите их глобально, добавив идентификатор виджета, чтобы они настроили правильный значок. Поскольку головка была построена к тому моменту, когда WP попадает на виджеты, больше не используется wp_add_inline_styles . Я мог бы сохранить последующие стили в глобальном массиве и использовать add_action чтобы доставить их в нижний колонтитул. Я мог бы, наверное, получить эту работу и проверить, но это, ну, довольно уродливо.

Кто-нибудь получил лучшую идею?

Solutions Collecting From Web of "Добавление встроенных стилей из виджета"

Понял. Итак, вот как вы вставляете состояние зависания на полпути обработки страницы, не нарушая правила w3c. Это код, который вы не хотите, чтобы ваш виджет производил:

 <div class="mywidget"> <style>.mywidget a {color:red}, . mywidget a:hover {color:blue;}</style> <a>Link</a> </div> 

Следующие проверки и довольно элегантные. В вашем виджетах создается следующий код:

 <div class="mywidget"> <a style="color:blue;"><span style="color:red;">Link</span></a> </div> 

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

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

Протестировано в Firefox 38, Chrome 34 и IE 11