В современных темах WordPress все чаще требуется выводить не просто статичные изображения, а динамические, которые меняются в зависимости от условий, контента или пользовательских настроек. Особенно это актуально при работе с редактором Gutenberg, где блоки должны быть гибкими и интерактивными.
Что такое динамические изображения и зачем они нужны в теме WordPress
Динамические изображения — это изображения, которые загружаются или меняются программно, без необходимости ручной замены файлов. Например, в зависимости от категории записи, времени суток, или пользовательских меток можно показывать разные картинки.
Основные задачи динамических изображений:
- Персонализация контента для посетителей;
- Улучшение визуальной привлекательности;
- Экономия времени на ручное редактирование;
- Повышение интерактивности и UX.
Реализовать динамические изображения в теме можно с помощью PHP-кода, JavaScript и возможностей Gutenberg — блока "Изображение" с кастомными настройками.
Как добавить динамические изображения в тему WordPress: базовый пример
Для начала создадим функцию, которая будет выводить изображение в зависимости от категории записи. Для наглядности используем стандартную функцию темы wp_themes_get_dynamic_image().
function wp_themes_get_dynamic_image() {
if ( is_single() ) {
$categories = get_the_category();
if ( ! empty( $categories ) ) {
$cat_slug = $categories[0]->slug;
switch ( $cat_slug ) {
case 'news':
return get_template_directory_uri() . '/images/news-banner.jpg';
case 'reviews':
return get_template_directory_uri() . '/images/reviews-banner.jpg';
default:
return get_template_directory_uri() . '/images/default-banner.jpg';
}
}
}
return get_template_directory_uri() . '/images/default-banner.jpg';
}Теперь выведем это изображение в шаблоне single.php:
<img src="<?php echo esc_url( wp_themes_get_dynamic_image() ); ?>" alt="Динамическое изображение" />Такой подход прост и эффективен для базовых задач, но в современных темах лучше интегрировать динамические изображения прямо в блоки Gutenberg.
Создание динамического блока Gutenberg с поддержкой изображений
Чтобы сделать блок с динамическим изображением, нужно зарегистрировать кастомный блок с помощью JavaScript (React) и PHP.
Регистрация блока на стороне JavaScript
В файле block.js создадим блок с выбором категории, по которой будет меняться изображение:
const { registerBlockType } = wp.blocks;
const { SelectControl } = wp.components;
const { useState } = wp.element;
registerBlockType('wp-themes/dynamic-image', {
title: 'Динамическое изображение',
icon: 'format-image',
category: 'common',
attributes: {
category: {
type: 'string',
default: 'default'
}
},
edit({ attributes, setAttributes }) {
return (
<SelectControl
label="Выберите категорию"
value={attributes.category}
options=[
{ label: 'Новости', value: 'news' },
{ label: 'Обзоры', value: 'reviews' },
{ label: 'По умолчанию', value: 'default' }
]
onChange={(value) => setAttributes({ category: value })}
/>
);
},
save() {
return null; // Рендерим на сервере
}
});Рендеринг блока на сервере (PHP)
В файле functions.php регистрируем серверный рендеринг:
function wp_themes_dynamic_image_render_callback( $attributes ) {
$category = isset( $attributes['category'] ) ? $attributes['category'] : 'default';
switch ( $category ) {
case 'news':
$image_url = get_template_directory_uri() . '/images/news-banner.jpg';
break;
case 'reviews':
$image_url = get_template_directory_uri() . '/images/reviews-banner.jpg';
break;
default:
$image_url = get_template_directory_uri() . '/images/default-banner.jpg';
break;
}
return '<img src="' . esc_url( $image_url ) . '" alt="Динамическое изображение по категории: ' . esc_attr( $category ) . '" />';
}
register_block_type( 'wp-themes/dynamic-image', array(
'render_callback' => 'wp_themes_dynamic_image_render_callback',
) );Таким образом, в редакторе Gutenberg пользователь сможет выбрать категорию, а на сайте будет выводиться соответствующее динамическое изображение.
Использование плагина Clearfy Pro для управления динамическими изображениями
Плагин Clearfy Pro предлагает расширенные возможности оптимизации и управления ресурсами сайта, включая оптимизацию изображений и автоматизацию их вывода.
С помощью Clearfy Pro вы можете настроить автоматическую замену изображений в зависимости от условий, что значительно упростит реализацию динамических изображений без необходимости писать много кода.
Например, в Clearfy Pro можно задать правила, чтобы для определенных категорий автоматически подгружались соответствующие изображения, а также сжать и конвертировать их в формат WebP для ускорения загрузки.
Практические советы по работе с динамическими изображениями в темах WordPress
Оптимизация изображений
Динамические изображения часто могут негативно влиять на скорость загрузки страниц, если не оптимизировать их. Используйте форматы WebP, lazy loading и CDN. Плагины, такие как Clearfy Pro, помогают автоматизировать эти задачи.
Кэширование
Если изображения генерируются динамически, стоит продумать кэширование. Можно кэшировать результат функции рендеринга блоков или использовать transient API WordPress для временного хранения URL.
Безопасность и валидация
Всегда проверяйте и фильтруйте входящие данные, например, атрибуты блока, чтобы избежать XSS-уязвимостей. Используйте функции esc_url() и esc_attr() для вывода данных.
Расширение функционала
В дальнейшем можно добавить возможность загружать изображения пользователям, создавать галереи с динамическими эффектами или интегрировать сторонние API для подгрузки картинок.
Итог
Динамические изображения в теме WordPress с поддержкой Gutenberg — мощный инструмент для создания интересного и персонализированного контента. Сочетание PHP, JavaScript и плагинов, таких как Clearfy Pro, позволит реализовать гибкие решения с минимальными затратами времени и ресурсов.