Как добавить CSS классы к виджетам с помощью functions.php?
Мне нужно добавить класс к виджету поиска WordPress. Как это можно сделать? Я добавляю его через админку, перетаскивая в сайдбар на странице виджетов в админ-разделе. Я не вызываю его с помощью get_search_form. Я хочу сделать это с помощью файла functions.php, без использования jQuery или добавления CSS свойств.
Хорошо, мне удалось это реализовать благодаря @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
, чтобы изменить значение и добавить имя класса, которое я хочу.
Если есть лучший способ сделать это, пожалуйста, дайте мне знать или обновите меня в будущем. Надеюсь, это поможет.

Вы можете добавить класс в 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>',
));
Думаю, это вам поможет

Эта функция добавляет поле для классов в каждый виджет:
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' );

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