web-dev-qa-db-ja.com

Functions.phpを使ってウィジェットにCSSクラスを追加するにはどうすればいいですか？

WordPressの検索ウィジェットにクラスを追加する必要があります。どのようにしてそうしますか？管理セクションのウィジェットページのサイドバーにドラッグアンドドロップするのと同じように、管理サイドから呼び出しています。 get_search_formを使って呼び出しているのではありません。 jQueryやcssプロパティを追加するのではなく、functions.phpファイルを使用してこれを行いたいのです。

widgetscss
1
yaharga

さて、それで私はこのリンクを私に提供してくれた @toscho のおかげでそれをやってのけることができました： ドロップダウンとカウンターですべてのウィジェットのためにbefore_widgetにクラスを追加します

私はちょっとそれを通して仕上げました。

私がやりたかったのは、Bootstrapから検索ウィジェットに1つのクラス "col-sm-4"を追加することだけでした。

is_admin() || add_filter( 'dynamic_sidebar_params', 'wpse172754_add_widget_classes' );

/**
 * Add classes for widgets.
 *
 * @param  array $params
 * @return array
 */
function wpse172754_add_widget_classes( $params ) {

if ($params[0]['widget_name'] == 'Search') {
  $params[0] = array_replace($params[0], array('before_widget' => str_replace("widget_search", "widget_search col-sm-4", $params[0]['before_widget'])));
}

  return $params;

}

それが何をするのか説明させてください。

まず、コードをもっとよく理解するために、print_r($params)を使ってその内容を確認しました。これが出力です。

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget search-2 widget_search">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => search-2
        [widget_name] => Search
    )

    [1] => Array
    (
        [number] => 2
    )
)

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget custom-social-media-widget-2 widget_custom-social-media-widget col-xs-offset-2 col-xs-6 col-sm-offset-4 col-sm-3 col-lg-offset-5 col-lg-2">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => custom-social-media-widget-2
        [widget_name] => Custom Social Media Widget
    )

    [1] => Array
        (
            [number] => 2
)

出力をよりよく理解するために、私はそのフックの WordPressコードリファレンス ページにも行き、配列が実際に何を含んでいるのか見ました。次に、私がしなければならなかったのは私のために数字とキーを使うことだけでした。

  • まず、2番目の値にはインスタンス番号しか含まれていないため、ほとんどの値は最初の配列$params[0]に格納されることがわかっていたので、その配列を使用する必要があります。
  • コードが常に不必要に実行されないようにするために、必要なウィジェットかどうかをチェックするための単純なifステートメントを入れました。
  • 次に、配列内の値を置き換える必要があったので、array_replace()を使用しました。
  • 最後に、before_widget値にある値の1つを知っているので、str_replaceを使用して値を変更し、必要なクラス名を追加しました。

それを行うより良い方法があるならば、私に知らせてください、またはこれについて将来私を更新してください。お役に立てれば。

5
yaharga

ちょっとあなたがこのようなbefore_widgetにクラスを追加することができます

if ( function_exists('register_sidebar') )
    register_sidebar(array(
       'name' => 'Your Widget Name',
       'description' => 'Description of your widget',
       'before_widget' => '<div class="container-top">',
       'after_widget' => '</div>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
    ));

助けになると思います

2
Amit Mishra

あなたがウィジェットにもっとCSSクラスとIDを追加できるプラグインがあります。これは ウィジェットCSSクラス と呼ばれます。かなり便利です、見てみましょう： https://wordpress.org/plugins/widget-css-classes/ /

0
levelzwo

これはすべてのウィジェットにクラスフィールドを追加します。

function kc_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
        $instance['classes'] = null;   
        $row .= "Class:\t<input type='text' name='widget-{$widget->id_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat' value='{$instance['classes']}'/>\n";
        $row .= "</p>\n";    
        echo $row;
    return $instance;
}
add_filter('widget_form_callback', 'kc_widget_form_extend', 10, 2);function kc_widget_update( $instance, $new_instance ) {
    $instance['classes'] = $new_instance['classes'];
return $instance;
}
add_filter( 'widget_update_callback', 'kc_widget_update', 10, 2 );
function kc_dynamic_sidebar_params( $params ) {
    global $wp_registered_widgets;
    $widget_id    = $params[0]['widget_id'];
    $widget_obj    = $wp_registered_widgets[$widget_id];
    $widget_opt    = get_option($widget_obj['callback'][0]->option_name);
    $widget_num    = $widget_obj['params'][0]['number'];    
    if ( isset($widget_opt[$widget_num]['classes']) && !empty($widget_opt[$widget_num]['classes']) )
        $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_opt[$widget_num]['classes']} ", $params[0]['before_widget'], 1 );
    return $params;
}
add_filter( 'dynamic_sidebar_params', 'kc_dynamic_sidebar_params' );

出典

0
dragoeco