web-dev-qa-db-ja.com

特定のウィジェットの$ before_widgetを変更する

だから私はたくさんの追加のウィジェットでWordpressのテーマをデザインすることに取り組んでいます。私が追加したものは別々のファイルに入っていて、functions.phpで呼ばれています。ウィジェット自体にはたくさんのcssがあり、divクラスはfunctions.phpの$ before_widgetと$ after_widgetなどにあります。私の問題は、特定のウィジェットでは同じCSSが欲しくないことです。私はこれをどうやって行けばいいのかわからない。それが理にかなっている場合。前もって感謝します！

themeswidgetssidebar
1
iJamesPine

各ウィジェットで別々のスタイルを許可する方法は2つあります。 1つ目は、このようにウィジェットに別々のクラスを追加することです。

最初の方法

register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul class="black-bg"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

その後、.back-bgクラスを使用してこのようなウィジェットのスタイルを設定できます。

#sidebar .black-bg {
background:black;
}

そして境界線なしで：

register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul class="no-border"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

cSSは例えば：

#sidebar .no-border {
border:none;
}

2番目の方法

サイドバー/ウィジェットへの呼び出しを行っている場所にテーマファイルを使用することもできます。このようにするには、ウィジェットの前後に同じものを使用しますが、クラスまたはIDを使用してサイドバーをテンプレートファイルで次のようにラップします。

register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));
register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

それからwhatever-themefile.phpでこれをすることができます：

  <div class="black-bg">
    <?php if ( function_exists ( dynamic_sidebar(1) ) ) : ?>
    <?php dynamic_sidebar (1); ?>
    <?php endif; ?>
  </div>

スタイル：

.black-bg {
background:black;
}

そして...

  <div class="no-border">
    <?php if ( function_exists ( dynamic_sidebar(2) ) ) : ?>
    <?php dynamic_sidebar (2); ?>
    <?php endif; ?>
  </div>


.no-border {
border:none;
}

コメントに対する返答：

私はあなたがサイドバーを意味していると思いました。ほとんどがカスタムサイドバーを「ウィジェット」と呼んでいるので、もう一度試してみましょう。

私はあなたが欲しいものを完全には描写していません、しかしあなたが登録するそれぞれのカスタムウィジェットはそれ自身のクラスを持つでしょう。ウィジェットが複数回使用されている場合は、スタイルを処理するために配置される "location"を使用するのが理にかなっているように思えます（これが配置されるdynamic_sidebarになります）。

特定のサイドバーに複数回配置されている単一のウィジェットに個別のスタイルを追加する方法について話している場合は、単純にcss擬似セレクタ（奇数/偶数）を使用します。例えば：

/*EVEN*/
#sidebar .black-bg:nth-child(even) {
background:transparent;
border:none;
}

/*ODD*/
#sidebar .black-bg:nth-child(odd) {
background: black;
border:1px dotted silver;
}
3
Jeremy Jared

それが$before_widgetのすべてです。あなたはarray('before_widget' => '<span class="some-class".',after_widget' => '</span>)をし、それからあなたが望むものに.some-classをスタイルします。複数のクラスを持つことも、ウィジェットIDでスタイルすることもできます。これがあなたが求めているものではない場合は、質問を明確にしてください。

0
Brooke.