Шаблон сайта Битрикс - это не тема оформления в один клик, а папка с набором PHP-файлов, где header.php и footer.php отвечают за то, что попадает на каждую страницу до и после контента. Когда беру проект с кастомным дизайном, а не готовым решением из маркетплейса, начинаю почти всегда с одной и той же связки: header.php, footer.php и файл стилей, подключенный через API ядра, а не захардкоженным тегом link в head.
Из чего состоит шаблон сайта на Битрикс
Шаблон живёт в папке /local/templates/имя_шаблона/ (в старых установках это bitrix/templates/, но для кастомной верстки правильнее работать в local, чтобы обновления ядра не задевали файлы). Внутри минимум четыре вещи, без которых Битрикс шаблон не признает рабочим.
| Файл или папка | Что делает |
|---|---|
| header.php | всё, что выше контента: head, meta-теги, шапка, верхнее меню |
| footer.php | всё, что ниже контента: подвал, нижнее меню, закрывающие теги |
| template_styles.css | стили самого шаблона: шапка, подвал, колонки, сетка, фон и всё, что вне рабочей области |
| styles.css | стили содержимого страницы, эти правила система использует в визуальном редакторе, поэтому оформление каркаса сюда не добавляют |
| description.php | название и описание шаблона, которые видно в админке |
| .parameters.php | настраиваемые параметры шаблона, если он должен быть гибким |
Список шаблонов и условия их применения (например, отдельный шаблон под мобильную версию или под конкретный раздел) настраиваются в Настройки продукта, в разделе с дизайном сайта. Там же указывается путь к папке шаблона и PHP-условие, при котором он подключается.
header.php: что обязано быть в шапке шаблона
Header.php открывает документ и обязан начинаться с проверки на прямой доступ к файлу, иначе его можно запросить напрямую в обход движка. Дальше идёт стандартный html-каркас, вызов ShowHead() для мета-тегов и подключенных ресурсов, и ShowTitle() для заголовка страницы.
<?php if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="<?=LANG_CHARSET?>">
<title><?$APPLICATION->ShowTitle()?></title>
<?$APPLICATION->ShowHead();?>
</head>
<body>
<?$APPLICATION->ShowPanel();?>
<header class="site-header">
<?$APPLICATION->IncludeComponent(
"bitrix:menu",
"top_horizontal",
array(
"ROOT_MENU_TYPE" => "top",
"MAX_LEVEL" => "2",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "3600"
)
);?>
</header>ShowPanel() выводит верхнюю панель администратора, поэтому вызывать её нужно один раз и именно в шапке. Рабочая область отмечается не HTML-комментарием, а разделителем #WORK_AREA#: им обозначают границу между верхней и нижней частью шаблона, и без этого разделителя шаблон работать не будет. Сама страница собирается так: в начале подключается header.php, дальше идёт контент, в конце footer.php.
Меню в примере подключено компонентом bitrix:menu с типом top_horizontal - это шаблон компонента, реальное имя может отличаться в зависимости от того, какой набор шаблонов компонентов установлен в проекте. Смысл в том, что верхнее меню, хлебные крошки, логотип и поиск в header.php почти всегда идут через компоненты, а не прописываются статичным html, иначе при каждом изменении структуры разделов придётся руками лезть в шаблон.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
footer.php: подвал и закрывающие теги
Footer.php симметричен header.php - закрывает то, что было открыто. Обычно это нижнее меню, копирайт, контакты и закрывающие теги body и html.
<footer class="site-footer">
<?$APPLICATION->IncludeComponent(
"bitrix:menu",
"bottom",
array(
"ROOT_MENU_TYPE" => "bottom",
"MAX_LEVEL" => "1",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "3600"
)
);?>
<div class="copyright">© <?=date("Y")?> Компания</div>
</footer>
</body>
</html>Парного закрывающего маркера у рабочей области нет: разделитель #WORK_AREA# в шаблоне один, и всё, что идёт после него, относится уже к подвалу. Порядок частей при этом фиксированный: шапка, рабочая область, подвал.
Подключение стилей через API, а не через тег link
Самая частая ошибка в самодельных шаблонах - style.css подключают прямым тегом link прямо в header.php. Работать это будет, но Битрикс не увидит такой файл как зарегистрированный ресурс, и модуль автоматической оптимизации CSS и JS (он в Настройки продукта, в разделе автооптимизации) не сможет склеить и сжать его вместе с остальными подключенными файлами.
Правильный способ - зарегистрировать файл через $APPLICATION в init.php шаблона или в самом header.php до вызова ShowHead():
<?php
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/style.css");
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/script.js");SITE_TEMPLATE_PATH - системная константа, которая уже содержит путь до текущего шаблона, поэтому переносить шаблон в другую папку или менять его название можно без правки путей в коде. SetAdditionalCSS кладёт файл в очередь на вывод внутри ShowHead(), AddHeadScript делает то же самое для скриптов.
Для проектов на более новом ядре (D7) то же самое делается через класс Asset, и я в последних проектах перехожу именно на него, потому что он единообразно работает и для css, и для js, и для inline-кода:
<?php
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/style.css");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH."/script.js");Оба варианта рабочие, выбор между ними обычно зависит от того, что уже используется в проекте - смешивать их в одном шаблоне без причины не стоит, чтобы не путаться, где что подключено.
Подключение шрифтов и иконок
Шрифты подключаю через @font-face прямо в style.css, а не отдельным тегом в head - файл шрифта в этом случае просто лежит рядом со стилями в папке шаблона, и путь до него прописывается относительно css-файла. Отдельные iconfont или svg-спрайты подключаю тем же AddHeadScript, если это js-файл со спрайтом, либо просто кладу svg-файл в папку шаблона и подключаю через IncludeFile там, где он нужен по месту.
Как Битрикс выбирает, какой шаблон применить
На один сайт может приходиться несколько шаблонов - например, отдельный под мобильную версию или под конкретный лендинг в рамках того же сайта. Условие выбора задаётся в списке шаблонов сайта в админке: для каждого шаблона можно прописать PHP-условие (проверка User-Agent, путь раздела и так далее), и движок на каждом хите проверяет условия по порядку и берёт первый подошедший шаблон.
На практике для адаптивной верстки чаще выгоднее один шаблон с медиазапросами в style.css, чем два разных шаблона под десктоп и мобильную версию - меньше дублирования header.php и footer.php, и правки верстки не нужно вносить в двух местах сразу.
Частые ошибки при верстке шаблона
За годы работы с Битриксом чаще всего натыкаюсь на одни и те же проблемы в чужих шаблонах, которые потом достаются мне на поддержку.
- Нет проверки B_PROLOG_INCLUDED в начале header.php - файл можно открыть напрямую по прямому пути, минуя движок и роутинг.
- Пути к картинкам и скриптам прописаны абсолютной строкой вместо SITE_TEMPLATE_PATH - при переносе шаблона или смене домена всё ломается.
- В коде шаблона нет разделителя #WORK_AREA# - без него шаблон работать не будет, потому что система не понимает, где заканчивается шапка и начинается подвал.
- Стили подключены тегом link напрямую, а не через SetAdditionalCSS или Asset - файл выпадает из автооптимизации и кэша ресурсов.
- Меню и хлебные крошки прописаны статичным html вместо компонентов bitrix:menu и bitrix:breadcrumb - при любом изменении структуры разделов приходится редактировать шаблон руками.
Если шаблон уже отдан заказчику и правки в header.php и footer.php нужно вносить регулярно - под новые разделы, под смену дизайна шапки, под доработки верстки - удобнее держать это на отдельной техподдержке сайта, чем каждый раз заново разбираться в чужой структуре шаблона с нуля.
1С-Битрикс и PHP регулярно обновляются, поэтому перед внедрением я сверяюсь с актуальной документацией.
Частые вопросы
Где хранятся файлы шаблона на сервере
В актуальных проектах - в /local/templates/имя_шаблона/, в старых установках Битрикса - в bitrix/templates/. Для кастомной верстки работаю в local, чтобы обновление ядра и модулей не затронуло файлы шаблона при накатке обновлений.
Можно ли использовать один шаблон для десктопа и мобильной версии
Да, через адаптивную верстку с медиазапросами в одном style.css - в большинстве проектов это проще в поддержке, чем два отдельных шаблона с условием выбора по User-Agent. Отдельный мобильный шаблон имеет смысл, только если мобильная версия сильно отличается по структуре разметки, а не только по стилям.
Что делать, если после правки header.php сайт выдаёт белый экран
В девяти случаях из десяти это синтаксическая ошибка PHP - пропущенная скобка или точка с запятой. На тестовом окружении включаю отображение ошибок и смотрю в error_log сервера, там всегда видна строка с проблемой. На боевом сайте лучше сразу так не делать, а проверять правки на тестовой копии.
Почему стили из style.css не подтягиваются на странице
Чаще всего файл подключен не через SetAdditionalCSS или Asset, а забыт вовсе, либо путь прописан без SITE_TEMPLATE_PATH и указывает не туда после переноса шаблона. Второй частый случай - подключение попало не в header.php, который выполняется на каждой странице, а в конкретный компонент, который выводится не везде.