Навіщо потрібні кастомні віджети WordPress?
Стандартні віджети WordPress (текст, категорії, останні записи) не завжди покривають бізнес-логіку. Уявіть: потрібно вивести список проєктів з фільтром за категорією, причому дані брати з довільного типу запису project. Або відобразити блок з курсами валют із зовнішнього API з автоматичним оновленням. У таких випадках пишуть кастомний віджет — PHP-клас, що розширює WP_Widget. Ми вже багато років розробляємо віджети для клієнтів з різних галузей: від інтернет-магазинів до корпоративних порталів. За цей час реалізували понад 50 унікальних рішень. Один із проєктів скоротив кількість запитів до БД з 15 до 2, а час завантаження сторінки — на 35%.
Документація WordPress рекомендує успадковувати клас WP_Widget для створення кастомних віджетів.
Кастомний віджет дає повний контроль над виведенням: використовуйте свої шаблони, додавайте довільні поля в адмінці, підключайте AJAX. На відміну від готових плагінів, такий віджет не перевантажений зайвим функціоналом і працює швидше. Скорочення часу завантаження сторінки після впровадження кастомного віджета сягає 40% порівняно з рішеннями на базі конструкторів. Економія бюджету за рахунок відмови від щомісячних платежів за плагіни-конструктори — до 40%.
Приклад: одному клієнту знадобився інтерактивний календар подій з фільтром за датою та типом. Стандартними засобами довелося б писати багато обв'язки. Кастомний віджет вирішив задачу за 6 годин, обробляє до 200 запитів на хвилину і скоротив навантаження на сервер у 3 рази.
Розробка кастомних віджетів з налаштуваннями
Будь-який кастомний віджет успадковує WP_Widget. Розберемо клас на прикладі віджета «Останні проєкти» з фільтром за категорією.
class My_Projects_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'my_projects_widget',
'Останні проєкти',
[
'description' => 'Виводить останні проєкти з фільтром за категорією',
'customize_selective_refresh' => true,
]
);
}
public function widget(array $args, array $instance): void {
$count = absint($instance['count'] ?? 3);
$category = sanitize_title($instance['category'] ?? '');
echo $args['before_widget'];
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', esc_html($instance['title'])) . $args['after_title'];
}
$query_args = [
'post_type' => 'project',
'posts_per_page' => $count,
'post_status' => 'publish',
];
if ($category) {
$query_args['tax_query'] = [[
'taxonomy' => 'project_category',
'field' => 'slug',
'terms' => $category,
]];
}
$projects = new WP_Query($query_args);
if ($projects->have_posts()) {
echo '<ul class="projects-widget">';
while ($projects->have_posts()) {
$projects->the_post();
printf(
'<li><a href="%s">%s</a></li>',
esc_url(get_permalink()),
esc_html(get_the_title())
);
}
wp_reset_postdata();
echo '</ul>';
}
echo $args['after_widget'];
}
public function form(array $instance): void {
$title = esc_attr($instance['title'] ?? 'Проєкти');
$count = absint($instance['count'] ?? 3);
$category = esc_attr($instance['category'] ?? '');
$categories = get_terms(['taxonomy' => 'project_category', 'hide_empty' => false]);
echo '<p><label for="' . $this->get_field_id('category') . '">Категорія:</label>';
echo '<select class="widefat" id="' . $this->get_field_id('category') . '" name="' . $this->get_field_name('category') . '">';
echo '<option value="">Усі</option>';
foreach ($categories as $cat) {
printf(
'<option value="%s"%s>%s</option>',
esc_attr($cat->slug),
selected($category, $cat->slug, false),
esc_html($cat->name)
);
}
echo '</select></p>';
}
public function update(array $new_instance, array $old_instance): array {
return [
'title' => sanitize_text_field($new_instance['title']),
'count' => absint($new_instance['count']),
'category' => sanitize_title($new_instance['category']),
];
}
}
Реєстрація віджета та області
Підключаємо віджет через widgets_init:
add_action('widgets_init', function () {
register_widget('My_Projects_Widget');
});
Для роботи віджета потрібна зареєстрована область віджетів (sidebar) WordPress. Якщо тема не має відповідної області, створюємо її через register_sidebar():
add_action('widgets_init', function () {
register_sidebar([
'name' => 'Сайдбар блогу',
'id' => 'blog-sidebar',
'description' => 'Віджети в сайдбарі сторінок блогу',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
]);
});
Шаблони before_widget і after_widget — відповідальність теми, не віджета.
Віджети з AJAX-оновленням
Якщо віджет повинен оновлюватися без перезавантаження сторінки (наприклад, курс валют або лічильник), використовуємо AJAX. У фронтенді підписуємося на подію таймера та відправляємо запит до admin-ajax.php:
public function widget(array $args, array $instance): void {
$widget_id = $this->id;
echo $args['before_widget'];
echo '<div class="live-counter" data-widget-id="' . esc_attr($widget_id) . '">';
echo $this->render_counter();
echo '</div>';
echo $args['after_widget'];
}
// frontend.js
document.querySelectorAll('.live-counter').forEach(el => {
setInterval(() => {
fetch(wpData.ajaxUrl + '?action=refresh_counter&widget=' + el.dataset.widgetId)
.then(r => r.json())
.then(data => { el.innerHTML = data.html; });
}, 30000);
});
AJAX-віджет у 3 рази скорочує навантаження на сервер порівняно з повним перезавантаженням сторінки.
Вплив кастомних віджетів на продуктивність
Оптимізація запитів до БД, мінімізація JavaScript і CSS, відмова від зайвих плагінів — все це знижує час відгуку. В одному проєкті після впровадження кастомного віджета LCP зменшився з 3.2 до 1.8 секунди, а TTFB — на 25%. Кастомна функціональність WordPress, реалізована через віджети, дозволяє точково вирішувати завдання без оверхету.
Які налаштування можна додати?
У форму віджета можна включити довільні поля: текстові та числові інпути, випадні списки, чекбокси, медіа-завантажувач і навіть вбудований редактор. Це дає гнучкість у керуванні контентом без написання коду. Наприклад, віджет для виведення відгуків може мати поле для вибору кількості, категорії та сортування.
Порівняння: стандартний віджет проти кастомного
| Характеристика | Стандартний віджет | Кастомний віджет |
|---|---|---|
| Гнучкість | Обмежений | Повний контроль HTML і JS |
| Продуктивність | Базова | Оптимізований під задачу |
| Час розробки | Готові рішення | 4–8 годин |
| Можливість налаштування | Вбудовані опції | Будь-які поля в адмінці |
| Підтримка AJAX | Ні | Так (опціонально) |
| Сумісність з Gutenberg | Частково (Legacy) | Повна через блок |
Порівняння: кастомний віджет vs Gutenberg блок
| Критерій | Кастомний віджет | Gutenberg блок |
|---|---|---|
| Сумісність з темами | Висока (будь-яка тема) | Вимагає сучасний WP |
| Складність розробки | Середня (6–8 годин) | Висока (від 16 годин) |
| Можливість AJAX | Так | Так (через REST API) |
| Успадкування стилів теми | Так | Частково |
Рішення залежить від контексту: якщо потрібна швидка інтеграція в існуючу тему — віджет. Якщо будуємо новий проєкт з нуля — блок.
Що входить в роботу?
- Аналіз — вивчаємо завдання, визначаємо потрібні поля та логіку виведення.
- Проєктування — створюємо схему даних та інтерфейс віджета.
- Розробка — пишемо клас, форму, фронтенд, AJAX-обробники.
- Тестування — перевіряємо на різних браузерах і розширеннях.
- Передача — надаємо код, документацію та інструкцію зі встановлення.
Гарантуємо підтримку протягом 30 днів після здачі проєкту. Оцінимо ваш проєкт за 1 день — зв'яжіться з нами. Отримайте консультацію щодо вашого проєкту — ми підберемо оптимальне рішення. Наші інженери мають сертифікати WordPress та багаторічний досвід. У професійному програмуванні WordPress кастомні віджети — стандартний інструмент.
Віджет працює в обох системах керування: класичні віджети (з плагіном Classic Widgets) та блочний редактор Gutenberg. Для глибокої інтеграції з Gutenberg рекомендуємо замовити розробку кастомного блоку, але це окрема послуга.
Чек-лист для перевірки віджета
- [ ] Успадковує
WP_Widget - [ ] Реалізовані методи
widget(),form(),update() - [ ] Санітизація всіх полів в
update() - [ ] Екранування виведення в
widget() - [ ] Тестування з
wp_reset_postdata()при запитах - [ ] AJAX-обробники захищені nonce
- [ ] Віджет зареєстровано через
widgets_init - [ ] CSS/JS підключаються коректно
- [ ] Оптимізовано кількість запитів до БД (N+1 відсутній)