Как создать шапку сайта в WordPress? Полное руководство с кодом

Шапка (header) сайта в WordPress – важный элемент дизайна, который включает логотип, навигацию, контактные данные и другие элементы. В этом руководстве мы разберем, как создать и кастомизировать шапку для сайта на WordPress с нуля, редактируя файлы темы и добавляя стили.

Оглавление:

Где находится файл шапки в WordPress?
Как создать кастомную шапку?

Обновляем header.php
Добавляем стили для шапки сайта в файле темы style.css
Добавляем интерактивность (JS)
Подключаем script.js в functions.php

Центрированная шапка с кнопкой пример

Добавляем новый стиль в header.php:
Стили для style.css

Финалочка

Где находится файл шапки в WordPress?

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

Путь: wp-content/themes/ВАША_ТЕМА/header.php

Этот файл загружается на всех страницах и отвечает за отображение верхней части сайта.

Как создать кастомную шапку?

Для редактирования шапки нам понадобятся:

HTML (разметка);
CSS (стили);
PHP (динамическое подключение элементов);
JS (интерактивность, например, мобильное меню).

Обновляем `header.php`

Открываем файл header.php и заменяем старый код на этот:

<!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(); ?>>
<header class="site-header">
    <div class="container">
        <a href="<?php echo home_url(); ?>" class="logo">
            <?php bloginfo('name'); ?>
        </a>
        <nav class="main-nav">
            <?php wp_nav_menu(array(
                'theme_location' => 'main-menu',
                'container' => false,
                'menu_class' => 'nav-menu'
            )); ?>
        </nav>
        <button class="menu-toggle">☰</button>
    </div>
</header>

Добавляем стили для шапки сайта в файле темы `style.css`

Файл style.css находится в папке темы (wp-content/themes/ВАША_ТЕМА/style.css). Добавляем стили:

.site-header {
    background: #333;
    color: white;
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.logo {
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-decoration: none;
}
.nav-menu {
    list-style: none;
    display: flex;
    gap: 20px;
}
.nav-menu li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background: #333;
        padding: 10px;
        border-radius: 5px;
    }
    .nav-menu.show {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}

Добавляем интерактивность (JS)

Файл script.js нужно создать в папке темы (wp-content/themes/ВАША_ТЕМА/script.js). Добавляем код для мобильного меню:

document.addEventListener("DOMContentLoaded", function () {
    const menuToggle = document.querySelector(".menu-toggle");
    const navMenu = document.querySelector(".nav-menu");

    menuToggle.addEventListener("click", function () {
        navMenu.classList.toggle("show");
    });
});

Подключаем `script.js` в `functions.php`

Добавляем в functions.php:

function theme_scripts() {
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'theme_scripts');

Собственн ои все ваша шапка сайта готова, но вы также можете посмотреть еще один вариант который описан далее.

Центрированная шапка с кнопкой пример

Добавляем новый стиль в `header.php`:

<header class="centered-header">
    <div class="container">
        <a href="<?php echo home_url(); ?>" class="logo">Мой Сайт</a>
        <button class="cta-button">Связаться</button>
    </div>
</header>

Стили для `style.css`

.centered-header {
    background: #222;
    color: white;
    text-align: center;
    padding: 20px 0;
}
.cta-button {
    background: #ff6600;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

Финалочка

Теперь ты знаешь, как создать и кастомизировать шапку сайта в WordPress. Мы разобрали:

Как редактировать header.php;
Как добавить стили style.css;
Как подключить script.js для мобильного меню;
Как загружать JS в functions.php;
Как сделать два варианта шапки с адаптивностью.

Скопируй код, вставь в тему и настрой шапку под свои нужды! Меняй стили дописывай новые пункты меню навигации изменяй цвет и размер шрифта)

Где находится файл шапки в WordPress?

Как создать кастомную шапку?

Обновляем header.php

Добавляем стили для шапки сайта в файле темы style.css