it-swarm.com.de

Hinzufügen von Inline-Stilen aus einem Widget

Ich arbeite an einem Thema, das über ein optionales Widget verfügt, mit dem Benutzer einige Websiteelemente an den gewünschten Stellen platzieren können. Eine davon ist eine Liste von Social-Media-Symbolen. Dies sind Schriftsymbole, sodass sie mit CSS so gestaltet werden können, dass sie in die Themenpalette passen. Das Widget bietet dem Benutzer jedoch auch die Möglichkeit, eine andere Farbe zu wählen und den Mauszeiger zu bewegen: Farbe. Es kann mehr als eine Instanz desselben Widgets mit unterschiedlichen Farboptionen auf einer Seite geben.

Um diese Stile dahin zu bringen, wo ich sie haben möchte, habe ich zwei Möglichkeiten, soweit ich sehen kann:

  1. Setzen Sie sie inline. Ich kann die Farbe auf den Gegenstand selbst setzen, aber der Schwebezustand muss in Stil-Tags sein. Dies funktioniert gut, wird aber nicht validiert. (Ich könnte die Stile auch an zwei sich überlappende Symbole mit unterschiedlichen Klassen anhängen und das obere beim Hover ausblenden lassen oder sie in einer unsichtbaren div speichern und mit jquery extrahieren - dies würde validieren, ist aber ansonsten nicht sehr ansprechend).

  2. Holen Sie sie sich global, indem Sie die Widget-ID hinzufügen, um sie auf das richtige Symbol auszurichten. Da der Kopf konstruiert wurde, als WP die Widgets erreicht, gibt es keine Verwendung von wp_add_inline_styles mehr. Ich könnte die nachfolgenden Stile in einem globalen Array speichern und mit add_action an die Fußzeile übergeben. Ich könnte das wahrscheinlich zum Laufen bringen und validieren, aber es ist ziemlich hässlich.

Hat jemand eine bessere Idee?

2
cjbj

Ich habs. So fügen Sie einen Schwebezustand während der Verarbeitung einer Seite ein, ohne die w3c-Regeln zu verletzen. Dies ist der Code, den Ihr Widget nicht erzeugen soll:

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

Das Folgende bestätigt und ist ziemlich elegant. Generieren Sie in Ihrem Widget den folgenden Code:

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

In deinem style.css fügst du diese generische Zeile mit einem Übergangseffekt als Bonus hinzu:

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

Getestet in Firefox 38, Chrome 34 und IE 11

1
cjbj