Как создать шаблон в 1с битрикс

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

Первый шаг – подготовка необходимых файлов: header.php, footer.php, template.php. Они отвечают за шапку, подвал и основное содержимое страницы. Следует разместить эти файлы в папке шаблона, соблюдая структуру каталога /bitrix/templates/название_шаблона/. Важно соблюдать кодировку UTF-8 без BOM для корректного отображения текста.

Для подключения стилей и скриптов применяйте метод Asset::getInstance()->addCss() и addJs() в файле header.php. Это позволит централизованно управлять ресурсами и обеспечит правильную загрузку в браузере. Использование стандартных API 1С Битрикс гарантирует совместимость и производительность.

Подготовка рабочего пространства для создания шаблона

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

Установите локальный веб-сервер. Рекомендуемые варианты: Open Server, XAMPP или Docker с конфигурацией Apache + PHP 7.4+ + MySQL.
Создайте отдельный виртуальный хост. Укажите корневой каталог сайта – папку /bitrix или / в зависимости от структуры.
Установите чистую копию 1С-Битрикс (редакция «Старт» или выше). Проверьте доступ к административной панели.
Создайте директорию шаблона в /bitrix/templates/. Имя папки должно быть уникальным и содержать только латинские символы и цифры.
Скопируйте в неё файлы базового шаблона или создайте минимум: header.php, footer.php, style.css, description.php.
В файле description.php задайте массив с названием шаблона и автором, чтобы он отображался в административной панели.
Отключите кеширование в /bitrix/.settings.php для ускорения разработки. Установите 'cache_flags' => ['config' => false].
Убедитесь, что включена отладка: в php.ini установите display_errors = On и error_reporting = E_ALL.
Создайте структуру разделов: папки для CSS, JS и изображений. Например: /bitrix/templates/your_template/css/.

После подготовки среды можно переходить к верстке и подключению шаблона через административную панель в разделе «Настройки» → «Шаблоны сайта».

Создание структуры папок и файлов шаблона

Шаблон сайта в 1С-Битрикс размещается в директории /bitrix/templates/. Для создания нового шаблона необходимо вручную создать отдельную папку с уникальным названием, например my_site_template.

Внутри папки шаблона создаются следующие обязательные файлы:

description.php – содержит описание шаблона, возвращающее массив с ключами 'NAME', 'DESCRIPTION', 'SORT', 'TYPE'.

style.css – основной CSS-файл, подключаемый автоматически. В первой строке обязательно указывается комментарий вида /* Template Name */, чтобы Битрикс корректно распознал шаблон.

header.php и footer.php – включаемые области, которые оборачивают контент сайта. В header.php размещаются теги <html>, <head>, начало <body> и вызов $APPLICATION->ShowHead(). В footer.php – закрывающие теги </body> и </html>.

template.php – основной файл, в который Битрикс подставляет содержимое компонентов и включаемых областей.

Рекомендуется также создать подкаталоги:

/css/ – для дополнительных таблиц стилей;

/js/ – для JavaScript-файлов;

/images/ – для графических элементов интерфейса.

Если планируется адаптивная верстка, целесообразно использовать meta viewport в header.php и подключать медиа-запросы в style.css.

После создания структуры шаблон можно выбрать в настройках сайта или подключить программно через метод SetTemplate() объекта $APPLICATION.

Настройка файла style.css для шаблона

Файл style.css размещается в директории шаблона: /bitrix/templates/имя_шаблона/styles.css или /style.css внутри той же директории. Этот файл отвечает за оформление всех элементов шаблона и загружается через файл header.php с помощью функции $APPLICATION->SetAdditionalCSS().

Рекомендуется начинать с нормализации стилей. Подключите Reset или Normalize внутри style.css, либо вставьте минимальный набор обнуляющих правил вручную. Например:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Используйте уникальные селекторы, исключающие конфликт с системными стилями Битрикс. Пример: .my-template-header вместо просто header. Это предотвращает переопределение глобальных стилей административной панели и модулей.

Для подключения шрифтов используйте относительные пути, если шрифты хранятся в папке шаблона. Пример:

@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

Разбейте стили по блокам: заголовок, меню, контент, подвал. Комментируйте разделы для удобства поддержки:

/* === HEADER === */
.my-template-header {
background-color: #f5f5f5;
padding: 20px;
}

Используйте переменные через препроцессор (например, SCSS), если проект предполагает сборку. Для статических шаблонов возможна реализация через CSS-переменные:

:root {
--primary-color: #3366cc;
}
.my-template-button {
background-color: var(--primary-color);
}

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

