Хук dynamic_sidebar_params
позволяет изменять параметры виджетов перед их выводом на страницу. Этот фильтр полезен, когда требуется настроить HTML-обертки или стили отдельных виджетов в зависимости от их расположения, типа, порядка или других условий.
Фильтр dynamic_sidebar_params
применяется к массиву параметров, которые используются для отображения виджета. Он может изменять атрибуты контейнеров виджетов, такие как class
, id
, HTML-обертки вокруг виджетов и заголовков, а также добавлять другие данные в виджет.
apply_filters( 'dynamic_sidebar_params', array $params )
$params
(array) — Массив параметров виджета.
Основные параметры $params
name
(string) — Название сайдбара, которому назначен виджет.id
(string) — ID сайдбара.class
(string) — Класс контейнера сайдбара.before_widget
(string) — HTML-код перед каждым виджетом.after_widget
(string) — HTML-код после каждого виджета.before_title
(string) — HTML-код перед заголовком виджета.after_title
(string) — HTML-код после заголовка виджета.widget_id
(string) — ID виджета.widget_name
(string) — Название виджета.
Пример #1: Изменение CSS-класса для виджета на основе его названия
С помощью этого примера можно изменить класс HTML-обертки для виджета, подставив его название вместо стандартного класса.
add_filter( 'dynamic_sidebar_params', 'change_widget_class_based_on_name' );
function change_widget_class_based_on_name( $params ) {
$widget_name_class = strtolower( str_replace( ' ', '-', $params[0]['widget_name'] ) );
$params[0]['before_widget'] = str_replace( 'class="', 'class="' . $widget_name_class . ' ', $params[0]['before_widget'] );
return $params;
}
Этот код добавляет к классу контейнера виджета его название в виде класса (например, widget_text
для виджета типа «Текст»).
Пример #2: Добавление иконки перед заголовком конкретного виджета
Допустим, нужно добавить иконку перед заголовком виджета с ID special-widget
.
add_filter( 'dynamic_sidebar_params', 'add_icon_to_special_widget' );
function add_icon_to_special_widget( $params ) {
if ( 'special-widget' === $params[0]['widget_id'] ) {
$params[0]['before_title'] .= '<img src="' . get_stylesheet_directory_uri() . '/images/icon.png" alt="icon" class="widget-icon">';
}
return $params;
}
Этот код добавляет изображение перед заголовком для виджета с ID special-widget
, что позволяет легко настроить внешний вид этого конкретного виджета.
Пример #3: Изменение стилей контейнера для четных виджетов в сайдбаре
Для сайдбара с ID main-sidebar
можно задать другой класс для четных виджетов, чтобы стилизовать их по-другому.
add_filter( 'dynamic_sidebar_params', 'style_even_widgets_in_sidebar' );
function style_even_widgets_in_sidebar( $params ) {
global $widget_counter;
if ( ! isset( $widget_counter ) ) {
$widget_counter = 1;
}
if ( 'main-sidebar' === $params[0]['id'] ) {
if ( $widget_counter % 2 === 0 ) {
$params[0]['before_widget'] = str_replace( 'class="', 'class="widget-even ', $params[0]['before_widget'] );
}
$widget_counter++;
}
return $params;
}
В этом примере для каждого четного виджета в main-sidebar
добавляется класс widget-even
, что позволяет изменять его стили.
Пример #4: Добавление пользовательского класса на основе пользовательского поля виджета
Допустим, у каждого виджета есть пользовательское поле column_class
, и мы хотим использовать его значение для добавления класса контейнеру виджета.
- Сначала добавим поле в форму виджета:
<?php
add_action( 'in_widget_form', 'add_column_class_field', 10, 3 );
function add_column_class_field( $widget, $return, $instance ) {
$column_class = ! empty( $instance['column_class'] ) ? $instance['column_class'] : '';
?>
<p>
<label for="<?php echo esc_attr( $widget->get_field_id( 'column_class' ) ); ?>">
<?php _e( 'Column Class:', 'text_domain' ); ?>
<input type="text" name="<?php echo esc_attr( $widget->get_field_name( 'column_class' ) ); ?>" value="<?php echo esc_attr( $column_class ); ?>" class="widefat" />
</label>
</p>
<?php
}
- Затем сохраняем значение поля:
add_filter( 'widget_update_callback', 'save_column_class_field', 10, 2 );
function save_column_class_field( $instance, $new_instance ) {
$instance['column_class'] = ! empty( $new_instance['column_class'] ) ? sanitize_text_field( $new_instance['column_class'] ) : '';
return $instance;
}
- И, наконец, применим значение поля для добавления класса контейнеру:
add_filter( 'dynamic_sidebar_params', 'apply_column_class' );
function apply_column_class( $params ) {
global $wp_registered_widgets;
$widget_id = $params[0]['widget_id'];
$widget_obj = $wp_registered_widgets[$widget_id];
$widget_options = get_option( $widget_obj['callback'][0]->option_name );
$widget_num = $widget_obj['params'][0]['number'];
$column_class = ! empty( $widget_options[$widget_num]['column_class'] ) ? $widget_options[$widget_num]['column_class'] : '';
if ( $column_class ) {
$params[0]['before_widget'] = str_replace( 'class="', 'class="' . $column_class . ' ', $params[0]['before_widget'] );
}
return $params;
}
Этот пример позволяет указать класс для обертки виджета, используя значение поля column_class
, заданного в настройках виджета.
Пример #5: Изменение обертки для виджетов на страницах определенного типа
С помощью этого примера можно изменить HTML-обертку виджетов, если пользователь просматривает страницу типа portfolio
.
add_filter( 'dynamic_sidebar_params', 'custom_widget_wrap_for_portfolio' );
function custom_widget_wrap_for_portfolio( $params ) {
if ( is_singular( 'portfolio' ) ) {
$params[0]['before_widget'] = '<div class="portfolio-widget-wrap">';
$params[0]['after_widget'] = '</div>';
}
return $params;
}
Этот код меняет стандартные обертки виджетов на <div class="portfolio-widget-wrap">...</div>
для страниц типа portfolio
.
Заключение
Фильтр dynamic_sidebar_params
является мощным инструментом, позволяющим изменять HTML-обертки и стили виджетов WordPress. С его помощью можно гибко управлять отображением виджетов, подстраивая их внешний вид под определенные условия и страницы.