Коли починаєш створення власної теми для WordPress, одним із перших файлів стає header.php. Саме він відповідає за верхню частину сайту: секцію <head>, відкриття <body>, логотип, меню та інші елементи, які повторюються на всіх сторінках.

Якщо ти займаєшся Веб-розробкою або поступово вивчаєш Front-end розробку і Back-end розробку, то правильне розуміння цього файлу дуже допоможе надалі. Тут поєднуються HTML, CSS та PHP, а сама структура WordPress стає набагато зрозумілішою.

Для чого потрібен файл header.php

У класичній структурі теми WordPress файл header.php містить усе, що повинно відображатися на початку сторінки. Це не лише технічні теги, а й візуальна частина сайту.

Зазвичай у ньому знаходяться:

  • DOCTYPE і відкриття HTML-документа;
  • мета-теги;
  • підключення стилів і скриптів;
  • логотип;
  • меню навігації;
  • верхня панель сайту;
  • виклик WordPress-хуків.

WordPress автоматично підтягує цей файл через функцію get_header(). Тому достатньо один раз правильно його налаштувати, і зміни застосуються до всіх сторінок теми.

Базова структура 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.0" />

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<header class="site-header">
    <div class="container">
        <h1>
            <a href="<?php echo home_url(); ?>">
                <?php bloginfo('name'); ?>
            </a>
        </h1>
    </div>
</header>

На перший погляд код виглядає простим, але тут вже є кілька важливих моментів.

Функція wp_head()

Це одна з найважливіших функцій у WordPress. Через неї система та плагіни Wordpress підключають стилі, JavaScript, SEO-метадані та інші компоненти.

Якщо забути вставити wp_head(), частина функціоналу сайту просто перестане працювати.

Функція body_class()

Вона автоматично додає CSS-класи до тега <body>. Це дуже корисно для Front-end розробки, тому що можна стилізувати різні сторінки окремо без ручного прописування класів.

Додавання меню навігації

Майже кожна тема WordPress використовує динамічне меню. Спочатку потрібно зареєструвати його у файлі functions.php.

function mytheme_register_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu')
    ));
}

add_action('after_setup_theme', 'mytheme_register_menus');

Після цього меню можна вивести у header.php:

<nav class="main-navigation">
    <?php
        wp_nav_menu(array(
            'theme_location' => 'primary'
        ));
    ?>
</nav>

Такий підхід значно зручніший, ніж прописувати посилання вручну. Користувач зможе змінювати структуру меню прямо через адмінку WordPress.

Як правильно підключати стилі та скрипти

Новачки часто додають CSS або JavaScript прямо в header.php через HTML-теги. Але в WordPress правильніше використовувати функції enqueue.

Приклад для functions.php:

function mytheme_assets() {
    wp_enqueue_style(
        'main-style',
        get_stylesheet_uri()
    );

    wp_enqueue_script(
        'main-script',
        get_template_directory_uri() . '/assets/js/main.js',
        array(),
        null,
        true
    );
}

add_action('wp_enqueue_scripts', 'mytheme_assets');

Це безпечніше та краще для сумісності з плагінами Wordpress.

Логотип сайту та назва

У сучасних темах зазвичай використовують кастомний логотип. WordPress дозволяє легко додати його через налаштування теми.

if (has_custom_logo()) {
    the_custom_logo();
} else {
    echo '<h1>' . get_bloginfo('name') . '</h1>';
}

Це дає більше гнучкості та дозволяє змінювати логотип без редагування коду.

Навіщо потрібні хуки у header.php

Під час створення тем WordPress важливо розуміти, як працюють Хуки Wordpress. Саме вони дозволяють плагінам та самій системі змінювати поведінку сайту без редагування основних файлів.

Наприклад, wp_head() — це hook-точка, через яку можуть підключатися:

  • SEO-плагіни;
  • аналітика;
  • Open Graph мета-теги;
  • додаткові стилі;
  • JavaScript-бібліотеки.

Через це не варто видаляти стандартні виклики WordPress навіть тоді, коли здається, що вони зайві.

Типові помилки новачків

Жорстко прописані URL

Не потрібно вручну вставляти адресу сайту. Краще використовувати:

<?php echo home_url(); ?>

Тоді сайт нормально працюватиме навіть після перенесення на інший домен.

Відсутність wp_head()

Це одна з найпоширеніших проблем. Без цього виклику можуть не працювати SEO-плагіни, кешування та навіть деякі стилі.

Змішування логіки та верстки

У header.php не варто писати складну бізнес-логіку. Краще залишати тут лише базову PHP-структуру та HTML-розмітку.

Чи потрібен header.php у block themes

У нових block themes структура WordPress поступово змінюється. Частину функціоналу тепер можуть виконувати HTML-шаблони та редактор сайтів.

Але класичний header.php усе ще активно використовується в більшості тем, особливо кастомних. Тому його розуміння залишається дуже важливим для PHP-розробки під WordPress.

Підсумок

Файл header.php — це основа будь-якої класичної теми WordPress. Саме тут формується структура сторінки, підключаються стилі та запускаються важливі хуки системи.

Якщо добре зрозуміти принцип його роботи, далі буде набагато легше створювати власні теми, адаптувати дизайн і працювати з плагінами Wordpress. А головне — ти почнеш краще розуміти внутрішню логіку WordPress як CMS.