web-dev-qa-db-fra.com

Ajout de styles en ligne à partir d'un widget

Je travaille sur un thème doté d'un widget facultatif permettant aux utilisateurs de placer certains éléments du site à leur guise. L'une d'elles est une liste d'icônes de médias sociaux. Celles-ci sont des icônes de police, elles peuvent donc être appelées css pour s’adapter à la palette du thème. Cependant, le widget offre également à l'utilisateur la possibilité de choisir une couleur et un survol: couleur. Il peut y avoir plus d'une instance du même widget avec différentes options de couleur sur une page.

Pour obtenir ces styles où je les veux, j'ai deux options, autant que je sache:

  1. Mettez-les en ligne. Je peux mettre la couleur sur l'élément lui-même, mais l'état de survol doit être dans les balises style. Cela fonctionne bien, mais ne valide pas. (Je pourrais aussi attacher les styles à deux icônes superposées avec différentes classes et laisser la plus haute disparaître en survol ou les stocker dans un div invisible et les extraire avec jquery - cela validerait, mais ce n’est pas très attrayant).

  2. Obtenez-les globales en ajoutant le widget-id pour qu'elles ciblent la bonne icône. Puisque la tête a été construite au moment où WP arrive aux widgets, il n’est plus possible d’utiliser wp_add_inline_styles. Je pourrais stocker les styles suivants dans un tableau global et utiliser add_action pour les transmettre au pied de page. Je pourrais probablement le faire fonctionner et le valider, mais c’est plutôt moche.

Quelqu'un a une meilleure idée?

theme-developmentwidgetscsswp-enqueue-style
2
cjbj

Je l'ai. Alors, voici comment vous insérez un état de survol à mi-chemin du traitement d'une page sans enfreindre les règles du W3C. C'est le code que vous ne voulez pas que votre widget produise:

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

Ce qui suit valide et est assez élégant. Dans votre widget, générez le code suivant:

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

Dans votre style.css, vous ajoutez cette ligne générique avec un effet de transition en bonus:

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

Testé sous Firefox 38, Chrome 34 et IE 11

1
cjbj