Кастомні віджети WordPress: розробка під нестандартні завдання

Навіщо потрібні кастомні віджети 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, реалізована через віджети, дозволяє точково вирішувати завдання без оверхету.

Які налаштування можна додати?

У форму віджета можна включити довільні поля: текстові та числові інпути, випадні списки, чекбокси, медіа-завантажувач і навіть вбудований редактор. Це дає гнучкість у керуванні контентом без написання коду. Наприклад, віджет для виведення відгуків може мати поле для вибору кількості, категорії та сортування.

Порівняння: стандартний віджет проти кастомного

Порівняння: кастомний віджет vs Gutenberg блок

Рішення залежить від контексту: якщо потрібна швидка інтеграція в існуючу тему — віджет. Якщо будуємо новий проєкт з нуля — блок.

Що входить в роботу?

1. Аналіз — вивчаємо завдання, визначаємо потрібні поля та логіку виведення.
2. Проєктування — створюємо схему даних та інтерфейс віджета.
3. Розробка — пишемо клас, форму, фронтенд, AJAX-обробники.
4. Тестування — перевіряємо на різних браузерах і розширеннях.
5. Передача — надаємо код, документацію та інструкцію зі встановлення.

Гарантуємо підтримку протягом 30 днів після здачі проєкту. Оцінимо ваш проєкт за 1 день — зв'яжіться з нами. Отримайте консультацію щодо вашого проєкту — ми підберемо оптимальне рішення. Наші інженери мають сертифікати WordPress та багаторічний досвід. У професійному програмуванні WordPress кастомні віджети — стандартний інструмент.

Віджет працює в обох системах керування: класичні віджети (з плагіном Classic Widgets) та блочний редактор Gutenberg. Для глибокої інтеграції з Gutenberg рекомендуємо замовити розробку кастомного блоку, але це окрема послуга.