Шаблон сайта в Битрикс: что нужно знать до начала

Минимальный шаблон для «1С-Битрикс: Управление сайтом» — два PHP-файла и один CSS. Собрать их и проверить на тестовой странице можно за 30–40 минут, не трогая рабочий дизайн. Инструкция написана для версии 23.x и новее: файлы шаблона устроены так же и в старых редакциях, но пункты админки там могут называться иначе.

Что нужно иметь до начала

• Редакцию «Управление сайтом» на вашем сервере. В облачном Битрикс24 PHP-файлы шаблона не правятся.
• Права администратора и доступ к файлам: SFTP, SSH или файловый менеджер Битрикса. Нужна запись в /local/; если папки нет, создайте её.
• Свежую копию файлов и базы. Лучше работать на тестовом домене.
• Редактор, который сохраняет UTF-8 без BOM. Кодировку сайта покажет /bitrix/.settings.php: если utf_mode равен true, нужен UTF-8, иначе windows-1251.
• Понимание, что такое компонент[1].

[1] Компонент — готовый PHP-блок: меню, список новостей, форма. Он собирает данные, а за внешний вид отвечает шаблон компонента. Шаблон сайта и шаблон компонента — разные сущности.

Как устроен шаблон: минимум теории

Шаблон сайта отвечает за рамку страницы. Файл header.php открывает разметку, footer.php закрывает, а между ними выводится содержимое страницы. Шаблон привязан к сайту, а не к странице, но условием его можно ограничить одной папкой. Так мы и проверим результат, не рискуя главной. Папка /local/ проверяется раньше /bitrix/templates/: при одинаковом ID берётся версия из /local/.

Шаблон сайта — это рамка. Всё, что внутри рамки, рисуют компоненты, и править их нужно в своих копиях, а не в ядре.

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

1. Создайте файл /local/templates/my_template/css/main.css. ID шаблона — латиница, цифры и подчёркивание, без пробелов: он попадает в пути и константы.

   body { margin: 0; font-family: Arial, sans-serif; line-height: 1.5; }
   .site-header { padding: 16px 24px; background: #1f2937; }
   .site-header a { color: #ffffff; text-decoration: none; }
   .site-main { max-width: 960px; margin: 0 auto; padding: 24px; }

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

2. Создайте /local/templates/my_template/header.php. Первая строка с B_PROLOG_INCLUDED закрывает файл от прямого вызова, её не убирают.

   <?php
   if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
       die();
   }
   
   use Bitrix\\Main\\Page\\Asset;
   
   // Стили подключаем через Asset: тег выведет ShowHead()
   Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/main.css');
   ?>
   <!DOCTYPE html>
   <html lang=\"ru\">
   <head>
       <meta charset=\"<?= LANG_CHARSET ?>\">
       <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 href=\"<?= SITE_DIR ?>\">Мой сайт</a>
   </header>
   <main class=\"site-main\">
       <h1><?php $APPLICATION->ShowTitle(false); ?></h1>

3. Создайте /local/templates/my_template/footer.php. Он закрывает теги, открытые в шапке.

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

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

4. Создайте тестовую страницу /test/index.php в корне сайта.

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

   Проверка: /test/ открывается в текущем оформлении сайта. Это точка сравнения.

5. Откройте свой сайт в списке сайтов и добавьте в блок шаблонов my_template с условием для папки /test/. В части версий это PHP-выражение CSite::InDir('/test/'). Поставьте шаблон выше текущего: шаблон без условия подходит любой странице и перехватит запрос раньше. Сохраните.

   Проверка: после перезагрузки /test/ видна тёмная шапка «Мой сайт» и заголовок «Проверка шаблона». В исходном коде страницы есть ссылка на main.css; при включённом объединении CSS это будет склеенный файл из /bitrix/cache/.

6. Войдите как администратор и обновите /test/. Сверху появится панель управления Битрикса, её выводит ShowPanel(). Проверка: в окне инкогнито панели нет.

   Дальше переносите шапку и подвал из старого шаблона по частям, проверяя /test/ после каждой правки. Условие снимайте последним.

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

• Белая страница. PHP-ошибка скрыта. На время отладки поставьте true в ключе debug блока exception_handling файла /bitrix/.settings.php, после отладки верните false. Типичный текст: Parse error: syntax error, unexpected end of file. Не закрыта скобка или тег.

• Warning: Cannot modify header information - headers already sent by (output started at ...). Перед <?php попал BOM или пробел. Пересохраните файл в UTF-8 без BOM.

• Вместо русского текста символы вроде РњРѕР№. Файл сохранён в кодировке, которая не совпадает с utf_mode. Перекодируйте файл.

• Страница /test/ осталась в старом оформлении. Условие не совпало, или выше стоит шаблон без условия. Затем сбросьте кеш в настройках производительности (в старых версиях раздел назывался «Быстродействие»).

• В консоли браузера Failed to load resource: the server responded with a status of 404 для main.css. Проверьте путь и регистр имён: на Linux Main.css и main.css — разные файлы.

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

• Положите папку /local/ в Git: у правок в админке истории нет.
• Правьте компоненты через копии шаблонов в /local/templates/my_template/components/. Файлы в /bitrix/modules и /bitrix/components/bitrix обновления платформы перезапишут.
• Задайте название и описание шаблона в description.php; формат файла смотрите в документации вашей версии.
• Замерьте время ответа главной и число запросов CSS и JS до и после переноса.

Композитный сайт и кеш компонентов — отдельные темы, здесь их не разбираем.