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

Разделение контента на две колонки — частая задача при создании современных сайтов на WordPress. Это позволяет улучшить читаемость, структуру и визуальное восприятие текста, а также сделать страницу более удобной для пользователя. В этой статье мы подробно разберем, как реализовать двухколоночный макет в WordPress, используя как встроенные возможности, так и плагины и кастомные решения с кодом.

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

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

Кроме того, двухколоночный дизайн улучшает визуальную эстетику и снижает нагрузку на глаза пользователя при чтении больших объемов текста. Но важно сделать реализацию адаптивной, чтобы на мобильных устройствах колонки корректно переходили в один столбец.

Способы создания двухколоночного контекста в WordPress

Использование блоков Gutenberg для двухколоночного макета

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

Чтобы добавить двухколоночный блок:

• Нажмите кнопку Добавить блок (+).
• Выберите блок Колонки.
• Выберите вариант с двумя колонками.
• В каждую колонку добавьте текст, изображения или другие блоки.

Этот способ прост и подходит для большинства задач. Однако у него есть ограничения по кастомизации стилей и адаптивности.

Создание кастомного шорткода для двухколоночного блока

Если вы хотите использовать двухколоночный контент в любом месте сайта и иметь гибкий контроль, можно создать собственный шорткод. Например, на сайте 2wp.ru часто используют шорткоды для быстрого форматирования контента.

Ниже пример простого шорткода, который разбивает содержимое на две колонки с помощью CSS Flexbox:

function wp2wp_two_columns_shortcode($atts, $content = null) {
    $content = do_shortcode($content);
    return '<div class="wp2wp-two-columns">' . $content . '</div>';
}
add_shortcode('two_columns', 'wp2wp_two_columns_shortcode');

В редакторе нужно использовать его так:

[two_columns]
<div>Левая колонка</div>
<div>Правая колонка</div>
[/two_columns]

Чтобы колонки отображались правильно, добавим CSS:

.wp2wp-two-columns {
    display: flex;
    gap: 20px;
}
.wp2wp-two-columns > div {
    flex: 1;
}

Этот код создаст две равные колонки, которые адаптивно растягиваются по ширине контейнера.

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

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

• Column Shortcodes — простой плагин, который добавляет шорткоды для создания колонок разной ширины.
• Advanced Gutenberg — расширяет возможности стандартного редактора, добавляя удобные блоки для колонок.
• Elementor — один из самых популярных конструкторов страниц с мощным управлением колонками и адаптивностью.

Плагин Column Shortcodes позволяет использовать шорткоды вида:

[one_half]Содержимое левой колонки[/one_half]
[one_half_last]Содержимое правой колонки[/one_half_last]

Это быстро и просто, но требует установки плагина.

Адаптивность двухколоночного дизайна

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

Для CSS-решения с Flexbox добавим медиазапрос:

@media (max-width: 768px) {
    .wp2wp-two-columns {
        flex-direction: column;
    }
}

Это позволит колонкам выстраиваться вертикально на узких экранах.

Если вы используете плагины или редактор Gutenberg, убедитесь, что шаблоны и стили поддерживают адаптивность.

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

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

function wp2wp_two_columns_atts_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'left_width' => '50%',
            'right_width' => '50%',
        ), $atts, 'two_columns_atts'
    );
    $content = do_shortcode($content);

    return '<div class="wp2wp-two-columns-atts" style="display:flex; gap:20px;">' .
        '<div style="flex: 0 0 ' . esc_attr($atts['left_width']) . ';">' . $content['left'] . '</div>' .
        '<div style="flex: 0 0 ' . esc_attr($atts['right_width']) . ';">' . $content['right'] . '</div>' .
    '</div>';
}
add_shortcode('two_columns_atts', 'wp2wp_two_columns_atts_shortcode');

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

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

1. Используйте Gutenberg, если нужно быстро и просто. Для большинства задач встроенный редактор подходит идеально.

2. Для повторяющихся макетов создавайте шорткоды. Это ускорит работу и обеспечит единообразие.

3. Проверяйте адаптивность на разных устройствах. Никто не хочет смотреть на сломанный сайт с колонками, налезающими друг на друга.

4. Минимизируйте использование плагинов, если можно обойтись кодом. Это снижает нагрузку на сайт и уменьшает риски конфликтов.

5. Для сложных макетов используйте конструкторы страниц. Они дают визуальный контроль и множество настроек без программирования.

Заключение

Двухколоночный контент — это мощный инструмент для улучшения структуры и дизайна сайта на WordPress. В статье мы рассмотрели разные способы его реализации: от встроенных блоков Gutenberg и готовых плагинов до кастомных шорткодов с примерами кода. Выбирайте подходящий метод в зависимости от задачи и уровня владения кодом.

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