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

Верхний (header) и нижний (footer) колонтитулы являются критически важными элементами любого веб-сайта на WordPress. Они обеспечивают навигацию, содержат ключевую информацию и формируют первое и последнее впечатление пользователя. В этом руководстве мы рассмотрим различные методы создания и настройки колонтитулов, ориентируясь на пользователей уровня middle и senior.

Что такое верхний и нижний колонтитулы и зачем они нужны?

Определение верхнего и нижнего колонтитулов в WordPress

• Верхний колонтитул (Header): Это область, отображаемая в верхней части каждой страницы сайта. Обычно содержит логотип, основное меню навигации, иногда контактную информацию, строку поиска или кнопку призыва к действию (CTA).
• Нижний колонтитул (Footer): Область в нижней части каждой страницы. Традиционно включает информацию об авторских правах, ссылки на политику конфиденциальности, условия использования, карту сайта, контакты, ссылки на социальные сети и иногда дополнительные навигационные элементы или виджеты.

Важность верхнего и нижнего колонтитулов для сайта: навигация, брендинг, информация

Колонтитулы — это сквозные элементы, присутствующие на большинстве страниц сайта. Их роль многогранна:

• Навигация: Главное меню в хедере — основной инструмент ориентации пользователя. Футер часто содержит ссылки на вторичные, но важные страницы.
• Брендинг: Логотип в хедере и последовательное использование фирменного стиля в обоих колонтитулах укрепляют узнаваемость бренда.
• Информация: Контактные данные, ссылки на юридические документы, информация об авторских правах — все это удобно размещать в колонтитулах для легкого доступа.
• Пользовательский опыт (UX): Хорошо спроектированные колонтитулы улучшают взаимодействие пользователя с сайтом, делая его интуитивно понятным и удобным.

Примеры эффективного использования верхнего и нижнего колонтитулов

• E-commerce: Хедер с четким лого, поиском, корзиной и категориями товаров. Футер с ссылками на доставку, возврат, поддержку и способами оплаты.
• Блог/Новостной сайт: Хедер с лого, главным меню по рубрикам, поиском. Футер с подпиской на рассылку, популярными тегами, ссылками на соцсети.
• Корпоративный сайт: Хедер с лого, меню (О нас, Услуги, Проекты, Контакты), телефоном. Футер с адресом, реквизитами, ссылками на карьеру и политику конфиденциальности.

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

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

Использование стандартных инструментов WordPress (темы оформления)

Большинство современных тем WordPress предлагают настройку хедера и футера через встроенный Кастомайзер (Внешний вид -> Настроить). Возможности варьируются от темы к теме, но обычно включают:

• Загрузку логотипа и фавикона.
• Выбор и настройку меню навигации.
• Редактирование текста в футере (например, копирайт).
• Добавление виджетов в предопределенные области хедера или футера.

Этот способ наиболее прост и подходит для стандартных задач, если возможности темы достаточны.

Применение плагинов для настройки верхнего и нижнего колонтитулов (Elementor Header & Footer Builder, Beaver Builder, и др.)

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

• Elementor Header & Footer Builder: Бесплатный (с Pro-версией) плагин, работающий в связке с Elementor. Позволяет создавать шаблоны хедера и футера и применять их ко всему сайту или к определенным страницам/записям.
• Beaver Builder (Pro) + Beaver Themer: Платное решение, предлагающее аналогичную функциональность для пользователей Beaver Builder.
• Другие конструкторы страниц (например, Divi) часто имеют встроенные инструменты для создания шаблонов колонтитулов.

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

Редактирование файлов темы (functions.php, header.php, footer.php) – для опытных пользователей

Для полного контроля можно редактировать файлы темы напрямую. Это требует знаний PHP, HTML, CSS и понимания структуры тем WordPress.

• header.php: Содержит HTML-структуру и PHP-код для вывода верхней части страницы, включая <head> и начало <body>. Здесь вызываются функции вроде wp_head(), body_class(), wp_nav_menu().
• footer.php: Содержит HTML и PHP для нижней части страницы. Здесь вызываются wp_footer(), размещается информация о копирайте, подключаются скрипты.
• functions.php: Используется для добавления кастомного функционала, регистрации областей для виджетов, меню, подключения стилей и скриптов через хуки WordPress (wp_enqueue_scripts, widgets_init, after_setup_theme).

Пример: Динамический копирайт в footer.php

Вместо статичного года в footer.php можно использовать PHP:

