Как создать собственный виджет с иконками в WordPress

Что такое виджеты в WordPress и почему важны иконки

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

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

В этой статье мы разберём, как создать собственный виджет с иконками на примере интеграции с библиотекой Font Awesome и использованием SVG-иконок. Вы получите полный пример, который сможете адаптировать под свои задачи.

Создание базового виджета в WordPress: структура и регистрация

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

class Wpicons_Widget_Icon extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpicons_widget_icon',
            'WPIcons: Виджет с иконкой',
            ['description' => 'Виджет для вывода текста с иконкой']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title']);
        $icon = isset($instance['icon']) ? $instance['icon'] : '';
        if ($title) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        echo '<div class="wpicons-widget-content">';
        if ($icon) {
            echo '<i class="' . esc_attr($icon) . ' wpicons-icon"></i> ';
        }
        echo esc_html($instance['content']);
        echo '</div>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = isset($instance['title']) ? $instance['title'] : '';
        $icon = isset($instance['icon']) ? $instance['icon'] : '';
        $content = isset($instance['content']) ? $instance['content'] : '';
        ?>
        <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('icon'); ?>">Класс иконки Font Awesome:</label>
        <input class="widefat" id="<?php echo $this->get_field_id('icon'); ?>" name="<?php echo $this->get_field_name('icon'); ?>" type="text" value="<?php echo esc_attr($icon); ?>" /></p>

        <p><label for="<?php echo $this->get_field_id('content'); ?>">Текст:</label>
        <textarea class="widefat" rows="4" id="<?php echo $this->get_field_id('content'); ?>" name="<?php echo $this->get_field_name('content'); ?>"><?php echo esc_textarea($content); ?></textarea></p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['title'] = sanitize_text_field($new_instance['title']);
        $instance['icon'] = sanitize_text_field($new_instance['icon']);
        $instance['content'] = sanitize_textarea_field($new_instance['content']);
        return $instance;
    }
}

function wpicons_register_widget() {
    register_widget('Wpicons_Widget_Icon');
}
add_action('widgets_init', 'wpicons_register_widget');

Этот базовый виджет позволяет задать заголовок, класс иконки из Font Awesome (например, fas fa-star) и произвольный текст. В результате на сайте появится виджет с иконкой и текстом, который легко настроить через админку.

Подключение иконок Font Awesome и стилизация виджета

Чтобы иконки отображались корректно, нужно подключить библиотеку Font Awesome. Для этого добавим подключение в файл functions.php вашей темы или в плагин:

function wpicons_enqueue_fontawesome() {
    wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome');

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

function wpicons_widget_styles() {
    echo '<style>
    .wpicons-widget-content { display: flex; align-items: center; }
    .wpicons-icon { font-size: 24px; margin-right: 10px; color: #0073aa; }
    </style>';
}
add_action('wp_head', 'wpicons_widget_styles');

Такой подход прост и не требует создания файлов стилей. Для более масштабных проектов рекомендуется подключать CSS отдельно.

Добавление поддержки SVG-иконок в виджет

Font Awesome — отличный вариант, но иногда хочется использовать собственные SVG-иконки. Давайте расширим виджет, чтобы он поддерживал загрузку SVG-файлов через URL.

В форме виджета добавим поле для URL SVG и изменим вывод:

public function form($instance) {
    $svg_url = isset($instance['svg_url']) ? $instance['svg_url'] : '';
    // ... существующие поля
    ?>
    <p><label for="<?php echo $this->get_field_id('svg_url'); ?>">URL SVG-иконки:</label>
    <input class="widefat" id="<?php echo $this->get_field_id('svg_url'); ?>" name="<?php echo $this->get_field_name('svg_url'); ?>" type="text" value="<?php echo esc_attr($svg_url); ?>" /></p>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = parent::update($new_instance, $old_instance);
    $instance['svg_url'] = esc_url_raw($new_instance['svg_url']);
    return $instance;
}

public function widget($args, $instance) {
    echo $args['before_widget'];
    $title = apply_filters('widget_title', $instance['title']);
    $icon = $instance['icon'] ?? '';
    $svg_url = $instance['svg_url'] ?? '';
    if ($title) {
        echo $args['before_title'] . $title . $args['after_title'];
    }
    echo '<div class="wpicons-widget-content">';
    if ($svg_url) {
        echo '<img src="' . esc_url($svg_url) . '" alt="icon" class="wpicons-svg-icon" style="width:24px;height:24px;margin-right:10px;vertical-align:middle;"/> ';
    } elseif ($icon) {
        echo '<i class="' . esc_attr($icon) . ' wpicons-icon"></i> ';
    }
    echo esc_html($instance['content']);
    echo '</div>';
    echo $args['after_widget'];
}

Таким образом, если указан URL SVG, будет показана SVG-иконка, иначе — Font Awesome. Это удобно для гибкой настройки.

Советы по безопасности и производительности

При работе с кастомными виджетами и иконками важно учитывать безопасность. Всегда используйте функции WordPress для санитизации и экранирования данных, как esc_html, esc_url, sanitize_text_field.

Не загружайте SVG из непроверенных источников — они могут содержать вредоносный код. Лучше хранить иконки в библиотеке медиа WordPress и использовать внутренние URL.

Для производительности подключайте только необходимые стили и скрипты, избегайте избыточных подключений. В нашем примере мы подключаем Font Awesome из CDN, что хорошо в большинстве случаев.

Расширение функционала: добавление нескольких иконок и кастомных стилей

Если нужно вывести несколько иконок или более сложный контент, можно расширить виджет, добавив повторяющиеся поля через WP_Widget или создать отдельный пользовательский тип данных.

Например, добавим возможность выбирать цвет иконки:

public function form($instance) {
    $icon_color = $instance['icon_color'] ?? '#0073aa';
    ?>
    <p><label for="<?php echo $this->get_field_id('icon_color'); ?>">Цвет иконки:</label>
    <input type="color" id="<?php echo $this->get_field_id('icon_color'); ?>" name="<?php echo $this->get_field_name('icon_color'); ?>" value="<?php echo esc_attr($icon_color); ?>" /></p>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = parent::update($new_instance, $old_instance);
    $instance['icon_color'] = sanitize_hex_color($new_instance['icon_color']);
    return $instance;
}

public function widget($args, $instance) {
    $icon_color = $instance['icon_color'] ?? '#0073aa';
    // ...
    if ($icon) {
        echo '<i class="' . esc_attr($icon) . ' wpicons-icon" style="color:' . esc_attr($icon_color) . ';"></i> ';
    }
    // ...
}

Такой простой параметр позволяет кастомизировать виджет без правки кода.

Вывод

Создание собственного виджета с иконками — отличная практика, которая позволяет создавать уникальные элементы интерфейса под задачи проекта. Используя примеры из статьи, вы сможете быстро реализовать адаптивный, удобный и красивый виджет с поддержкой Font Awesome и SVG-иконок.