Как создать адаптивные блоки в WordPress с GeneratePress

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

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

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

Использование возможностей GeneratePress для адаптивных блоков

GeneratePress из коробки поддерживает адаптивность, однако для более тонкой настройки адаптивных блоков можно применить встроенный модуль Elements (если у вас Pro версия). С его помощью можно создавать блоки, которые выводятся только на определённых устройствах.

Например, чтобы скрыть блок на мобильных устройствах, можно задать условие отображения в настройках Elements — «Display Rules» → «Devices» → выбрать «Desktop only». Но это подходит для целых элементов, а если нужен более гибкий подход, стоит использовать CSS и кастомные классы.

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

Добавим в стиль темы или в пользовательский CSS следующий код:

.generatepress-adaptive-block {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .generatepress-adaptive-block {
    padding: 10px;
    background-color: #e0e0e0;
  }
}

Этот класс можно добавить к любому блоку через редактор Gutenberg или классическое поле CSS классов. Благодаря @media правилам, блок будет менять отступы и фон в зависимости от ширины экрана.

Плагины для создания адаптивных блоков в WordPress

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

• Stackable — мощный набор блоков для Gutenberg с гибкими настройками адаптивности, включая скрытие блоков на разных устройствах, изменение отступов и размеров.
• GenerateBlocks — плагин от создателей GeneratePress, идеально интегрируется с темой, позволяет создавать легкие и адаптивные сетки и блоки.
• WP Responsive Menu — для адаптивного меню, если нужно дополнительно кастомизировать навигацию.

Рассмотрим пример настройки адаптивного блока с GenerateBlocks.

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

Создаем контейнер с тремя колонками, которые на мобильных устройствах становятся одной колонкой. В редакторе блоков:

• Добавьте блок Container и задайте класс gp-adaptive-container.
• Внутри добавьте три блока Grid с равным распределением.
• В настройках блока задайте адаптивные параметры, например, ширину колонок 33% на десктопе и 100% на мобильном.

Для дополнительной настройки можно добавить CSS:

@media (max-width: 768px) {
  .gp-adaptive-container > div {
    width: 100% !important;
    margin-bottom: 15px;
  }
}

Кастомные функции GeneratePress для адаптивных блоков

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

Пример: функция, которая добавляет адаптивный класс к блоку в контенте.

function generatepress_add_adaptive_class( $content ) {
    if ( is_singular() ) {
        // Добавляем класс к блоку с определенным ID или типом
        $content = str_replace(
            '<div class="my-block">',
            '<div class="my-block generatepress-adaptive-block">',
            $content
        );
    }
    return $content;
}
add_filter( 'the_content', 'generatepress_add_adaptive_class' );

Эта функция ищет в содержимом блок с классом my-block и добавляет дополнительный класс generatepress-adaptive-block, к которому уже применяются адаптивные стили, описанные выше.

Динамическое управление адаптивностью через JavaScript

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

function generatepress_enqueue_adaptive_script() {
    wp_enqueue_script( 'generatepress-adaptive-js', get_stylesheet_directory_uri() . '/js/adaptive.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'generatepress_enqueue_adaptive_script' );

В файле adaptive.js пример кода:

document.addEventListener('DOMContentLoaded', function() {
    function toggleAdaptiveContent() {
        var blocks = document.querySelectorAll('.generatepress-adaptive-block');
        blocks.forEach(function(block) {
            if(window.innerWidth <= 768) {
                block.textContent = 'Отображается мобильный контент';
            } else {
                block.textContent = 'Отображается десктопный контент';
            }
        });
    }
    toggleAdaptiveContent();
    window.addEventListener('resize', toggleAdaptiveContent);
});

Таким образом, контент блока меняется динамически при изменении ширины экрана. Это полезно для показа разных вариантов информации или дизайна.

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

После создания адаптивных блоков важно тщательно протестировать их отображение на различных устройствах и разрешениях. Для этого используйте:

• Встроенные средства разработчика в браузерах (эмуляция мобильных устройств).
• Онлайн-сервисы для проверки адаптивности, например, Google Mobile-Friendly Test.
• Физические устройства: смартфоны, планшеты, ноутбуки.

При возникновении проблем с отображением проверяйте, не конфликтует ли кастомный CSS с темой или плагинами, и используйте инструменты инспектора для быстрого выявления ошибок.

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