Шаблон сайта в Битрикс: пошаговая инструкция с нуля

Через сорок минут у вас будет собственный шаблон на «1С-Битрикс: Управление сайтом». Шапка и подвал живут в одном месте, стили подключены, телефон в шапке правится из визуального режима, а сам шаблон лежит в /local/templates и не затрагивается обновлениями платформы. Инструкция написана для главного модуля 22.x и новее. Названия пунктов меню в вашей редакции могут слегка отличаться.

Что нужно до начала

• Доступ администратора в панель Битрикс.
• Доступ к файлам: SFTP, SSH или файловый менеджер в админке (Контент → Структура сайта → Файлы и папки).
• Тестовая копия сайта. Ошибка в header.php останавливает каждую страницу, поэтому на рабочем сайте начинайте с привязки по папке (шаг 4).
• Свежая резервная копия: Настройки → Инструменты → Резервное копирование.
• Знание кодировки сайта. В примерах UTF-8, у старых установок бывает windows-1251.

Из чего состоит шаблон

Пошаговая инструкция

1. Создайте header.php. Создайте папку /local/templates/my_template (если /local/templates нет, создайте и её). Имя папки станет идентификатором шаблона. Внутри положите header.php. Проверка B_PROLOG_INCLUDED* в начале закрывает файл от прямого вызова по URL.

   <?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">
       <title><?php $APPLICATION->ShowTitle(); ?></title>
       <?php $APPLICATION->ShowHead(); ?>
   </head>
   <body>
   <?php $APPLICATION->ShowPanel(); ?>
   <header class="site-header">
       <a class="site-header__logo" href="<?= SITE_DIR ?>">Мой сайт</a>
       <div class="site-header__phone">
           <?php
           $APPLICATION->IncludeComponent(
               'bitrix:main.include',
               '',
               [
                   'AREA_FILE_SHOW' => 'file',
                   'PATH' => SITE_DIR . 'include/phone.php',
               ],
               false
           );
           ?>
       </div>
   </header>
   <main class="site-content">
       <h1><?php $APPLICATION->ShowTitle(false); ?></h1>
   

   Проверка: на сервере с SSH команда php -l header.php отвечает «No syntax errors detected in header.php».

2. Создайте footer.php рядом с header.php. Он закрывает теги, которые открыты в шапке.

   <?php
   if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
       die();
   }
   ?>
   </main>
   <footer class="site-footer">
       <p>© <?= date('Y') ?> Мой сайт</p>
   </footer>
   </body>
   </html>
   

   Проверка: в Настройки → Настройки продукта → Сайты → Шаблоны сайтов появился my_template.

3. Добавьте template_styles.css. Битрикс сам подключает этот файл через ShowHead(), ссылку вручную писать не нужно.

   body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; color: #222; }
   .site-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #ddd; }
   .site-header__logo { font-size: 20px; font-weight: 700; color: inherit; text-decoration: none; }
   .site-content { max-width: 960px; margin: 0 auto; padding: 24px; }
   .site-footer { padding: 16px 24px; border-top: 1px solid #ddd; color: #666; }
   

   Проверка: адрес /local/templates/my_template/template_styles.css открывается в браузере и показывает текст стилей.

4. Привяжите шаблон к сайту. Откройте Настройки → Настройки продукта → Сайты → Список сайтов → ваш сайт. В блоке «Шаблоны сайта» добавьте строку: шаблон my_template, условие «Для папки или файла», значение /test/. Так новый шаблон затронет только тестовый раздел.

   Проверка: после сохранения в блоке видна строка с my_template и условием.

5. Создайте тестовую страницу /test/index.php. Файлы header.php и footer.php из /bitrix подтянут ваш шаблон по условию из шага 4.

   <?php
   require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');
   $APPLICATION->SetTitle('Проверка шаблона');
   ?>
   <p>Если вы видите шапку и подвал, шаблон подключён.</p>
   <?php require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php'); ?>
   

   Проверка: на /test/ видны панель администратора сверху, шапка, заголовок «Проверка шаблона» и подвал. В исходном коде страницы есть ссылка на template_styles.css.

6. Заполните включаемую область. В файловом менеджере админки создайте папку include, а в ней файл phone.php с одной строкой текста: +7 (000) 000-00-00. Компонент bitrix:main.include из шапки выведет его содержимое.

   Проверка: номер виден в шапке, а в режиме правки рядом с ним появляется значок редактирования.

7. Скопируйте шаблон компонента. Если на странице есть стандартный компонент, например bitrix:news.list, не правьте его в /bitrix/components. В режиме правки откройте меню компонента и скопируйте его шаблон в шаблон сайта my_template.

   Проверка: в папке components вашего шаблона появился каталог вида bitrix/news.list/имя_шаблона, а в параметрах компонента выбран он.

Всё своё держите в /local. Обновление платформы не должно угрожать вашей вёрстке.

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

• Белый экран. Скорее всего, ошибка PHP в header.php или footer.php, например «PHP Parse error: syntax error, unexpected end of file». Проверьте файл через php -l. Вывод ошибок на тестовой копии включается в блоке exception_handling файла /bitrix/.settings.php, точный формат смотрите в документации. На рабочем сайте его не оставляйте.
• Страница есть, стилей нет. В исходном коде нет ссылки на template_styles.css. Проверьте, что в head стоит ShowHead() и файл назван без опечаток. Затем откройте страницу с параметром ?clear_cache=Y под администратором.
• «Warning: Cannot modify header information - headers already sent by». Перед первым <?php есть пробел, пустая строка или BOM. Сохраните файл в UTF-8 без BOM.
• Открылся старый дизайн. Сработала другая строка в списке шаблонов сайта. Проверьте порядок строк и условие: условная строка должна проверяться раньше строки «Без условия».
• Вместо текста кракозябры. Сайт работает в windows-1251. Сохраните файлы шаблона в той же кодировке и поменяйте значение в meta charset.

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

Когда /test/ выглядит как нужно, замените условие в шаге 4 на «Без условия» и поставьте этой строке нужную сортировку. После этого:

• Заведите git-репозиторий на /local, чтобы шаблон был под версиями.
• Замените ручную вёрстку меню компонентом bitrix:menu. Это отдельная тема, здесь её не разбираем.
• Подключите свои CSS и JS через Asset (способ в FAQ).
• Посмотрите время ответа страницы с включённым кешем и без него: оно покажет, не мешает ли шаблон работе кеша.

* B_PROLOG_INCLUDED — константа, которую ядро Битрикс определяет при загрузке пролога (служебного кода инициализации). Если её нет, файл вызвали в обход ядра, и выполнение прерывается.