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

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

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

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

• Показать контент, оптимизированный под размер экрана.
• Скрыть или показать элементы в зависимости от устройства.
• Изменить структуру и стили без дублирования контента.

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

Создание адаптивного блока с помощью кастомного кода

Для начала рассмотрим, как с помощью минимального кода создать адаптивный блок. В WordPress можно добавить кастомный шорткод, который выводит разный HTML в зависимости от устройства.

Определение устройства на PHP

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

function hueman_adaptive_block_shortcode() {
    if ( wp_is_mobile() ) {
        return '<div class="hueman-block mobile">Это мобильная версия блока</div>';
    } else {
        return '<div class="hueman-block desktop">Это десктопная версия блока</div>';
    }
}
add_shortcode('hueman_adaptive_block', 'hueman_adaptive_block_shortcode');

Зарегистрировав этот шорткод, вы сможете вставлять в посты и страницы [hueman_adaptive_block], и пользователи увидят разные блоки в зависимости от устройства.

Добавление CSS для стилизации адаптивного блока

Чтобы визуально отделить версии и сделать блоки удобными, добавим стили. Лучше добавить их в style.css вашей темы или через кастомный CSS в настройках WordPress.

.hueman-block {
    padding: 20px;
    margin: 15px 0;
    border-radius: 5px;
    font-size: 18px;
    color: #fff;
}
.hueman-block.mobile {
    background-color: #4CAF50;
}
.hueman-block.desktop {
    background-color: #2196F3;
}

Использование плагинов для создания адаптивных блоков

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

1. Plugin: Advanced Custom Fields (ACF) + ACF Flexible Content

ACF позволяет создавать кастомные поля и блоки, которые можно выводить с условием в теме. В сочетании с Flexible Content можно создавать разные версии блока и показывать их через условные проверки по устройству.

Пример кода для ACF блока с адаптивностью

function hueman_acf_adaptive_block() {
    if ( wp_is_mobile() ) {
        // Вывод мобильного шаблона
        get_template_part( 'template-parts/hueman', 'block-mobile' );
    } else {
        // Вывод десктопного шаблона
        get_template_part( 'template-parts/hueman', 'block-desktop' );
    }
}
add_action('acf/init', function () {
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type(array(
            'name'              => 'hueman_adaptive',
            'title'             => __('Hueman Adaptive Block'),
            'render_callback'   => 'hueman_acf_adaptive_block',
            'category'          => 'formatting',
            'icon'              => 'layout',
            'keywords'          => array( 'adaptive', 'responsive' ),
        ));
    }
});

Этот способ позволяет использовать мощь ACF и создавать блоки в редакторе Gutenberg, при этом выводя разные шаблоны для мобильных и десктопных пользователей.

2. Plugin: Elementor Pro — Использование условий отображения

Если вы пользуетесь Elementor Pro, там есть возможность задавать условия отображения для виджетов и секций, включая устройства (десктоп, планшет, мобильный). Это позволяет создавать адаптивные блоки без кода.

Просто создайте два виджета или секции с разным контентом, а затем в настройках виджета в разделе "Advanced" - "Responsive" укажите, на каких устройствах показывать или скрывать блок.

Дополнительные нюансы создания адаптивных блоков

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

• Оптимизация скорости: Не стоит грузить сразу и мобильный, и десктопный контент, лучше выводить только нужный.
• Доступность: Убедитесь, что адаптивный контент доступен для скринридеров и соответствует стандартам WCAG.
• Кэширование: При использовании условной логики на сервере учтите, что кэширование страниц на уровне сервера может выдавать неправильный вариант блока. Настройте кэш с учётом мобильной версии.
• Тестирование: Проверяйте блоки на реальных устройствах и в эмуляторах, чтобы убедиться, что адаптация работает корректно.

Пример расширенного адаптивного блока с JavaScript

Иногда нужен более тонкий контроль, например, подгрузка контента после загрузки страницы, или адаптация при изменении размера экрана.

function hueman_enqueue_scripts() {
    wp_enqueue_script('hueman-adaptive-js', get_template_directory_uri() . '/js/hueman-adaptive.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'hueman_enqueue_scripts');

В файле hueman-adaptive.js можно написать такую логику:

jQuery(document).ready(function($) {
    function huemanToggleBlock() {
        if ($(window).width() <= 768) {
            $('.hueman-block.desktop').hide();
            $('.hueman-block.mobile').show();
        } else {
            $('.hueman-block.desktop').show();
            $('.hueman-block.mobile').hide();
        }
    }
    huemanToggleBlock();
    $(window).resize(huemanToggleBlock);
});

Этот код динамически переключает видимость блоков в зависимости от ширины окна браузера, что полезно при изменении ориентации устройства или размера экрана.

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

Создание адаптивных блоков — это не только вопрос внешнего вида, но и правильной организации кода и логики. Используйте встроенные функции WordPress, такие как wp_is_mobile(), комбинируйте с мощными плагинами как ACF или Elementor для удобства, а при необходимости дополняйте JavaScript для более гибкой адаптивности.

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