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

В современном веб-разработке адаптивность — ключевой момент, особенно для сайтов на WordPress. В этой статье разберём, как создать кастомный адаптивный блок с изображением, который будет корректно отображаться на любых устройствах, используя возможности WordPress и минимальный набор CSS и PHP.

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

Пользователи заходят на сайты с разных устройств — от смартфонов до больших мониторов. Если изображение не адаптируется под экран, это ведёт к плохому UX: картинка может быть слишком большой, слишком маленькой или обрезанной. Стандартные блоки WordPress часто не дают нужной гибкости, поэтому создание собственного блока — отличное решение.

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

Далее рассмотрим, как создать такой блок без использования тяжёлых плагинов, чтобы сохранить производительность сайта.

Создание кастомного блока с изображением через PHP и JavaScript

Для начала создадим плагин или добавим код в functions.php вашей темы, который зарегистрирует новый блок для редактора Gutenberg.

Регистрация блока в WordPress

Добавим в тему или плагин следующий код для регистрации блока:

function wpblog_register_adaptive_image_block() {
    wp_register_script(
        'wpblog-adaptive-image-block',
        get_template_directory_uri() . '/js/adaptive-image-block.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(get_template_directory() . '/js/adaptive-image-block.js')
    );

    register_block_type('wpblog/adaptive-image', array(
        'editor_script' => 'wpblog-adaptive-image-block',
        'render_callback' => 'wpblog_render_adaptive_image_block',
        'attributes' => array(
            'imageUrl' => array('type' => 'string'),
            'altText' => array('type' => 'string'),
            'imageWidth' => array('type' => 'number'),
            'imageHeight' => array('type' => 'number'),
        ),
    ));
}
add_action('init', 'wpblog_register_adaptive_image_block');

Здесь мы регистрируем блок с именем wpblog/adaptive-image и указываем callback для серверного рендера.

Код рендера блока на сервере

Создаём функцию wpblog_render_adaptive_image_block:

function wpblog_render_adaptive_image_block($attributes) {
    if (empty($attributes['imageUrl'])) {
        return '';
    }

    $alt = !empty($attributes['altText']) ? esc_attr($attributes['altText']) : '';
    $width = !empty($attributes['imageWidth']) ? intval($attributes['imageWidth']) : 'auto';
    $height = !empty($attributes['imageHeight']) ? intval($attributes['imageHeight']) : 'auto';

    $html = '<div class="wpblog-adaptive-image" style="max-width: 100%; height: auto;">';
    $html .= '<img src="' . esc_url($attributes['imageUrl']) . '" alt="' . $alt . '" style="width: 100%; height: auto;" />';
    $html .= '</div>';

    return $html;
}

Этот код выводит изображение с шириной 100% и автоматической высотой, что и обеспечивает адаптивность.

JavaScript часть блока для редактора Gutenberg

Создайте файл adaptive-image-block.js в папке js вашей темы или плагина. В нём опишем интерфейс выбора изображения и настройки атрибутов блока:

const { registerBlockType } = wp.blocks;
const { MediaUpload, MediaUploadCheck } = wp.blockEditor;
const { Button } = wp.components;

registerBlockType('wpblog/adaptive-image', {
    title: 'Адаптивное изображение',
    icon: 'format-image',
    category: 'common',
    attributes: {
        imageUrl: { type: 'string' },
        altText: { type: 'string' },
        imageWidth: { type: 'number' },
        imageHeight: { type: 'number' },
    },
    edit: (props) => {
        const { attributes, setAttributes } = props;

        function onSelectImage(media) {
            setAttributes({
                imageUrl: media.url,
                altText: media.alt,
                imageWidth: media.width,
                imageHeight: media.height,
            });
        }

        return (
            wp.element.createElement('div', { className: props.className },
                attributes.imageUrl ? (
                    wp.element.createElement('img', {
                        src: attributes.imageUrl,
                        alt: attributes.altText,
                        style: { width: '100%', height: 'auto' },
                    })
                ) : null,
                wp.element.createElement(MediaUploadCheck, null,
                    wp.element.createElement(MediaUpload, {
                        onSelect: onSelectImage,
                        allowedTypes: ['image'],
                        value: attributes.imageUrl,
                        render: ({ open }) => (
                            wp.element.createElement(Button, {
                                className: attributes.imageUrl ? 'image-button' : 'button button-large',
                                onClick: open,
                            }, !attributes.imageUrl ? 'Выбрать изображение' : 'Изменить изображение')
                        )
                    })
                )
            )
        );
    },
    save: () => {
        return null; // рендерится на сервере
    },
});

Этот код даёт возможность выбрать изображение из медиатеки и сразу видеть предпросмотр в редакторе.

CSS для улучшения адаптивности

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

.wpblog-adaptive-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

Это гарантирует, что изображение не выйдет за пределы контейнера и сохранит пропорции.

Дополнительные советы и плагины для адаптивных изображений в WordPress

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

• Clearfy Pro — для оптимизации загрузки и адаптивности, включая lazy loading.
• WPStories — для создания адаптивных слайд-шоу и историй с изображениями.

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

Заключение по теме адаптивных блоков с изображением

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

Рекомендуется также изучать и применять новые возможности редактора Gutenberg и инструментов оптимизации изображений, чтобы идти в ногу с развитием WordPress.