Как создать адаптивный блок в WordPress с помощью CSS и PHP

В современных темах WordPress важным элементом дизайна является адаптивность. Создание адаптивного блока позволяет корректно отображать контент на любых устройствах: от смартфонов до больших мониторов. В этой статье разберём, как с помощью простого PHP и CSS создать адаптивный блок, который будет менять своё поведение и внешний вид в зависимости от ширины экрана.

Почему адаптивность важна в WordPress

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

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

Шаг 1. Создание кастомного блока через PHP

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

function wpwp_rus_create_adaptive_block() {
    ob_start();
    ?>
    <div class="wpwp-adaptive-block">
        <div class="wpwp-adaptive-text">
            <h2>Заголовок адаптивного блока</h2>
            <p>Этот блок меняет расположение элементов в зависимости от размера экрана.</p>
        </div>
        <div class="wpwp-adaptive-image">
            <img src="https://via.placeholder.com/300" alt="Пример изображения" />
        </div>
    </div>
    <?php
    return ob_get_clean();
}

Эту функцию можно использовать в любом месте темы, например, вызвав echo wpwp_rus_create_adaptive_block();.

Шаг 2. Стилизация блока с помощью CSS для адаптивности

Для реализации адаптивности используем Flexbox и медиа-запросы. Добавим следующий CSS в файл стилей темы или через кастомизатор:

.wpwp-adaptive-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.wpwp-adaptive-text {
    flex: 1 1 60%;
}

.wpwp-adaptive-image {
    flex: 1 1 35%;
}

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

@media (max-width: 768px) {
    .wpwp-adaptive-block {
        flex-direction: column;
        text-align: center;
    }
    .wpwp-adaptive-text, .wpwp-adaptive-image {
        flex: none;
        width: 100%;
    }
    .wpwp-adaptive-image {
        margin-top: 15px;
    }
}

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

Шаг 3. Динамическое добавление контента по устройству

Иногда требуется выводить разный контент в адаптивных блоках для мобильных и настольных устройств. Для этого можно определить устройство на PHP и подставить соответствующий текст или изображения.

Вот простой пример с использованием wpwp_rus_is_mobile_device() — собственной функции для выявления мобильных устройств:

function wpwp_rus_is_mobile_device() {
    if ( wp_is_mobile() ) {
        return true;
    }
    return false;
}

function wpwp_rus_create_adaptive_block_dynamic() {
    ob_start();
    $is_mobile = wpwp_rus_is_mobile_device();
    ?>
    <div class="wpwp-adaptive-block">
        <div class="wpwp-adaptive-text">
            <h2><?php echo $is_mobile ? 'Мобильный заголовок' : 'Десктопный заголовок'; ?></h2>
            <p><?php echo $is_mobile ? 'Контент для мобильных устройств.' : 'Контент для десктопных пользователей.'; ?></p>
        </div>
        <div class="wpwp-adaptive-image">
            <img src="<?php echo $is_mobile ? 'https://via.placeholder.com/200' : 'https://via.placeholder.com/400'; ?>" alt="<?php echo $is_mobile ? 'Мобильное изображение' : 'Десктопное изображение'; ?>" />
        </div>
    </div>
    <?php
    return ob_get_clean();
}

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

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

Плагин Clearfy помогает оптимизировать работу WordPress, в том числе улучшая загрузку CSS и JS, что важно для адаптивных блоков. С его помощью можно отключить лишние стили и скрипты на мобильных устройствах, что ускорит работу сайта.

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

Советы по тестированию и отладке адаптивных блоков

1. Всегда проверяйте отображение блока на разных устройствах и эмуляторах. В браузерах Chrome или Firefox есть удобные инструменты разработчика с режимом эмуляции мобильных экранов.

2. Используйте инструменты, такие как Google PageSpeed Insights, чтобы проверить скорость загрузки и адаптивность.

3. Следите за размером изображений, используйте современные форматы (WebP) и ленивую загрузку, чтобы не замедлять сайт.

4. Если в теме есть визуальные редакторы (например, Gutenberg), можно создать подобный блок как кастомный блок, интегрируя PHP и CSS напрямую.