После каждого изменения стилей очищайте кеш в админке: Настройки → Производительность → Управление кешем, иначе правки не применятся.

Создание и подключение файла шаблона header.php

Минимальный пример содержимого header.php:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
IncludeTemplateLangFile(__FILE__);
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title><?$APPLICATION->ShowTitle()?></title>
<?$APPLICATION->ShowHead()?>
</head>
<body>
<div id="panel"><?$APPLICATION->ShowPanel()?></div>
<header>
<div class="logo"><a href="/">Главная</a></div>
<nav>
<?$APPLICATION->IncludeComponent(
"bitrix:menu",
"top",
array(
"ROOT_MENU_TYPE" => "top",
"MAX_LEVEL" => "1",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "3600"
),
false
);?>
</nav>
</header>

Чтобы шаблон начал использоваться, в административной панели перейдите в Настройки → Сайты → Шаблоны сайтов. Добавьте правило с условием php self::GetCurDir() == '/' или другим, соответствующим вашим требованиям, и укажите имя созданного шаблона.

Проверьте подключение шаблона на главной или внутренней странице. При корректной настройке header.php будет автоматически подставляться перед контентом каждого компонента, использующего вызов $APPLICATION->IncludeComponent().

Разработка файла шаблона footer.php с подключением скриптов

Файл footer.php закрывает структуру HTML-документа и содержит подключение JavaScript-скриптов. Его расположение – /bitrix/templates/имя_шаблона/footer.php.

Перед закрывающим тегом </body> вставляют вызов функции ShowHeadScripts() и подключение пользовательских скриптов. Пример структуры:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
?>
</div><!-- Закрытие обёртки контента -->
<?$APPLICATION->ShowViewContent("footer_before");?>
<footer>
<div class="footer-content">
<p>© <?=date("Y")?> Компания «Название»</p>
</div>
</footer>
<?$APPLICATION->ShowHeadScripts();?>
<?$APPLICATION->ShowBodyScripts();?>
<script src="/local/templates/имя_шаблона/js/main.js"></script>
</body>
</html>

Пользовательские скрипты подключаются после вызовов API, чтобы исключить конфликт при загрузке. Убедитесь, что пути к скриптам относительные и не содержат домена, чтобы избежать проблем на разных окружениях (дев, прод).

Файл main.js должен быть минимизирован и объединён, если используется несколько скриптов. Это снижает количество HTTP-запросов и ускоряет загрузку страницы.

Рекомендуется использовать $APPLICATION->AddHeadScript() в header.php для скриптов, требующих загрузки в <head>, а не в footer.php.

Добавление области контента в шаблон с помощью include

Для подключения области контента в шаблоне 1С-Битрикс используется функция IncludeFile(). Этот подход позволяет вынести повторяющиеся части верстки в отдельные файлы, упрощая поддержку шаблона.

Создайте директорию /include/ в корне сайта, если она отсутствует. Внутри нее создайте файл, например, main_text.php. В этом файле размещается HTML-код или PHP-логика, предназначенные для вставки:

<div class="main-text">
<h1>Добро пожаловать на сайт</h1>
<p>Этот текст можно редактировать через визуальный редактор в административной части.</p>
</div>

В шаблоне сайта (обычно это /bitrix/templates/имя_шаблона/header.php или footer.php) вставьте следующий код:

<?$APPLICATION->IncludeFile(
SITE_DIR."include/main_text.php",
array(),
array("MODE" => "html")
);?>

Параметр «MODE» определяет режим редактирования области через визуальный интерфейс. Допустимые значения: html, php, text. Для стандартного контента предпочтительно использовать html.

Файл можно редактировать через административную панель: Контент → Файлы и папки → /include/. Это позволяет менять содержимое без доступа к FTP или коду шаблона.

Использование IncludeFile() обеспечивает централизованное управление участками шаблона и ускоряет внедрение изменений на всех страницах.

Подключение и настройка компонентов 1С Битрикс в шаблоне

Для подключения компонентов в шаблоне 1С Битрикс используется функция $APPLICATION->IncludeComponent. Размещение компонента осуществляется напрямую в файле шаблона – чаще всего это header.php, footer.php, template.php или index.php.

Откройте файл шаблона, куда необходимо вставить компонент.

Вставьте вызов компонента. Пример подключения новостного компонента:


$APPLICATION->IncludeComponent(
"bitrix:news.list",
"custom_template",
array(
"IBLOCK_TYPE" => "content",
"IBLOCK_ID" => "5",
"NEWS_COUNT" => "3",
"SORT_BY1" => "ACTIVE_FROM",
"SORT_ORDER1" => "DESC",
"FILTER_NAME" => "",
"PROPERTY_CODE" => array("AUTHOR", "DATE"),
"CACHE_TYPE" => "A",
"CACHE_TIME" => "36000000",
"SET_TITLE" => "N"
),
false
);

