Как добавить шаблон в 1С Битрикс: пошаговая инструкция

Управление внешним видом веб-ресурса на платформе 1С-Битрикс требует понимания структуры шаблонов сайта. Это фундаментальный элемент, отвечающий за отображение заголовков, меню, подвалов и общих стилей на всех страницах. Правильная настройка визуальной составляющей напрямую влияет на конверсию и удобство использования портала конечными пользователями.

Процесс добавления нового макета оформления может показаться сложным для новичков, но на самом деле он строго регламентирован в ядре системы. Вам предстоит работать с файловой структурой сервера и административным интерфейсом, чтобы интегрировать готовые HTML-верстки в логику работы CMS. Без этой процедуры невозможно запустить уникальный дизайн, отличный от стандартных решений «по умолчанию».

В этой статье мы детально разберем все этапы внедрения визуальной темы, от подготовки файлов до активации настроек. Вы узнаете, где хранить компоненты, как прописывать пути к стилям и какие настройки обязательны для корректной работы шапки и подвала сайта на всех страницах.

Подготовка файловой структуры шаблона

Перед тем как система сможет распознать новый макет, необходимо создать для него соответствующую директорию на сервере. Все файлы шаблонов в Bitrix Site Manager хранятся в строго определенном месте, нарушение этой иерархии приведет к тому, что система просто не увидит вашу тему. Стандартный путь выглядит как /bitrix/templates/, куда и следует помещать новые папки.

Создайте новую папку с уникальным именем, используя латинские буквы и нижние подчеркивания. Например, my_new_design или corporat_2026. Внутри этой директории должны находиться основные файлы, которые будут формировать каркас каждой страницы. Минимальный набор включает в себя файл заголовка, файл подвала и основной файл вывода контента.

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

Аналогичным образом создается файл footer.php. Он замыкает HTML-структуру, содержит закрывающие теги </body> и </html>, а также скрипты, которые должны загружаться в конце документа для ускорения отрисовки. Разделение на эти два файла позволяет избежать дублирования кода и упрощает поддержку проекта.

⚠️ Внимание: Никогда не используйте пробелы или кириллицу в названиях папок шаблонов. Это может вызвать критические ошибки при обращении к ресурсам по URL и нарушить работу механизма кеширования компонентов.

💡

Используйте префикс сайта перед именем папки, если у вас мультиязычный проект, например site1_my_template, чтобы четко разделять темы для разных языковых версий.

Создание файла описания и иконки

Чтобы новый шаблон появился в списке доступных для выбора в административной панели, ему необходимо присвоить человеческое название и описание. Для этого в корневой папке вашего шаблона создается специальный файл description.php. Без него система будет игнорировать директорию при формировании списка тем оформления.

Внутри файла description.php должен быть размещен PHP-массив с ключевыми параметрами. Основные поля — это Name (название, которое увидит администратор) и Description (краткая суть дизайна). Также можно указать автора разработки или версию макета, что полезно для ведения внутренней документации проекта.

Для наглядности в интерфейсе управления сайтом часто добавляют превью. Создайте изображение с названием preview.jpg или preview.png и положите его в ту же папку. Рекомендуемый размер картинки обычно составляет около 300x200 пикселей, чтобы она корректно отображалась в карточке выбора шаблона.

Пример содержимого файла описания:

<?php
$arTemplate = array(
"NAME" => "Корпоративный портал 2.0",
"DESCRIPTION" => "Современный адаптивный шаблон с темной темой",
"SORT" => 100,
);
?>

Поле SORT определяет порядок отображения шаблонов в выпадающем списке. Чем меньше число, тем выше будет располагаться тема. Это удобно, если у вас подключено множество различных макетов для разных разделов сайта или лендингов.

☑️ Проверка файлов шаблона

Создана папка в /bitrix/templates/Есть файл header.phpЕсть файл footer.phpСоздан description.phpДобавлено превью preview.jpg

Выполнено: 0 / 5

Подключение стилей и скриптов

Одной из самых частых ошибок при переносе верстки является неправильное подключение CSS и JavaScript файлов. В среде 1С-Битрикс не рекомендуется использовать жесткие пути или теги <link> напрямую в HTML-коде шаблона. Вместо этого следует применять встроенные функции ядра для корректного управления ресурсами.

Для подключения таблиц стилей используется метод CJSCore::Init или прямое добавление через глобальный объект $APPLICATION. Это позволяет системе учитывать зависимости, объединять файлы для ускорения загрузки и корректно работать с режимом композита. Размещать вызовы подключения лучше всего в файле header.php.

Если ваши стили лежат в папке шаблона, путь к ним формируется динамически. Используйте конструкцию $templateFolder, которая автоматически подставляет актуальный путь к текущей активной теме. Это гарантирует, что стили подгрузятся даже если вы решите переименовать папку шаблона в будущем.

Пример правильного подключения файла стилей:

<?php
$APPLICATION->SetAdditionalCSS($templateFolder . "/styles/main.css");
$APPLICATION->AddHeadScript($templateFolder . "/scripts/app.js");
?>

Такой подход обеспечивает гибкость. Если вы клонируете шаблон или переносите сайт на другой домен, все пути к ресурсам останутся рабочими без необходимости ручной правки кода в каждом файле.

