Управление шапкой сайта в WordPress: от header.php до кастомных решений

Раздел: WordPress -> Темы WordPress

Шаблон header.php: настройка и варианты

Файл header.php в WordPress отвечает за вывод верхней части сайта: логотипа, меню, мета-тегов, скриптов и стилей. Эффективное решение строится на сочетании условных тегов, хуков и функций ядра.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php
        }
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        <?php
        wp_nav_menu( array(
            'theme_location' => 'primary',
            'menu_id'        => 'primary-menu',
        ) );
        ?>
    </nav>
</header>

Wp single php (файл single.php в wordpress)

Типичные ошибки:

Отсутствие вызова wp_head() - скрипты и стили не подключаются.
Неправильное расположение закрывающих тегов - нарушение валидности HTML.
Конфликт с плагинами при дублировании хуков (например, добавление одного скрипта дважды).
Игнорирование body_class() - потеря CSS-классов для кастомизации.

Как разбить шапку на отдельные файлы для переиспользования?

Используйте get_template_part() для включения частей шапки (логотип, меню, поиск) из отдельных файлов. Это упрощает поддержку.

<header>
    <?php get_template_part( 'template-parts/header/logo' ); ?>
    <?php get_template_part( 'template-parts/header/navigation' ); ?>
    <?php get_template_part( 'template-parts/header/search' ); ?>
</header>

Wp blog header php (шаблоны header в wordpress)

Проблемы: Путь к файлу должен быть правильным; если файл отсутствует, get_template_part молча завершается. Следите за каталогом template-parts/.

Как изменить header.php без изменения родительской темы?

Создайте дочернюю тему и скопируйте в неё файл header.php из родительской. WordPress автоматически загрузит версию из дочерней. Для включения стилей используйте functions.php дочерней:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} );

Ошибки: Загрузка стилей родительской темы без очереди; неправильная регистрация дочерней темы (обязательно должен быть файл style.css с Template).

Как показывать разный контент шапки на главной и внутренних страницах?

Условные теги is_front_page(), is_page() и другие позволяют гибко менять вывод.

<?php if ( is_front_page() ) : ?>
    <h1>Добро пожаловать!</h1>
<?php else : ?>
    <?php the_title( '<h1>', '</h1>' ); ?>
<?php endif; ?>

Типичная проблема: Использование is_home() вместо is_front_page() на статической главной странице - логика нарушается.

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

Используйте хуки wp_head и wp_body_open через add_action в functions.php.

add_action( 'wp_head', function() {
    echo '<meta name="custom-meta" content="значение">';
} );
add_action( 'wp_body_open', function() {
    echo '<!-- Начало контента -->';
} );

Ошибка: Слишком поздний или ранний приоритет хука - порядок вывода может сбиться. Указывайте приоритет третьим аргументом.

Как создать шапку с помощью блочного редактора (Full Site Editing)?

В темах на основе блоков (например, Twenty Twenty-Four) шапка создаётся через редактор сайта (Внешний вид → Редактор). Файл header.php не используется; шаблоны хранятся в /wp-content/themes/тема/patterns/. Чтобы добавить кастомный блок в шапку, отредактируйте шаблон шапки через FSE.

<!-- wp:group {"className":"custom-header"} -->
<div class="wp-block-group custom-header">
    <!-- wp:site-logo /-->
    <!-- wp:navigation {"ref":123} /-->
</div>
<!-- /wp:group -->

Проблемы: FSE требует тему с поддержкой блоков; старые плагины могут не работать. При переключении на классическую тему блочные шапки исчезают.

Расширенные примеры включают полные сценарии использования шаблона header.php и его кастомизацию.

Расширенные примеры

1. Многоуровневое меню с иконками и поиском

Пример header.php с поддержкой двух меню (основное и социальные сети) и формой поиска:

Пример

<header class="site-header">
    <div class="header-top">
        <?php get_search_form(); ?>
        <?php wp_nav_menu( array( 'theme_location' => 'social', 'depth' => 1, 'menu_class' => 'social-menu' ) ); ?>
    </div>
    <div class="header-main">
        <?php the_custom_logo(); ?>
        <nav>
            <?php wp_nav_menu( array(
                'theme_location' => 'primary',
                'depth'          => 3,
                'menu_class'     => 'main-menu',
                'walker'         => new Custom_Walker_Nav_Menu()
            ) ); ?>
        </nav>
    </div>
</header>

Результат:

<header class="site-header">
    <div class="header-top">
        <form role="search" method="get" ...>...</form>
        <ul id="menu-social" class="social-menu">...</ul>
    </div>
    <div class="header-main">
        <a href="..." class="custom-logo-link"><img ...></a>
        <nav><ul class="main-menu">...</ul></nav>
    </div>
</header>

2. Поддержка микроразметки (Schema.org) в шапке

Добавление атрибутов microdata для SEO:

Пример

<header itemscope itemtype="https://schema.org/WPHeader">
    <span itemprop="name"><?php bloginfo( 'name' ); ?></span>
    <nav itemscope itemtype="https://schema.org/SiteNavigationElement">
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'itemprop' => 'url' ) ); ?>
    </nav>
</header>

Результат:

<header itemscope itemtype="https://schema.org/WPHeader">
    <span itemprop="name">Мой блог</span>
    <nav itemscope itemtype="https://schema.org/SiteNavigationElement">
        <ul><li itemprop="url"><a href="/">Главная</a></li>...</ul>
    </nav>
</header>

3. Шапка для WooCommerce с корзиной и учётной записью

Условное отображение элементов магазина:

Пример

<header class="woo-header">
    <?php if ( class_exists( 'WooCommerce' ) ) : ?>
        <div class="header-cart">
            <a href="<?php echo wc_get_cart_url(); ?>">
                Корзина (<?php echo WC()->cart->get_cart_contents_count(); ?>)
            </a>
        </div>
        <?php if ( is_user_logged_in() ) : ?>
            <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>">Мой аккаунт</a>
        <?php endif; ?>
    <?php endif; ?>
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</header>

Частая ошибка: Проверка класса WooCommerce без проверки активности плагина - вызов несуществующих функций.

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

Скрипт Google Analytics через хук wp_head:

Пример

add_action( 'wp_head', 'add_gtag', 1 );
function add_gtag() {
    if ( ! current_user_can( 'administrator' ) ) { // не показывать админу
        ?>
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
        <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-XXXXX-Y');</script>
        <?php
    }
}

5. Кастомные шаблоны header для разных страниц

Использование get_header( 'слаг' ) для загрузки файла header-{слаг}.php. Например, в файле page-blog.php:

Пример

<?php get_header( 'blog' ); ?>
<!-- загрузит header-blog.php -->

Пример содержимого header-blog.php:

Пример

<header class="blog-header">
    <h2>Блог</h2>
    <?php get_search_form(); ?>
</header>

Результат:

<header class="blog-header">
    <h2>Блог</h2>
    <form role="search" ...>...</form>
</header>

Шаблоны header в WordPress - comments

Wp blog header php (php)