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

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

Почему стоит создавать собственную настройку для оптимизации изображений

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

Таким образом, администратор сайта сможет легко настраивать компромисс между качеством и скоростью загрузки без необходимости править код плагина.

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

Создание страницы настроек в админке WordPress

Начнём с добавления страницы настроек в меню админки. Для этого используем хук admin_menu и функцию add_options_page. В плагине создайте функцию, например, wpmagazin_add_image_opt_page:

function wpmagazin_add_image_opt_page() {
    add_options_page(
        'Настройки оптимизации изображений',
        'Оптимизация изображений',
        'manage_options',
        'wpmagazin-image-opt',
        'wpmagazin_render_image_opt_page'
    );
}
add_action('admin_menu', 'wpmagazin_add_image_opt_page');

Здесь мы создаём страницу в разделе «Настройки» с названием и ключом меню. Теперь нужно реализовать функцию wpmagazin_render_image_opt_page, которая выведет форму настройки.

Вывод формы настроек

Для удобства используем API настроек WordPress — settings_fields и do_settings_sections. Зарегистрируем настройку и поля:

function wpmagazin_register_image_opt_settings() {
    register_setting('wpmagazin_image_opt_group', 'wpmagazin_image_quality', [
        'type' => 'integer',
        'default' => 82,
        'sanitize_callback' => 'absint'
    ]);

    add_settings_section('wpmagazin_image_opt_section', 'Основные параметры', null, 'wpmagazin-image-opt');

    add_settings_field('wpmagazin_image_quality', 'Качество JPEG (1-100)', 'wpmagazin_image_quality_field_html', 'wpmagazin-image-opt', 'wpmagazin_image_opt_section');
}
add_action('admin_init', 'wpmagazin_register_image_opt_settings');

function wpmagazin_image_quality_field_html() {
    $value = get_option('wpmagazin_image_quality', 82);
    echo "<input type='number' name='wpmagazin_image_quality' min='1' max='100' value='" . esc_attr($value) . "' />";
}

function wpmagazin_render_image_opt_page() {
    ?>
    <div class="wrap">
        <h1>Настройки оптимизации изображений</h1>
        <form action="options.php" method="post">
            <?php
            settings_fields('wpmagazin_image_opt_group');
            do_settings_sections('wpmagazin-image-opt');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

Теперь в админке появится страница с полем для ввода качества JPEG.

Применение настроек оптимизации при загрузке изображений

Чтобы применить выбранное качество при сохранении изображений, нужно использовать фильтр wp_editor_set_quality. Добавим функцию, которая будет возвращать значение из настроек:

function wpmagazin_filter_jpeg_quality($quality, $mime_type) {
    if ($mime_type === 'image/jpeg') {
        $opt_quality = get_option('wpmagazin_image_quality', 82);
        return absint($opt_quality);
    }
    return $quality;
}
add_filter('wp_editor_set_quality', 'wpmagazin_filter_jpeg_quality', 10, 2);

Теперь, когда WordPress обрабатывает JPEG изображения, он будет использовать качество, указанное в настройках плагина.

Расширение: добавление выбора формата WebP

Многие современные сайты используют WebP для ещё лучшей оптимизации. Добавим в настройки чекбокс для включения конвертации в WebP.

function wpmagazin_register_image_opt_settings() {
    register_setting('wpmagazin_image_opt_group', 'wpmagazin_image_quality', [
        'type' => 'integer',
        'default' => 82,
        'sanitize_callback' => 'absint'
    ]);
    register_setting('wpmagazin_image_opt_group', 'wpmagazin_enable_webp', [
        'type' => 'boolean',
        'default' => false,
        'sanitize_callback' => 'wpmagazin_sanitize_checkbox'
    ]);

    add_settings_section('wpmagazin_image_opt_section', 'Основные параметры', null, 'wpmagazin-image-opt');

    add_settings_field('wpmagazin_image_quality', 'Качество JPEG (1-100)', 'wpmagazin_image_quality_field_html', 'wpmagazin-image-opt', 'wpmagazin_image_opt_section');
    add_settings_field('wpmagazin_enable_webp', 'Включить конвертацию в WebP', 'wpmagazin_enable_webp_field_html', 'wpmagazin-image-opt', 'wpmagazin_image_opt_section');
}

function wpmagazin_sanitize_checkbox($value) {
    return ($value === '1' || $value === 1 || $value === true) ? true : false;
}

function wpmagazin_enable_webp_field_html() {
    $checked = get_option('wpmagazin_enable_webp', false) ? 'checked' : '';
    echo "<input type='checkbox' name='wpmagazin_enable_webp' value='1' $checked />";
}

Чтобы реализовать конвертацию в WebP, можно использовать библиотеку Clearfy Pro или написать собственный код с помощью PHP функции imagewebp(). Ниже пример простого конвертера:

function wpmagazin_convert_to_webp($file_path) {
    $info = getimagesize($file_path);
    if (!$info) return false;

    $mime = $info['mime'];
    switch ($mime) {
        case 'image/jpeg':
            $image = imagecreatefromjpeg($file_path);
            break;
        case 'image/png':
            $image = imagecreatefrompng($file_path);
            break;
        default:
            return false;
    }

    if (!$image) return false;

    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
    $quality = get_option('wpmagazin_image_quality', 82);
    $result = imagewebp($image, $webp_path, $quality);
    imagedestroy($image);
    return $result ? $webp_path : false;
}

Для автоматизации конвертации можно повесить эту функцию на хук wp_generate_attachment_metadata:

function wpmagazin_convert_attachment_to_webp($metadata, $attachment_id) {
    if (!get_option('wpmagazin_enable_webp', false)) return $metadata;

    $file = get_attached_file($attachment_id);
    if (!$file) return $metadata;

    $webp_file = wpmagazin_convert_to_webp($file);
    if ($webp_file) {
        // Можно добавить информацию о WebP в метаданные
        $metadata['webp'] = basename($webp_file);
    }

    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpmagazin_convert_attachment_to_webp', 10, 2);

Тестирование и отладка

После добавления настроек и функций обязательно протестируйте:

• Сохраняется ли значение качества и чекбокса в базе данных.
• Применяется ли качество сжатия к новым загружаемым изображениям.
• Создаётся ли WebP-файл при включенной опции.
• Проверяйте логи PHP на наличие ошибок при обработке изображений.

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

Выводы и рекомендации

Создание собственного интерфейса настроек оптимизации изображений в плагине WordPress — задача вполне решаемая с помощью встроенного Settings API. Это даёт гибкость и удобство пользователям, а также позволяет тонко настраивать производительность сайта.

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