⚠️ Внимание: Не подключайте тяжелые JS-библиотеки в шапке сайта, если они не нужны для первичной отрисовки. Переместите их подключение в footer.php или используйте параметр загрузки в конце документа, чтобы не блокировать рендеринг страницы.

Настройка областей редактирования

Главное преимущество CMS перед статичными сайтами — возможность редактировать контент без доступа к коду. Чтобы реализовать это в шаблоне, необходимо разметить специальные области, которые будут доступны для изменения через визуальный редактор. Делается это с помощью функции $APPLICATION->ShowViewContent() или стандартных зон редактирования.

Чаще всего в шапке сайта требуется возможность менять контактный телефон, адрес или социальные ссылки. Для этого в файле header.php в нужном месте вставляется вызов функции. Администратор сможет кликнуть на эту область в режиме правки и изменить текст, который сохранится в базе данных.

Аналогично настраивается подвал сайта. В footer.php можно выделить места для копирайта, меню информационных ссылок или счетчиков аналитики. Важно не переусердствовать и не делать редактируемыми технические элементы, изменение которых может сломать верстку.

Для сложных структур, таких как баннеры или слайдеры на главной, часто используют включаемые области. Это отдельные PHP-файлы, которые подключаются в шаблон. Их содержимое также можно редактировать через админку, если настроить соответствующие права доступа и параметры.

Как сделать область редактируемой?

Используйте функцию \$APPLICATION->ShowViewContent('area_name') в шаблоне и заполните содержимое через меню Контент -> Включаемые области в административной панели.

Активация шаблона для сайта

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

Вам необходимо перейти в меню Настройки и выбрать пункт Настройки продукта, затем Сайты и Список сайтов. В таблице со списком найдите нужный сайт (обычно это s1) и нажмите на иконку редактирования параметров. В открывшейся форме найдите поле «Шаблон сайта».

В выпадающем списке выберите название, которое вы указали в файле description.php. Если вы не видите свой шаблон в списке, проверьте права доступа к папке и синтаксические ошибки в PHP-файлах описания. После выбора сохраните изменения.

Параметр	Значение по умолчанию	Рекомендуемое действие
Шаблон сайта	bitrix_default	Выбрать созданный шаблон
Кодировка	UTF-8	Оставить без изменений
Доммен сайта	...	Проверить соответствие
Папка сайта	/	Обычно корень

Иногда требуется настроить шаблон не для всего сайта целиком, а только для определенных разделов. В настройках каждого раздела есть вкладка «Дополнительно», где можно переопределить глобальный шаблон. Это полезно для создания лендингов с уникальным дизайном, отличным от основного портала.

💡

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

Диагностика и устранение ошибок

В процессе разработки и подключения макета могут возникнуть ситуации, когда сайт отображается некорректно или выдает ошибки. Чаще всего проблемы связаны с путями к файлам или конфликтами JavaScript библиотек. Первым делом всегда проверяйте лог ошибок PHP и консоль браузера.

Если шапка или подвал не подгружаются, убедитесь, что в основном файле контента (обычно index.php или файл компонента) есть вызовы require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); и аналогичный для футера. Без этих строк система не знает, где брать обрамление для контента.

При проблемах со стилями проверьте права доступа к файлам на сервере. Файлы должны быть доступны для чтения веб-сервером. Также убедитесь, что в путях к CSS нет опечаток и что сами файлы не пусты. Используйте инструменты разработчика в браузере (F12), чтобы увидеть, какие ресурсы не загрузились (ошибка 404).

🔍 Проверьте синтаксис PHP в файлах header.php и footer.php на наличие незакрытых тегов.
🗑️ Очистите кеш сайта через панель администратора: Настройки -> Инструменты -> Кеш сайта.
📂 Убедитесь, что папка шаблона находится именно в /bitrix/templates/, а не в /local/templates/ (если не настроено иное).

Если вы вносили изменения в код шаблона, а на сайте они не отображаются, скорее всего сработал механизм автокеширования HTML-страниц. Принудительная очистка кеша решает 90% таких проблем. Также стоит проверить, не включен ли режим «Отложенная загрузка» для скриптов, который может конфликтовать с вашим кодом.

Почему мой шаблон не появляется в списке при создании сайта?

Убедитесь, что файл description.php находится в корне папки шаблона, не содержит ошибок синтаксиса и массив $arTemplate заполнен корректно. Также проверьте права на чтение файла.

Можно ли использовать Bootstrap в шаблоне Битрикс?

Да, вы можете подключать любые CSS-фреймворки, включая Bootstrap, Tailwind или Bulma. Главное — правильно указать пути к файлам через методы $APPLICATION или в HTML-коде шапки.

Как сделать адаптивную верстку в шаблоне?

Адаптивность реализуется стандартными средствами CSS (media queries) внутри ваших файлов стилей. Битрикс не накладывает ограничений на использование flexbox, grid или других современных технологий верстки.

Где хранятся настройки цветов и шрифтов шаблона?

Если шаблон поддерживает параметры настройки (тема 2.0), они хранятся в файле styles.css с переменными или в отдельном файле настроек, который редактируется через визуальный конфигуратор в админке.

Что делать, если после включения шаблона сайт стал белым?

Включите режим отладки в файле php.ini или bitrix/.settings.php, чтобы увидеть текст ошибки. Скорее всего, в коде шаблона есть фатальная ошибка PHP, прерывающая выполнение скрипта.

Как добавить шаблон в 1С Битрикс: полное руководство