Файл header.php (шапка сайта): назначение и реализация

Раздел: Разработка на PHP -> Стандартные файлы проекта

Файл header.php: назначение и основные принципы

Файл header.php является стандартным компонентом многих веб-проектов на PHP. Он содержит общую для всех страниц разметку шапки сайта: открывающие теги <html>, <head>, мета-теги, подключаемые стили и скрипты, а также видимую часть шапки (логотип, меню). Правильная организация этого файла упрощает поддержку сайта и обеспечивает единообразие интерфейса.

Наиболее эффективное решение: динамический header.php с передачей переменных

Этот подход позволяет каждой странице задавать свои мета-теги, заголовки и другие параметры, избегая дублирования кода. Перед подключением header.php в основном файле (например, index.php) определяются переменные, которые затем используются внутри шаблона.

// index.php
<?php
$title = 'Главная страница';
$metaDescription = 'Описание главной страницы';
$metaKeywords = 'ключевые слова';
$currentPage = 'home'; // для подсветки активного пункта меню

include 'header.php';
?>

файл footer php (файл footer.php (подвал сайта))

<!-- header.php -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="<?php echo $metaDescription; ?>">
    <meta name="keywords" content="<?php echo $metaKeywords; ?>">
    <title><?php echo $title; ?></title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/" class="<?php echo ($currentPage == 'home') ? 'active' : ''; ?>">Главная</a>
            <a href="/about" class="<?php echo ($currentPage == 'about') ? 'active' : ''; ?>">О нас</a>
        </nav>
    </header>

конфигурационный файл php (конфигурационный файл php (config.php))

Пояснение шагов:

  1. В основном файле задаются переменные с данными для конкретной страницы.
  2. Файл header.php подключается через include и использует эти переменные.
  3. При необходимости можно передать целый массив или объект.

Типичная ошибка: если переменная не определена (например, забыли задать $title), PHP выдаёт уведомление (Notice). Решение: использовать оператор ?? (null coalescing) или проверку isset() внутри шаблона:

<title><?php echo $title ?? 'Сайт по умолчанию'; ?></title>

файл init php (файл init.php (инициализация))

Вариант 1: Статический header.php без передачи данных

Вопрос: Как создать простую шапку без динамики?

Подходит для одностраничных сайтов или проектов, где мета-теги и заголовок жёстко заданы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой сайт</title>
</head>
<body>
    <header>Шапка</header>

файл header php (файл header.php (шапка сайта))

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

Ошибка: забывают закрыть </body> и </html> в footer.php, но это не относится к header.

Вариант 2: Функция-обёртка для подключения разных шапок

Вопрос: Как организовать шапку через функцию для удобства вызова?

Аналог get_header() в WordPress. Создаётся функция, которая подключает нужный файл шапки в зависимости от переданного параметра.

// functions.php
<?php
function get_header($name = 'default') {
    $file = __DIR__ . '/headers/header-' . $name . '.php';
    if (file_exists($file)) {
        include $file;
    } else {
        include __DIR__ . '/headers/header-default.php';
    }
}
?>

// index.php
<?php
$page = 'blog';
get_header($page); // подключит headers/header-blog.php
?>

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

Ошибка: забывают создать файл-заглушку header-default.php, что приводит к ошибке включения.

Вариант 3: Объектно-ориентированный подход (класс Header)

Вопрос: Как реализовать шапку сайта с использованием ООП?

Создаётся класс Header, который принимает данные и выводит шапку.

<?php
class Header {
    private $data;

    public function __construct(array $data = []) {
        $this->data = $data;
    }

    public function render() {
        ?>
        <!DOCTYPE html>
        <html>
        <head>
            <title><?= $this->data['title'] ?? 'Default' ?></title>
        </head>
        <body>
            <header>...</header>
        <?php
    }
}

// Использование:
$header = new Header(['title' => 'О нас']);
$header->render();
?>

Цель: инкапсуляция, возможность расширения (наследование, трейты). Проблема: избыточность для небольших проектов.

Ошибка: не вызывать render() после создания объекта.

Вариант 4: Использование шаблонизатора (Twig)

Вопрос: Как подключить шапку через шаблонизатор для разделения логики?

Twig позволяет вынести HTML в отдельные шаблоны и передавать переменные.

// composer.json: "require": {"twig/twig": "^3.0"}
// index.php
<?php
require 'vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('templates');
$twig = new \Twig\Environment($loader);
echo $twig->render('header.html', [
    'title' => 'Контакты',
    'active' => 'contact'
]);
?>

<!-- templates/header.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <header>...</header>

Цель: чистое разделение PHP и HTML. Проблема: зависимость от внешней библиотеки, усложнение начальной настройки.

Ошибка: неправильный путь к папке шаблонов, из-за чего Twig не находит файл.

Вариант 5: Вынос настроек в конфигурационный файл

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

Конфигурационный файл (например, config.php) содержит все мета-данные, которые потом используются в header.php.

<?php
// config.php
return [
    'site_name' => 'Мой сайт',
    'default_title' => 'Добро пожаловать',
    'meta_description' => '...',
    'meta_keywords' => '...',
    'styles' => ['/css/main.css', '/css/extra.css']
];
?>

