Шаблон сайта в Битрикс: пошаговый разбор без магии

За 30–60 минут можно собрать рабочий шаблон для 1С-Битрикс: Управление сайтом 24.x, подключить CSS, вывести заголовок страницы, меню и редактируемую область. Главное — не смешивать файлы шаблона с контентом сайта: иначе первая же смена дизайна превратится в ручной ремонт десятков страниц.

Что должно быть до начала

Пример рассчитан на 1С-Битрикс: Управление сайтом 24.x и выше. Перед началом проверьте требования именно вашей редакции и установленной версии PHP: они зависят от обновлений продукта и окружения.

• доступ к административной панели с правом изменять шаблоны;
• доступ по SFTP, SSH или к файловому менеджеру хостинга;
• готовая HTML-вёрстка с отдельными файлами CSS, изображениями и шрифтами;
• резервная копия каталога сайта и базы данных;
• тестовый домен или отдельная копия проекта, если сайт уже работает.

Шаблон — набор файлов, который задаёт общую оболочку страниц: шапку, подвал, подключение стилей и место для содержимого раздела.

В Битрикс шаблон не хранит сам текст страницы. Он создаёт каркас, а контент подставляется между header.php и footer.php.

Шаг 1. Создайте каталог шаблона

Откройте каталог /bitrix/templates/ и создайте папку, например custom. Не используйте пробелы, кириллицу и названия вроде default, если такой каталог уже есть.

Минимальная структура будет такой:

/bitrix/templates/custom/
├── description.php
├── header.php
├── footer.php
├── styles.css
├── template_styles.css
└── lang/ru/

Файл styles.css можно оставить для общих стилей, а template_styles.css — для правил, которые Битрикс или ваша вёрстка подключает как стили шаблона. Чтобы не зависеть от поведения конкретной сборки, в примере ниже мы явно подключим один файл из header.php.

Проверка: каталог открывается через SFTP, а внутри видны будущие файлы шаблона.

Шаг 2. Добавьте описание шаблона

Создайте description.php. Он нужен административной панели, чтобы шаблон отображался в списке и его можно было выбрать для сайта.

<?php
$arTemplate = array(
    "NAME" => "Пользовательский шаблон",
    "DESCRIPTION" => "Шаблон для основного сайта"
);

Здесь нет подключения стилей и HTML. Файл только описывает шаблон для интерфейса Битрикс.

Проверка: в административной панели откройте настройки сайта и список шаблонов. В нём должно появиться название «Пользовательский шаблон».

Шаг 3. Соберите шапку

В header.php разместите HTML до места, где начинается содержимое текущей страницы. Важны три вызова: ShowHead() выводит служебные элементы в <head>, ShowTitle() — заголовок страницы, а ShowPanel() — панель редактирования для администратора.

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) {
    die();
}
?>
<!doctype html>
<html lang="<?=LANGUAGE_ID?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php $APPLICATION->ShowHead(); ?>
    <link rel="stylesheet" href="<?=SITE_TEMPLATE_PATH?>/styles.css">
    <title><?php $APPLICATION->ShowTitle(); ?></title>
</head>
<body>
<?php $APPLICATION->ShowPanel(); ?>

<header class="site-header">
    <a class="site-logo" href="<?=SITE_DIR?>">Мой сайт</a>
    <nav class="site-nav" aria-label="Основная навигация">
        <?php
        $APPLICATION->IncludeComponent(
            "bitrix:menu",
            "top",
            array(
                "ALLOW_MULTI_SELECT" => "N",
                "CHILD_MENU_TYPE" => "left",
                "DELAY" => "N",
                "MAX_LEVEL" => "2",
                "MENU_CACHE_TIME" => "3600",
                "MENU_CACHE_TYPE" => "A",
                "ROOT_MENU_TYPE" => "top",
                "USE_EXT" => "Y"
            )
        );
        ?>
    </nav>
</header>

<main class="site-content">
    <h1><?php $APPLICATION->ShowTitle(false); ?></h1>

Компонент меню ищет пункты в файлах меню разделов. Параметр USE_EXT позволяет учитывать расширенное меню, если оно настроено в проекте. Если расширенного меню нет, оно не появится автоматически — это не ошибка шаблона.

Проверка: после выбора шаблона страница открывается с шапкой, заголовком и панелью Битрикс под администратором.

Шаг 4. Закройте разметку в footer.php

В footer.php закрываются основные контейнеры, добавляется подвал и вызывается ShowFooter(). Без последнего вызова часть служебных скриптов может не попасть в конец страницы.

</main>

<footer class="site-footer">
    <?php
    $APPLICATION->IncludeFile(
        SITE_DIR . "include/footer.php",
        array(
            "MODE" => "html",
            "NAME" => "Текст подвала"
        ),
        true
    );
    ?>
</footer>

<?php $APPLICATION->ShowFooter(); ?>
</body>
</html>

Вызов IncludeFile создаёт включаемую область. Её можно редактировать из публичной части сайта с правами администратора, не меняя PHP-файл шаблона.

Проверка: в публичной части виден подвал, а в режиме редактирования появляется возможность изменить файл /include/footer.php.

Шаг 5. Подключите стили

Создайте styles.css. Начните с минимального набора, чтобы отделить проблему подключения CSS от проблемы самой вёрстки.

body {
    margin: 0;
    color: #202124;
    background: #ffffff;
    font-family: Arial, sans-serif;
}

.site-header,
.site-content,
.site-footer {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
}

.site-content {
    padding: 32px 0 64px;
}

.site-footer {
    padding: 24px 0;
    border-top: 1px solid #dddddd;
}

Проверка: в браузере откройте исходный код страницы и убедитесь, что путь к CSS начинается с адреса сайта и содержит /bitrix/templates/custom/styles.css. В инструментах разработчика файл должен загружаться без ответа 404.

Шаг 6. Назначьте шаблон сайту

В административной панели откройте настройки нужного сайта и раздел с шаблонами. Выберите созданный шаблон. Если проект использует несколько сайтов, проверьте поле «Сайт» у правила применения: шаблон может быть назначен только одному домену или нескольким сайтам по отдельным условиям.

Для первого запуска не задавайте сложные условия по URL. Сначала примените шаблон ко всему сайту, проверьте главную страницу и один вложенный раздел, затем добавляйте исключения.

Проверка: после очистки кеша главная и внутренняя страницы используют одинаковые шапку, подвал и стили.

Если не получилось

1. «Call to a member function ShowHead() on null». Вызов сделан не в шаблоне Битрикс или переменная $APPLICATION переопределена. Проверьте, что файл подключается стандартным ядром и в нём нет собственного присваивания этой переменной.
2. «404 Not Found» для styles.css. Неверно указано имя каталога или путь. Сравните регистр букв в SITE_TEMPLATE_PATH и фактическое имя папки на сервере.
3. Меню пустое. Проверьте наличие файла меню в нужном разделе и совпадение типов top и left. Параметр USE_EXT не создаёт пункты меню сам.
4. На странице нет панели администратора. Проверьте авторизацию и вызов ShowPanel(). Выйдите из режима администратора — панель не предназначена для обычных посетителей.
5. После правки ничего не изменилось. Очистите кеш компонентов и кеш шаблона, затем проверьте страницу в приватном окне. Браузерный кеш и кеш Битрикс — разные уровни.

Что проверить перед публикацией

Что делать дальше

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

Компонент меню, кеширование и правила применения шаблонов лучше сверять с официальной документацией вашей версии Битрикс. Инвалидация кеша и оптимизация компонентов — отдельные задачи; в этом разборе мы ограничились каркасом шаблона.