Как создать уникальный виджет для вывода последних постов в WordPress с фильтрацией по категориям

В стандартном наборе WordPress есть виджет «Последние записи», но он довольно ограничен по функционалу. Часто возникает задача – создать уникальный виджет, который позволит выводить последние посты с дополнительными настройками, например, фильтрацией по конкретным категориям, выводом миниатюр и кастомными стилями. В этой статье мы подробно разберём, как написать такой виджет с нуля, используя объектно-ориентированный подход и лучшие практики разработки для WordPress.

Почему стоит создавать собственный виджет для последних постов

Стандартный виджет выводит последние записи без возможности тонкой настройки. Например, нельзя выбрать, из каких категорий показывать записи, как отображать миниатюры, сколько записей показывать, и не поддерживается кастомизация вывода через шаблоны. Это ограничивает дизайн и функционал сайта.

Создание своего виджета даёт полный контроль над выводом, позволяет улучшить UX и визуальное восприятие, а также расширить возможности для клиентов или пользователей сайта.

Кроме того, собственный виджет можно адаптировать под любые задачи и интегрировать с другими плагинами, например, для SEO, кэширования или визуального редактора.

Создаём базовую структуру виджета в WordPress

Для начала создадим класс виджета, который наследуется от WP_Widget. В конструкторе зададим имя и описание виджета, а также объявим поля для настроек.

class WpTeam_LastPosts_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpteam_lastposts', // ID виджета
            'WP-Team: Последние записи с фильтром', // Название
            ['description' => 'Выводит последние записи с возможностью фильтрации по категориям']
        );
    }

    public function widget($args, $instance) {
        // Вывод виджета на фронтенде
    }

    public function form($instance) {
        // Форма настроек в админке
    }

    public function update($new_instance, $old_instance) {
        // Обработка сохранения настроек
    }
}

Зарегистрируем виджет с помощью хука widgets_init в основном файле плагина или functions.php темы:

function wpteam_register_lastposts_widget() {
    register_widget('WpTeam_LastPosts_Widget');
}
add_action('widgets_init', 'wpteam_register_lastposts_widget');

Добавляем настройки виджета: количество постов и выбор категории

Чтобы пользователь мог выбрать, сколько записей показывать и из какой категории, добавим в метод form соответствующие поля. Значения сохраняются через метод update.

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : 'Последние записи';
    $number = !empty($instance['number']) ? absint($instance['number']) : 5;
    $category = !empty($instance['category']) ? absint($instance['category']) : 0;
    $categories = get_categories(['hide_empty' => false]);
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('number'); ?>">Количество записей:</label>
        <input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="number" value="<?php echo esc_attr($number); ?>" min="1" max="20" style="width: 60px;">
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('category'); ?>">Категория (0 - все):</label>
        <select id="<?php echo $this->get_field_id('category'); ?>" name="<?php echo $this->get_field_name('category'); ?>">
            <option value="0" <?php selected($category, 0); ?>>Все категории</option>
            <?php foreach ($categories as $cat): ?>
                <option value="<?php echo $cat->term_id; ?>" <?php selected($category, $cat->term_id); ?>><?php echo esc_html($cat->name); ?></option>
            <?php endforeach; ?>
        </select>
    </p>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['title'] = sanitize_text_field($new_instance['title']);
    $instance['number'] = absint($new_instance['number']);
    $instance['category'] = absint($new_instance['category']);
    return $instance;
}

Выводим последние записи с миниатюрами и ссылками

В методе widget запросаем посты с помощью WP_Query, учитывая выбранную категорию и количество. Добавим вывод миниатюры (если она есть) и ссылки на пост.

public function widget($args, $instance) {
    echo $args['before_widget'];

    $title = apply_filters('widget_title', $instance['title']);
    if ($title) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

    $number = !empty($instance['number']) ? $instance['number'] : 5;
    $category = !empty($instance['category']) ? $instance['category'] : 0;

    $query_args = [
        'post_type' => 'post',
        'posts_per_page' => $number,
        'ignore_sticky_posts' => true
    ];

    if ($category) {
        $query_args['cat'] = $category;
    }

    $query = new WP_Query($query_args);

    if ($query->have_posts()) {
        echo '<ul class="wpteam-lastposts-list">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li>';
            if (has_post_thumbnail()) {
                $thumb = get_the_post_thumbnail(get_the_ID(), 'thumbnail', ['style' => 'float:left; margin-right:10px;']);
                echo '<a href="' . get_permalink() . '">' . $thumb . '</a>';
            }
            echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            echo '</li>';
        }
        echo '</ul>';
        wp_reset_postdata();
    } else {
        echo '<p>Записи не найдены.</p>';
    }

    echo $args['after_widget'];
}

Добавляем стили и улучшения для визуального отображения

Чтобы виджет выглядел аккуратно, можно добавить стили в файл темы или плагина. Например:

.wpteam-lastposts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wpteam-lastposts-list li {
    margin-bottom: 15px;
    overflow: hidden;
}
.wpteam-lastposts-list li a {
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.wpteam-lastposts-list li img {
    border-radius: 4px;
}

Такой простой стиль обеспечит читаемость и приятный внешний вид. Также можно расширить функционал виджета, добавив настройку вывода даты, автора или отрывка записи.

Используем плагин Clearfy Pro для оптимизации и безопасности виджета

Если вы хотите дополнительно обезопасить и оптимизировать работу виджета, можно использовать Clearfy Pro. Этот плагин помогает отключать ненужные скрипты, улучшать безопасность и оптимизировать базу данных, что положительно скажется на скорости загрузки страницы с вашим виджетом.

Заключение: преимущества кастомного виджета

Создание собственного виджета для вывода последних записей в WordPress — отличный способ добавить функциональность, которой нет в стандартных решениях. Вы получаете гибкость в настройках, возможность кастомизации вывода и интеграции с другими инструментами.

В статье показан базовый пример, который можно расширять, добавляя новые параметры и улучшая дизайн. Такой подход позволит эффективно решать конкретные задачи и создавать уникальные решения для сайта.