Шапка (header) и подвал (footer) — это сквозные элементы любого сайта на WordPress, присутствующие на каждой странице. Они играют критическую роль не только в навигации и брендинге, но и в общем пользовательском опыте (UX) и поисковой оптимизации (SEO).
Важность шапки и подвала для пользовательского опыта и SEO
Навигация и Брендинг: Шапка обычно содержит логотип, основное меню навигации и, возможно, контактную информацию или поиск. Это первое, что видит пользователь, и ключевой элемент для ориентации на сайте. Подвал часто дублирует важные ссылки, содержит контактные данные, ссылки на социальные сети и информацию об авторских правах.
SEO: Структурированные данные, внутренние ссылки в шапке и подвале, а также наличие ключевой информации (например, NAP — Name, Address, Phone для локального SEO) влияют на ранжирование сайта поисковыми системами.
Пользовательский Опыт: Логично организованные и информативные шапка и подвал улучшают юзабилити, позволяя пользователям легко находить нужную информацию и перемещаться по сайту, что снижает показатель отказов.
Обзор основных методов редактирования шапки и подвала
Существует несколько подходов к модификации этих областей в WordPress, каждый со своими преимуществами и уровнем сложности:
Настройки темы: Большинство современных тем предоставляют опции кастомизации через встроенный интерфейс WordPress.
Виджеты: Подвал часто является виджетизированной областью, позволяя добавлять контент с помощью стандартных виджетов WordPress.
Плагины: Специализированные плагины (конструкторы шапок и подвалов) предлагают визуальный интерфейс для создания полностью кастомных дизайнов.
Редактирование кода: Прямое изменение файлов темы (header.php, footer.php) или использование хуков для добавления/изменения элементов.
Редактирование шапки и подвала через настройки темы WordPress
Это наиболее доступный и безопасный способ для большинства пользователей.
Использование встроенного кастомайзера темы (внешний вид -> настроить)
Кастомайзер WordPress предоставляет живой предпросмотр изменений. Перейдите в раздел «Внешний вид» -> «Настроить». Здесь вы найдете секции, относящиеся к шапке и подвалу, названия которых могут варьироваться в зависимости от активной темы (например, «Header», «Footer», «Шапка», «Подвал», «Site Identity»).
Настройка элементов шапки: логотип, меню, контактная информация
В кастомайзере обычно доступны опции для:
Логотипа: Загрузка изображения логотипа, настройка его размеров, загрузка фавиконки (Site Icon).
Меню: Выбор основного навигационного меню, созданного в разделе «Внешний вид» -> «Меню», и определение его местоположения.
Дополнительные элементы: Некоторые темы позволяют добавлять кнопки призыва к действию (CTA), иконки социальных сетей, контактные данные (телефон, email) или строку поиска непосредственно через настройки шапки.
Настройка элементов подвала: авторские права, ссылки, виджеты
Настройки подвала в кастомайзере могут включать:
Текст авторских прав: Возможность изменить стандартный текст «Работает на WordPress».
Меню подвала: Выбор дополнительного меню для отображения в футере.
Количество колонок виджетов: Некоторые темы позволяют настроить количество колонок для виджетов в подвале.
Стилизация: Базовые настройки цвета фона, текста, ссылок.
Особенности редактирования в различных темах WordPress
Важно понимать, что доступные опции в кастомайзере сильно зависят от активной темы. Премиум-темы или фреймворки (как Astra, GeneratePress, Kadence) обычно предлагают гораздо больше гибкости в настройке шапки и подвала, чем стандартные темы WordPress.
Использование виджетов для редактирования подвала
Многие темы регистрируют специальные области для виджетов в подвале (например, «Footer Widget Area 1», «Footer Widget Area 2» и т.д.). Управлять ими можно через «Внешний вид» -> «Виджеты» или через кастомайзер.
Добавление и настройка виджетов в подвале (текст, изображения, списки)
Вы можете перетащить стандартные или добавленные плагинами виджеты в соответствующие области подвала:
Текст: Для добавления произвольного HTML, текста, контактной информации.
Изображение: Для вывода логотипов партнеров или других изображений.
Меню навигации: Для отображения дополнительного меню.
Последние записи/Комментарии: Динамический контент.
HTML-код: Для вставки скриптов или сложной разметки.
Организация виджетов в подвале: колонки, расположение
Расположение виджетов определяется структурой области виджетов, заданной темой (обычно в несколько колонок). Порядок виджетов внутри одной области можно менять перетаскиванием. Если тема позволяет настроить количество колонок через кастомайзер, это даст дополнительную гибкость.
Популярные виджеты для подвала и их настройка
Контактная информация: Используйте виджет «Текст» или «HTML-код» для добавления адреса, телефона, email с использованием microdata для SEO.
Ссылки на соцсети: Многие темы или плагины предоставляют специальные виджеты для этого.
Карта: Виджет «HTML-код» для вставки кода с Google Maps или Яндекс.Карт.
Форма подписки: Интеграция с сервисами email-рассылок через соответствующие плагины и их виджеты.
Редактирование шапки и подвала с помощью плагинов
Плагины-конструкторы предоставляют максимальную гибкость без необходимости править код.
Обзор популярных плагинов для редактирования шапки и подвала (Elementor Header & Footer Builder, Beaver Builder, и др.)
Elementor Header & Footer Builder: Популярное решение (требует Elementor), позволяет создавать кастомные шаблоны шапки и подвала с помощью визуального редактора Elementor.
Beaver Builder + Beaver Themer: Мощная связка для создания любых частей сайта, включая шапку и подвал (Beaver Themer — платное дополнение).
Плагины от разработчиков тем: Некоторые темы (например, Astra Pro, GeneratePress Premium) включают модули для расширенного редактирования шапки и подвала.
Установка и настройка плагина
Процесс стандартный: установка и активация плагина через «Плагины» -> «Добавить новый». После активации обычно появляется новый пункт меню (например, «Внешний вид» -> «Elementor Header & Footer Builder»), где создаются и настраиваются шаблоны.
Создание пользовательских шаблонов шапки и подвала
В интерфейсе плагина вы создаете новый шаблон, выбираете его тип (шапка или подвал), и задаете условия отображения (например, на всем сайте, только на главной, в определенных записях и т.д.). Затем вы редактируете шаблон с помощью визуального конструктора (Elementor, Beaver Builder и т.п.), добавляя нужные элементы (логотип, меню, текст, кнопки) и настраивая их стили.
Преимущества и недостатки использования плагинов
Преимущества: Визуальное редактирование, большая гибкость дизайна, не требует знаний кода, возможность задавать условия отображения.
Недостатки: Дополнительная нагрузка на сайт (зависит от плагина), зависимость от плагина (при деактивации кастомные шапка/подвал исчезнут), возможные конфликты с темой или другими плагинами.
Редактирование шапки и подвала через код (для продвинутых пользователей)
Этот метод требует понимания PHP, HTML, CSS и структуры файлов WordPress тем.
Доступ к файлам темы (header.php, footer.php)
Основные файлы, отвечающие за вывод шапки и подвала, находятся в папке вашей активной темы (wp-content/themes/your-theme/):
header.php: Содержит HTML-разметку до начала основного контента (<body>, <head>, <header>).
footer.php: Содержит HTML-разметку после основного контента (<footer>, закрывающие теги </body>, </html>).
Редактировать их можно через редактор тем WordPress («Внешний вид» -> «Редактор файлов тем» — не рекомендуется на рабочем сайте) или через FTP/SSH доступ к файлам сервера.
Внесение изменений в HTML и CSS код шапки и подвала
Вы можете напрямую изменять HTML-структуру или добавлять PHP-код для вывода динамической информации. Для стилизации используйте файл style.css вашей темы или дочерней темы, либо раздел «Дополнительные CSS» в кастомайзере.
Рекомендации по безопасному редактированию кода и созданию дочерней темы
Крайне важно: Никогда не редактируйте файлы родительской темы напрямую! При обновлении темы все ваши изменения будут потеряны.
Создайте дочернюю тему: Это стандартная практика WordPress. Скопируйте header.php или footer.php из родительской темы в дочернюю и вносите изменения уже в них. WordPress автоматически будет использовать файлы из дочерней темы, если они существуют.
Используйте хуки: Вместо прямого редактирования файлов, предпочтительнее использовать экшены (actions) и фильтры (filters) WordPress, если тема их предоставляет. Например, хуки wp_head, wp_footer, или специфичные хуки темы (например, astra_header_after, generate_before_footer_content). Это более гибкий и безопасный способ кастомизации.
Примеры кастомизации: добавление скриптов, изменение стилей
Пример 1: Добавление скрипта аналитики в подвал (через functions.php дочерней темы):
<?php
/**
* Добавляет скрипт Яндекс.Метрики перед закрывающим тегом .
*
* @link https://developer.wordpress.org/reference/hooks/wp_footer/
*/
function my_child_theme_add_analytics_script(): void {
// Убедитесь, что скрипт не добавляется для залогиненных администраторов
if ( ! current_user_can( 'manage_options' ) ) {
?>
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(YOUR_COUNTER_ID, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
<?php
}
}
add_action( 'wp_footer', 'my_child_theme_add_analytics_script' );Пример 2: Изменение цвета фона шапки (через «Дополнительные CSS» или style.css дочерней темы):
/*
* Изменяет цвет фона основного контейнера шапки.
* Селектор может отличаться в зависимости от темы.
* Используйте инструменты разработчика в браузере для определения правильного селектора.
*/
#masthead, /* Пример для стандартных тем */
.site-header { /* Другой распространенный пример */
background-color: #f8f9fa; /* Светло-серый фон */
}
/* Изменение цвета ссылок в главном меню шапки */
.main-navigation a {
color: #0056b3; /* Синий цвет ссылок */
}
.main-navigation a:hover {
color: #003d80; /* Темно-синий при наведении */
}Выбор метода редактирования шапки и подвала зависит от ваших технических навыков, требований к дизайну и используемой темы. Начинайте с кастомайзера и виджетов, при необходимости переходите к плагинам или, если уверены в своих силах, к редактированию кода через дочернюю тему.