web-dev-qa-db-ja.com

ウィジェットからインラインスタイルを追加する

私は、ユーザーが自分の好きな場所にいくつかのサイト要素を配置できるようにするオプションのウィジェットを持つテーマに取り組んでいます。その1つがソーシャルメディアのアイコンのリストです。これらはフォントアイコンなので、テーマのパレットに合うようにCSSでスタイル設定できます。ただし、このウィジェットでは、ユーザーは異なる色を選択してホバーすることもできます。それは色です。ページ上に異なる色オプションを持つ同じウィジェットの複数のインスタンスがある可能性があります。

これらのスタイルを必要な場所に配置するには、表示できる範囲で2つの選択肢があります。

  1. それらをインラインにしてください。アイテム自体に色をつけることができますが、ホバー状態はstyle-tagsである必要があります。これはうまく機能しますが、検証されません。 （異なるクラスの2つの重なっているアイコンにスタイルを添付して、上のアイコンをホバーにフェードアウトさせるか、見えないdivに格納してjqueryで抽出することもできます。

  2. 適切なアイコンをターゲットにするためにwidget-idを追加して、それらをグローバルにします。 WPがウィジェットに到達するまでにheadが構築されているので、もうwp_add_inline_stylesを使う必要はありません。後続のスタイルをグローバル配列に格納し、add_actionを使用してそれらをフッターに渡すことができます。私はおそらくこれを機能させ検証することができたでしょう、しかしそれはまあ、かなり醜いです。

誰かがより良いアイデアを得ましたか？

theme-developmentwidgetscsswp-enqueue-style
2
cjbj

とった。だからここにあなたが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でテスト済み

1
cjbj