Создайте шаблон компонента:
- Перейдите в /local/templates/ваш_шаблон/components/bitrix/имя_компонента/имя_шаблона/.
- Скопируйте шаблон из /bitrix/components/bitrix/имя_компонента/templates/.default/.
Для передачи данных из шаблона сайта в компонент используйте глобальные переменные или параметры компонента через массив $arParams.

При использовании нескольких компонентов следите за уникальностью FILTER_NAME, чтобы избежать конфликтов.
Компоненты могут быть вложенными. Оборачивайте вызовы во вспомогательные <div> для управления стилями.
Используйте CMain::SetTitle и $APPLICATION->SetPageProperty внутри шаблона компонента для SEO-настройки.

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

Тестирование и отладка созданного шаблона на сайте

После подключения шаблона необходимо активировать его для тестового сайта или конкретной страницы через административную панель: «Настройки» → «Настройки продукта» → «Сайты» → «Шаблоны сайта». Назначьте созданный шаблон в разделе условий отображения.

Откройте страницу в режиме инкогнито и проверьте корректность отображения элементов: шапки, футера, навигации, контентных блоков. Особое внимание уделите адаптивности – используйте инструменты разработчика в браузере (F12) для эмуляции различных разрешений экрана.

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

Просмотрите лог ошибок Bitrix: /bitrix/php_interface/dbconn.php и /bitrix/.settings.php могут содержать сведения о неправильно подключённых компонентах. Используйте модуль «Проактивная защита» для анализа потенциальных уязвимостей шаблона.

Проверьте кеширование. Очистите кеш через административную панель: «Настройки» → «Инструменты» → «Очистка кеша». Изменения в шаблоне могут не применяться из-за устаревших кешированных данных.

Для анализа производительности шаблона активируйте панель производительности: «Настройки» → «Производительность» → «Панель производительности». Следите за временем генерации страницы, количеством SQL-запросов и объёмом загружаемых ресурсов.

Вопрос-ответ:

Какой файл нужно редактировать, чтобы изменить внешний вид шаблона в 1С Битрикс?

Основной файл, отвечающий за внешний вид шаблона, — это `header.php`, который содержит верхнюю часть сайта, а также `footer.php` — нижнюю. Между ними размещаются шаблоны компонентов и основное содержимое (`template.php`). Все эти файлы находятся в папке шаблона по пути: `/bitrix/templates/название_шаблона/`. При работе с ними стоит учитывать, что структура может немного отличаться в зависимости от версии и типа шаблона.

Можно ли создать свой шаблон без копирования существующего?

Да, можно создать шаблон «с нуля». Для этого нужно в папке `/bitrix/templates/` создать новую директорию с уникальным названием. Внутри неё необходимо разместить обязательные файлы: `description.php` (описание шаблона), `header.php`, `footer.php` и `styles.css`. Также желательно сразу добавить файл `template_styles.css` и подключить нужные компоненты. После этого шаблон можно выбрать в настройках сайта в административной части.

Как назначить новый шаблон для определенного сайта в многосайтовой конфигурации?

В многосайтовой конфигурации шаблон можно назначить для каждого сайта отдельно. Это делается через административную панель: перейдите в раздел «Настройки» → «Настройки продукта» → «Сites» → выберите нужный сайт и в поле «Шаблон сайта» укажите созданный шаблон. Можно также задать условия отображения шаблона в зависимости от URL или других параметров, указав соответствующее условие в поле «Условие».

Что будет, если в шаблоне отсутствует файл `description.php`?

Если файл `description.php` отсутствует, шаблон всё равно будет работать, но в административной части он будет отображаться без названия и описания. Это может затруднить выбор шаблона, особенно при наличии нескольких. Поэтому желательно этот файл создать и указать в нём хотя бы минимальную информацию: название и описание шаблона, авторство и версию.

Можно ли использовать сторонние CSS-фреймворки, такие как Bootstrap, при создании шаблона?

Да, использование сторонних CSS-фреймворков допустимо. Их можно подключить в `header.php` либо через `styles.css`. Однако стоит учитывать, что некоторые компоненты Битрикс могут конфликтовать с сеткой или классами фреймворка, поэтому при интеграции потребуется аккуратно настраивать стили и, возможно, переопределять стандартные классы. Также желательно минимизировать загрузку ненужных модулей, чтобы не перегружать страницу.