web-dev-qa-db-ja.com

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つのウィジェットにのみクラスを追加し、残りのウィジェットには追加できません。

widgetssidebarregister-sidebar
4
Peronia

2つの解決策があります。

1. widget_display_callbackフィルターフック

このフィルターフック パラメーターを使用すると、ウィジェットインスタンスを簡単にターゲットにして、その引数をオーバーライドできます。

可能なアプローチは次のとおりです。フィルターコールバック内で、そのインスタンスの引数を変更し、表示してから、return false WordPressによって通常の方法で再び表示されます。 wp-includes/class-wp-widget.php のこのコードを参照してください。

2.検索ウィジェットを拡張する新しいウィジェットを登録します

wp-includes/widgets/class-wp-widget-search.php で定義された検索ウィジェットを拡張し、widget()メソッドをオーバーライドして必要なクラスを追加できます。これ（カスタムプラグインまたはテーマfunctions.phpファイルなど、WordPressで表示される場所にコードを追加する必要があります）：

/**
 * Custom widget search
 *
 * Extends the default search widget and adds a class to classes in `before_title`
 *
 * @author  Nabil Kadimi
 * @link    http://wordpress.stackexchange.com/a/258292/17187
 */
class WP_Widget_Search_Custom extends WP_Widget_Search {

    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_search widget_search_custom',
            'description' => __( 'A Custom search form for your site.' ),
            'customize_selective_refresh' => true,
        );
        WP_Widget::__construct( 'search_custom', _x( 'Custom Search', 'Custom Search widget' ), $widget_ops );
    }

    public function widget( $args, $instance ) {

        $custom_class = 'wpse-258279';
        $args['before_widget'] = str_replace('class="', "class=\"$custom_class", $args['before_widget']);

        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
        echo $args['before_widget'];
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        // Use current theme search form if it exists
        get_search_form();
        echo $args['after_widget'];
    }
}

/**
 * Register the custom search widget
 */
add_action( 'widgets_init', function() {
    register_widget( 'WP_Widget_Search_Custom' );
} );
2
Nabil Kadimi

オプション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の場合と同様に、その道筋をたどることができます。マークアップと機能をはるかにうまく制御できます。

3
Fayaz