<?php
// footer.php
?>
<footer>
    <div class="copyright">
        &copy; <?php echo date('Y'); ?> Название вашей компании. Все права защищены.
    </div>
    <?php wp_footer(); // Важный хук для плагинов ?>
</footer>
</body>
</html>

Пример: Добавление кода отслеживания через functions.php

<?php
// functions.php

/**
 * Добавляет код Google Tag Manager в <head>.
 *
 * @link https://developers.google.com/tag-manager/quickstart
 */
add_action('wp_head', 'add_gtm_head_script');
function add_gtm_head_script(): void {
    // Не выводить для залогиненных администраторов
    if (current_user_can('manage_options')) {
        return;
    }
    $gtm_id = 'GTM-XXXXXXX'; // Замените на ваш ID
    if (empty($gtm_id) || strpos($gtm_id, 'GTM-') !== 0) {
        return;
    }    
    ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','<?php echo esc_js($gtm_id); ?>');</script>
    <!-- End Google Tag Manager -->
    <?php
}

/**
 * Добавляет код Google Tag Manager (noscript) после открытия <body>.
 *
 * @link https://developers.google.com/tag-manager/quickstart
 */
add_action('wp_body_open', 'add_gtm_body_noscript'); // wp_body_open появился в WP 5.2
function add_gtm_body_noscript(): void {
    // Не выводить для залогиненных администраторов
    if (current_user_can('manage_options')) {
        return;
    }
    $gtm_id = 'GTM-XXXXXXX'; // Замените на ваш ID
     if (empty($gtm_id) || strpos($gtm_id, 'GTM-') !== 0) {
        return;
    }
    ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo esc_attr($gtm_id); ?>"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <?php
}

// Убедитесь, что ваша тема вызывает wp_body_open() сразу после <body> в header.php
// Если нет, можно использовать хук 'wp_footer' как альтернативу для noscript, 
// хотя размещение сразу после body считается более корректным.

?>

Важно: При редактировании файлов темы используйте дочернюю тему, чтобы изменения не были потеряны при обновлении родительской темы.

Пошаговые инструкции: Создание верхнего колонтитула

Создание верхнего колонтитула с помощью настройки темы

1. Перейдите в Внешний вид -> Настроить.
2. Найдите раздел, связанный с хедером (например, Header, Шапка сайта, Логотип и заголовок). Названия могут отличаться в зависимости от темы.
3. Загрузите логотип (Сайт -> Логотип сайта или аналогичный раздел).
4. Настройте меню: перейдите в раздел Меню, выберите или создайте меню и назначьте его для области Основное меню (или аналогичной).
5. Изучите другие доступные опции: макет хедера, цвета, шрифты, отображение строки поиска, контактной информации.
6. Опубликуйте изменения.

Создание верхнего колонтитула с помощью плагина Elementor Header & Footer Builder

1. Установите и активируйте плагины Elementor и Elementor Header & Footer Builder.
2. Перейдите в Внешний вид -> Elementor Header & Footer Builder.
3. Нажмите Add New.
4. Введите название (например, Главный хедер), выберите Type of Template как Header.
5. В Display On укажите, где будет отображаться этот хедер (например, Entire Website для всего сайта).
6. Нажмите Publish, затем Edit with Elementor.
7. Используя виджеты Elementor (Site Logo, Navigation Menu, Search Form, Heading, Icon List и др.), создайте структуру хедера.
8. Настройте стили (цвета, отступы, шрифты) для секций, колонок и виджетов.
9. Сохраните изменения.

Добавление логотипа, меню навигации, контактной информации и элементов поиска

• Логотип: Используйте соответствующий виджет или опцию в Кастомайзере. Убедитесь, что логотип четкий и правильно масштабируется.
• Меню: Создайте меню в Внешний вид -> Меню. Добавьте нужные страницы, записи, рубрики или произвольные ссылки. Назначьте меню соответствующей области.
• Контакты/Поиск: Добавляйте через виджеты Elementor, опции темы или через виджеты WordPress, если тема предоставляет виджетизированные области в хедере.

Настройка внешнего вида и адаптивности для мобильных устройств

Критически важно обеспечить корректное отображение хедера на всех устройствах.

• Кастомайзер: Обычно предоставляет базовые настройки адаптивности или переключатель предпросмотра (ПК, планшет, мобильный).
• Elementor: Предлагает мощные инструменты адаптивности. Переключайтесь между режимами предпросмотра (Desktop, Tablet, Mobile) и настраивайте видимость элементов, размеры шрифтов, отступы, порядок колонок специально для каждого типа устройства. Часто для мобильных используется иконка