В WordPress виджеты — это удобный способ добавить функциональность и контент в боковые панели и другие области сайта. В этой статье мы рассмотрим, как создать собственный динамический виджет, который будет выводить данные из базы и обновляться в зависимости от условий. Это полезно, когда стандартные виджеты не подходят, а готовые решения не дают нужной гибкости.
Что такое динамический виджет и зачем он нужен
Динамический виджет — это виджет, который генерирует контент на лету, в зависимости от текущей страницы, пользовательских данных, настроек или внешних источников. Например, это может быть виджет с последними комментариями по определённой категории, или с персональными рекомендациями для пользователя.
В отличие от статических виджетов, где вы просто вводите текст или выбираете опции, динамический виджет программируется и позволяет гибко управлять выводом.
Создание такого виджета — отличная практика для разработчиков, которые хотят расширить функциональность сайта и сделать его более интерактивным и полезным для посетителей.
Регистрация виджета в WordPress
Для начала создадим класс, который наследуется от WP_Widget. В нем определим основные методы: конструктор, вывод виджета, форму настроек и сохранение настроек.
Пример простого шаблона виджета:
class Wpupdate_Dynamic_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'wpupdate_dynamic_widget',
__('Wpupdate Динамический Виджет', 'wpupdate'),
[ 'description' => __( 'Пример динамического виджета', 'wpupdate' ) ]
);
}
public function widget( $args, $instance ) {
echo $args['before_widget'];
$title = apply_filters( 'widget_title', $instance['title'] ?? '');
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
echo '<p>Здесь будет динамический контент.</p>';
echo $args['after_widget'];
}
public function form( $instance ) {
$title = $instance['title'] ?? '';
?>
<p>
<label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Заголовок:'); ?></label>
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = [];
$instance['title'] = sanitize_text_field($new_instance['title']);
return $instance;
}
}
function wpupdate_register_dynamic_widget() {
register_widget('Wpupdate_Dynamic_Widget');
}
add_action('widgets_init', 'wpupdate_register_dynamic_widget');Этот код нужно добавить в файл functions.php вашей темы или в отдельный плагин.
Добавление динамического контента в виджет
Теперь заменим заглушку «Здесь будет динамический контент» на реальный пример. Допустим, мы хотим вывести последние 5 опубликованных постов из категории, выбранной в настройках виджета.
Расширение формы настроек для выбора категории
Добавим выпадающий список с категориями в метод form:
public function form( $instance ) {
$title = $instance['title'] ?? '';
$cat_id = $instance['cat_id'] ?? 0;
$categories = get_categories(['hide_empty' => false]);
?>
<p>
<label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Заголовок:'); ?></label>
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<p>
<label for="<?php echo esc_attr($this->get_field_id('cat_id')); ?>"><?php _e('Категория:'); ?></label>
<select id="<?php echo esc_attr($this->get_field_id('cat_id')); ?>" name="<?php echo esc_attr($this->get_field_name('cat_id')); ?>">
<option value="0"><?php _e('Все категории'); ?></option>
<?php foreach($categories as $category): ?>
<option value="<?php echo $category->term_id; ?>" <?php selected($cat_id, $category->term_id); ?>><?php echo esc_html($category->name); ?></option>
<?php endforeach; ?>
</select>
</p>
<?php
}Сохранение выбранной категории
public function update( $new_instance, $old_instance ) {
$instance = [];
$instance['title'] = sanitize_text_field($new_instance['title']);
$instance['cat_id'] = absint($new_instance['cat_id']);
return $instance;
}Вывод последних постов из выбранной категории
В методе widget добавим запрос WP_Query для получения постов:
public function widget( $args, $instance ) {
echo $args['before_widget'];
$title = apply_filters( 'widget_title', $instance['title'] ?? '');
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
$cat_id = $instance['cat_id'] ?? 0;
$query_args = [
'post_type' => 'post',
'posts_per_page' => 5,
'ignore_sticky_posts' => true,
];
if ($cat_id) {
$query_args['cat'] = $cat_id;
}
$query = new WP_Query($query_args);
if ($query->have_posts()) {
echo '<ul>';
while ($query->have_posts()) {
$query->the_post();
echo '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
}
echo '</ul>';
wp_reset_postdata();
} else {
echo '<p>Нет записей для отображения.</p>';
}
echo $args['after_widget'];
}Пользовательские стили и оптимизация виджета
Для улучшения внешнего вида виджета можно добавить CSS-стили. Лучше подключать стили через функцию wp_enqueue_scripts с условием, что стили загружаются только на страницах, где виджет отображается.
Например, можно добавить следующий код в functions.php:
function wpupdate_dynamic_widget_styles() {
if ( is_active_widget( false, false, 'wpupdate_dynamic_widget', true ) ) {
wp_enqueue_style( 'wpupdate-dynamic-widget-style', get_template_directory_uri() . '/css/wpupdate-dynamic-widget.css', [], '1.0' );
}
}
add_action( 'wp_enqueue_scripts', 'wpupdate_dynamic_widget_styles' );В файле wpupdate-dynamic-widget.css можно прописать стили для ul, li и других элементов виджета для улучшения читаемости и дизайна.
Использование плагина Expert Review для дополнения виджета
Если на сайте установлен плагин Expert Review, можно интегрировать его функционал в виджет. Например, отображать рейтинги из отзывов для последних постов.
Для этого внутри цикла WP_Query добавьте проверку и вывод рейтинга:
if ( function_exists('expert_review_get_rating') ) {
$rating = expert_review_get_rating(get_the_ID());
if ($rating) {
echo '<span class="wpupdate-rating">Рейтинг: ' . esc_html($rating) . '/5</span>';
}
}Это позволит сделать виджет более информативным и полезным для посетителей.
Вывод динамического виджета по условию (например, только на главной)
Часто требуется показывать виджет только на определённых страницах. Для этого можно добавить проверку в метод widget:
public function widget( $args, $instance ) {
if ( !is_front_page() ) {
return; // Не показывать виджет, если не главная страница
}
// остальной код вывода...
}Это простое условие поможет управлять контентом и не перегружать страницы ненужными элементами.
Итоговые рекомендации и советы
- Всегда используйте функции WordPress для безопасности —
esc_html,sanitize_text_fieldи другие. - Тестируйте виджет с разными настройками и на разных темах.
- Документируйте код, чтобы было понятно, как работает виджет.
- Если виджет становится сложным, рассмотрите создание отдельного плагина для удобства поддержки и обновления.
Создание динамического виджета — отличный способ повысить функциональность сайта и дать пользователям именно тот контент, который им нужен. С помощью приведённого кода и рекомендаций вы сможете адаптировать виджет под свои задачи и легко расширять его возможности.