// header.php
<?php
$config = include 'config.php';
?>
<!DOCTYPE html>
<html>
<head>
    <title><?= $config['default_title'] ?></title>
    <?php foreach ($config['styles'] as $css): ?>
        <link rel="stylesheet" href="<?= $css ?>">
    <?php endforeach; ?>
</head>
<body>

Цель: единая точка изменения глобальных настроек. Проблема: для каждой страницы может потребоваться свой заголовок, тогда конфиг негибок.

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

Расширенные примеры реализации header.php

Пример 1: Динамическое меню на основе массива

Меню выводится из массива, при этом определяется активный пункт.

Пример 
<?php
// index.php
$pages = [
    '/' => 'Главная',
    '/about' => 'О нас',
    '/services' => 'Услуги',
    '/contact' => 'Контакты'
];
$currentPath = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
include 'header.php';
?>

<!-- header.php -->
<nav>
    <ul>
    <?php foreach ($pages as $url => $label): ?>
        <li>
            <a href="<?= $url ?>" class="<?= ($currentPath == $url) ? 'active' : '' ?>">
                <?= $label ?>
            </a>
        </li>
    <?php endforeach; ?>
    </ul>
</nav>

Результат: на каждой странице пункт меню, соответствующий текущему URL, получает класс active для стилизации.

<nav>
    <ul>
        <li><a href="/" class="active">Главная</a></li>
        <li><a href="/about" class="">О нас</a></li>
        ...
    </ul>
</nav>

Пример 2: Условное подключение CSS и JS для разных разделов

В зависимости от переданной переменной $section подключаются дополнительные ресурсы.

Пример 
<?php
// index.php (раздел блога)
$section = 'blog';
$extraStyles = ['/css/blog.css'];
$extraScripts = ['/js/blog.js'];
include 'header.php';
?>

<!-- header.php -->
<head>
    <title>...</title>
    <link rel="stylesheet" href="/css/common.css">
    <?php if (!empty($extraStyles)): ?>
        <?php foreach ($extraStyles as $style): ?>
            <link rel="stylesheet" href="<?= $style ?>">
        <?php endforeach; ?>
    <?php endif; ?>
    <?php if (!empty($extraScripts)): ?>
        <?php foreach ($extraScripts as $script): ?>
            <script src="<?= $script ?>"></script>
        <?php endforeach; ?>
    <?php endif; ?>
</head>

Результат: в разделе блога подгружаются специфичные CSS и JS, на других страницах только общие.

<head>
    <title>Блог</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/blog.css">
    <script src="/js/blog.js"></script>
</head>

Пример 3: Мета-теги Open Graph и Twitter Cards

Для социальных сетей передаются дополнительные мета-данные через массив.

Пример 
<?php
// product.php
$ogData = [
    'title' => 'Товар “Кроссовки”',
    'description' => 'Описание товара',
    'image' => 'https://example.com/image.jpg',
    'url' => 'https://example.com/product/123'
];
include 'header.php';
?>

<!-- header.php -->
<head>
    <title><?= $ogData['title'] ?? 'Магазин' ?></title>
    <meta property="og:title" content="<?= $ogData['title'] ?? '' ?>">
    <meta property="og:description" content="<?= $ogData['description'] ?? '' ?>">
    <meta property="og:image" content="<?= $ogData['image'] ?? '' ?>">
    <meta property="og:url" content="<?= $ogData['url'] ?? '' ?>">
    <meta name="twitter:card" content="summary_large_image">
</head>

Результат: при репосте в соцсетях отображается правильный заголовок, описание и изображение.

<meta property="og:title" content="Товар “Кроссовки”">
<meta property="og:image" content="https://example.com/image.jpg">

Пример 4: Буферизация вывода для изменения заголовков HTTP

Иногда требуется отправить заголовки (например, Content-Type) до вывода контента. Буферизация позволяет сначала подготовить HTML, а потом отправить заголовки.

Пример 
<?php
ob_start(); // включение буферизации
include 'header.php'; // весь вывод сохраняется в буфере
// ... остальной контент ...
$html = ob_get_clean(); // получение содержимого буфера

// Теперь можно отправить заголовок
header('Content-Type: text/html; charset=utf-8');
echo $html;
?>

Результат: заголовки отправляются до вывода, даже если header.php выводит часть HTML.

(Заголовок Content-Type отправлен, затем выводится полный HTML)

Пример 5: Поддержка многоязычности в шапке

Передача языка страницы и использование локализации.

Пример 
<?php
// index.php
$lang = 'ru';
$translations = [
    'ru' => ['title' => 'Главная', 'menu_home' => 'Главная', 'menu_about' => 'О нас'],
    'en' => ['title' => 'Home', 'menu_home' => 'Home', 'menu_about' => 'About']
];
$langData = $translations[$lang] ?? $translations['ru'];
include 'header.php';
?>

<!-- header.php -->
<!DOCTYPE html>
<html lang="<?= $lang ?>">
<head>
    <title><?= $langData['title'] ?></title>
</head>
<body>
    <nav>
        <a href="/"><?= $langData['menu_home'] ?></a>
        <a href="/about"><?= $langData['menu_about'] ?></a>
    </nav>

Результат: при $lang = 'en' шапка отображается на английском.

<html lang="en">
<title>Home</title>
<a href="/">Home</a>

Файл header.php (шапка сайта) - comments

En
файл header php (php)