質問: 1つのウィジェットだけにdivクラスを追加する 私の検索ウィジェットのdivタグにさらにクラスを追加したいです。私の検索は他のウィジェットと一緒にサイドバーにあります。私のコード:function nt_widgets_init() { register_sidebar( array( 'name' => __( 'sidebar', 'side' ), 'id' => 'sidebar', 'description' => __( 'rechte spalte', 'rechts' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<span class="none">', 'after_title' => '</span>', ) ); } add_action( 'widgets_init', 'nt_widgets_init' ); そのため、各ウィジェットはidとclassを取得します。 1つのウィジェットにのみクラスを追加し、残りのウィジェットには追加できません。
回答: オプション1:すでに提供されているcssクラスを使用する:すべてのウィジェットはすでにcssルールで使用するためのユニークなidとclassを提供しています。そのため、ほとんどのスタイル設定のニーズに対しては、それらを使用して、そのウィジェットに対してのみ機能する特定のcssルールを生成することをお勧めします(例:検索)。たとえば、デフォルトの検索ウィジェットはcssクラスwidget_searchを持ちます。他のウィジェットとは異なる方法で検索ウィジェットをスタイルするためにそれを使用することができます。好きです:.widget { background-color: wheat; } .widget.widget_search { background-color: gold; } オプション2:dynamic_sidebar_paramsフィルターの使用ウィジェットをregister_sidebar()関数で登録しているので、おそらくテンプレートではdynamic_sidebar()関数でそれを使ったことがあるでしょう。その場合、 dynamic_sidebar_params filterフックを使用して、特定のウィジェットにのみ追加のcssクラスを挿入することができます。テーマのfunctions.phpファイルで次のコードを使用します(追加の指示はコードにあります)。add_filter( 'dynamic_sidebar_params', 'wpse258279_filter_widget' ); function wpse258279_filter_widget( $params ) { // avoiding admin panel if( ! is_admin() ) { if ( is_array( $params ) && is_array( $params[0] ) && $params[0]['widget_name'] === 'search' ) { // insert your custom css class (one or more) in the following array $classes = array( 'custom-css-class-for-search' ); // the following three lines will add $classes // (along with the existing css classes) using regular expression // don't touch it if you don't know regex $pattern = '/class\s*=\s*(["\'])(?:\s*((?!\1).*?)\s*)?\1/i'; $replace = 'class=$1$2 ' . implode( ' ', $classes ) . '$1'; $params[0]['before_widget'] = preg_replace( $pattern, $replace, $params[0]['before_widget'], 1 ); } } return $params; } 上記のコードでは、この行に1つ以上のcssクラスを追加することができます:$classes = array( 'custom-css-class-for-search' );。そのため、検索ウィジェットに2つのcssクラスを追加したい場合は、次のようになります。$classes = array( 'custom-css-class-for-search', 'another-class' ); オプション3:カスタムウィジェット:上記の方法で処理できる以上の制御が必要な場合は、検索用のカスタムウィジェット この回答に示すように を実装できます。ただし、複数のウィジェットに同じ動作をさせたい場合は、カスタムウィジェットを保守するのが難しいかもしれません。その場合は、そのウィジェットも実装する必要があります(追加のcssクラスのみ)。それが問題にならないのであれば、カスタムwidgetの場合と同様に、その道筋をたどることができます。マークアップと機能をはるかにうまく制御できます。