Как добавить CSS классы к виджетам с помощью functions.php?

19 дек. 2014 г., 19:52:42
Просмотры: 18.7K
Голосов: 2

Мне нужно добавить класс к виджету поиска WordPress. Как это можно сделать? Я добавляю его через админку, перетаскивая в сайдбар на странице виджетов в админ-разделе. Я не вызываю его с помощью get_search_form. Я хочу сделать это с помощью файла functions.php, без использования jQuery или добавления CSS свойств.

2
Комментарии

На самом деле это помогает. Думаю, это делает даже больше, чем мне нужно. Попробую разобраться. Спасибо!

yaserso yaserso
19 дек. 2014 г. 20:01:09
Все ответы на вопрос 4
1

Хорошо, мне удалось это реализовать благодаря @toscho, который предоставил мне эту ссылку: Добавить класс к before_widget для всех виджетов с выпадающим списком и счетчиком.

Я вроде бы разобрался с этим.

Все, что я хотел сделать, это добавить один класс "col-sm-4" из Bootstrap к виджету поиска.

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

/**
 * Добавляет классы для виджетов.
 *
 * @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 Code Reference для этого хука и увидел, что на самом деле содержит массив. Затем мне оставалось только использовать номера и ключи в своих интересах.

  • Во-первых, я знал, что большинство значений будет храниться в первом массиве $params[0], так как второй включает только номер экземпляра, поэтому я должен использовать этот массив.
  • Просто чтобы убедиться, что код не всегда выполняет ненужные действия, я добавил простое условие if для проверки, является ли это виджетом, который мне нужен.
  • Затем мне нужно было заменить значение в массиве, поэтому я использовал array_replace().
  • Наконец, зная одно из значений, которое я найду в значении before_widget, я использовал str_replace, чтобы изменить значение и добавить имя класса, которое я хочу.

Если есть лучший способ сделать это, пожалуйста, дайте мне знать или обновите меня в будущем. Надеюсь, это поможет.

19 дек. 2014 г. 21:36:39
Комментарии

Это блестящий подход!

KalenGi KalenGi
1 авг. 2018 г. 21:17:03
1

Вы можете добавить класс в before_widget примерно так:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
       'name' => 'Название вашего виджета',
       'description' => 'Описание вашего виджета',
       'before_widget' => '<div class="container-top">',
       'after_widget' => '</div>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
    ));

Думаю, это вам поможет

19 дек. 2014 г. 19:59:42
Комментарии

Я не добавляю его через функцию register_sidebar. Я хочу добавить класс к виджету поиска. Я использую раздел виджетов в админке с функцией перетаскивания.

yaserso yaserso
19 дек. 2014 г. 20:02:55
0

Эта функция добавляет поле для классов в каждый виджет:

function kc_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
        $instance['classes'] = null;   
        $row .= "Класс:\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' );

Источник

11 июн. 2019 г. 23:58:58
1

Существует плагин, который позволяет добавлять дополнительные CSS-классы и ID к виджету. Он называется Widget CSS Classes. Довольно удобный, взгляните: https://wordpress.org/plugins/widget-css-classes/

19 дек. 2014 г. 20:10:40
Комментарии

Я хотел бы избежать использования плагина, если это возможно.

yaserso yaserso
19 дек. 2014 г. 20:14:08