Система управления контентом 1С-Битрикс заслуженно считается одной из самых мощных и гибких платформ для создания веб-сайтов любой сложности. Одной из ключевых особенностей этой CMS является продуманная система шаблонов, которая позволяет полностью отделить визуальное представление сайта от его бизнес-логики и содержания. Это означает, что дизайнеры и верстальщики могут работать над внешним видом проекта, не вмешиваясь в работу программистов, отвечающих за функциональность.
Данное руководство предназначено для разработчиков, которые хотят не просто использовать готовые шаблоны, а понять их архитектуру изнутри и создавать собственные, идеально соответствующие требованиям конкретного проекта. Мы детально разберем весь процесс — от создания базовой структуры до наполнения ее функциональными элементами, рассмотрим лучшие практики и распространенные ошибки, которых следует избегать.
Основы архитектуры шаблона
Все шаблоны сайтов в Битрикс хранятся в директории /bitrix/templates/ или же в локальной папке /local/templates/ (рекомендуемый подход). Каждый шаблон представляет собой отдельную папку со своим уникальным именем внутри этой директории. Это имя является системным идентификатором вашего шаблона и используется платформой для его однозначного определения.
Минимальный набор файлов для функционирующего шаблона включает:
-
description.php— файл-описатель, содержащий метаданные шаблона (название, описание и другие параметры); -
header.php— верхняя часть всех страниц сайта (объявление DOCTYPE, секция<head>, открывающий тег<body>, шапка сайта); -
footer.php— нижняя часть всех страниц (подвал сайта, закрывающие теги</body></html>); -
styles.css— основной файл каскадных таблиц стилей; -
template_styles.css— дополнительный файл стилей, подключаемый системой автоматически; -
page_templates/— директория для хранения шаблонов отдельных типов страниц (опционально, но крайне полезно для сложных проектов).
Практическое создание шаблона через админ-панель
Давайте создадим наш первый шаблон, который назовем modern_layout.
-
В административной панели перейдите в раздел: Контент > Сайты > Шаблоны сайтов.
-
В списке шаблонов нажмите кнопку "Добавить шаблон" в верхней части страницы.
-
Заполните обязательные поля формы:
-
ID шаблона:
modern_layout(это имя станет идентификатором папки шаблона); -
Название:
Современный макет(удобочитаемое название, отображаемое в списке шаблонов); -
Описание:
Адаптивный шаблон для корпоративного сайта с современным дизайном.
-
-
В поле "Код шаблона" вставьте следующий базовый каркас:
<?php
// Защита от прямого обращения к файлу
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) {
die();
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?$APPLICATION->ShowTitle()?></title>
<?$APPLICATION->ShowHead()?>
</head>
<body>
<?$APPLICATION->ShowPanel(); // Отображение административной панели ?>
<div id="page-wrapper">
<!-- Область для уникального содержимого каждой страницы -->
#WORK_AREA#
</div>
</body>
</html>Детальный разбор ключевых элементов кода:
-
Проверка
B_PROLOG_INCLUDEDвыполняет роль защитного механизма, предотвращая прямое выполнение файла через адресную строку браузера, что обеспечивает безопасность системы. -
<?$APPLICATION->ShowTitle()?>— это место, где Битрикс автоматически подставляет заголовок (Title) текущей страницы, заданный в административном разделе. -
<?$APPLICATION->ShowHead()?>— критически важная функция, которая подключает все необходимые элементы в секцию<head>: мета-теги (keywords, description), скрипты (включая ядро Битрикс) и стили, требуемые для корректной работы компонентов. -
<?$APPLICATION->ShowPanel();?>— выводит административную панель управления для пользователей с соответствующими правами доступа. Это незаменимый инструмент во время разработки и наполнения сайта контентом. -
#WORK_AREA#— это специальный маркер-заполнитель. На его месте будет отображаться основное содержимое конкретной страницы (текст, компоненты, динамический контент).
После сохранения система автоматически разделит предоставленный код на два файла: header.php (все, что расположено до #WORK_AREA#) и footer.php (все, что после). Файл description.php будет автоматически заполнен на основе введенных вами данных.
<?php
// Файл /bitrix/templates/modern_layout/description.php
$arTemplate = array (
'NAME' => 'Современный макет',
'DESCRIPTION' => 'Адаптивный шаблон для корпоративного сайта с современным дизайном',
'SORT' => 100, // Порядок отображения в списке шаблонов
'TYPE' => '', // Тип шаблона
);
?>Оптимальная структура папок шаблона
Грамотно организованная структура директорий — фундамент для удобной поддержки и масштабирования проекта. Рекомендуется создать внутри папки modern_layout следующие директории:
-
css/— для дополнительных файлов стилей (например,plugins.css,fonts.css); -
js/— для JavaScript-файлов (main.js,components.js); -
images/— для всех изображений, используемых в шаблоне (иконки, фоновые изображения, логотипы); -
includes/— для включаемых областей (редактируемые блоки контента); -
components/— для кастомизированных шаблонов стандартных компонентов.
Критически важный момент: Используйте константу SITE_TEMPLATE_PATH. Она всегда содержит актуальный путь к текущему активному шаблону (например, /bitrix/templates/modern_layout). Это избавляет от "хардкода" и делает шаблон независимым от своего системного имени.
Правильный подход:
<script src="<?=SITE_TEMPLATE_PATH?>/js/main.js"></script>
<link rel="stylesheet" href="<?=SITE_TEMPLATE_PATH?>/css/plugins.css">
<img src="<?=SITE_TEMPLATE_PATH?>/images/logo.svg" alt="Логотип компании">Ошибочный подход (хардкод):
<script src="/bitrix/templates/modern_layout/js/main.js"></script>
<!-- При переименовании шаблона все подобные ссылки перестанут работать! -->
В CSS-файлах следует использовать относительные пути.
Пример в styles.css:
.header {
background: url('images/header-bg.jpg'); /* Путь относительно файла styles.css */
}
.hero-section {
background: url('../images/hero-bg.jpg'); /* Если стиль в css/plugins.css */
}Включаемые области — инструмент гибкого управления контентом
Включаемые области — это мощный механизм, позволяющий добавлять на статические страницы (главная, "О компании", "Контакты") редактируемые через визуальный редактор блоки контента.
Практический пример: Создание редактируемого блока контактной информации в подвале сайта.
-
Создайте файл включаемой области:
/ bitrix / templates / modern_layout/ includes / company_contacts.php -
Наполните его базовой HTML-разметкой:
<div class="company-contacts">
<p class="copyright">© <?=date('Y')?> Название Вашей Компании. Все права защищены.</p>
<p class="address">г. Москва, ул. Примерная, д. 1</p>
<p class="phone">Телефон: <a href="tel:+74951234567">+7 (495) 123-45-67</a></p>
</div>-
В соответствующем месте шаблона (например, в
footer.php) подключите эту область с помощью компонента:
<?php
$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
array(
"AREA_FILE_SHOW" => "file", // Режим отображения - из файла
"PATH" => SITE_TEMPLATE_PATH . "/includes/company_contacts.php", // Абсолютный путь к файлу
"EDIT_TEMPLATE" => "standard.php" // Шаблон для режима редактирования
)
);?>Теперь, когда администратор сайта активирует режим правки через панель Битрикс, он сможет кликнуть на этот блок и отредактировать его содержимое с помощью визуального редактора, не прибегая к изменению HTML-кода.
Принцип работы шаблона на примере типовой страницы
Рассмотрим, как система рендерит обычную страницу, например, /about/company.php.
-
Код страницы
/about/company.phptypically имеет следующую структуру:
<?
// Подключаем общий header (из нашего шаблона)
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
?>
<main class="content">
<h1 class="page-title"><?$APPLICATION->ShowTitle()?></h1>
<div class="text-block">
<p>Это страница "О компании". Ее уникальное содержимое...</p>
<!-- Здесь могут быть подключены комплексные компоненты -->
</div>
</main>
<?
// Подключаем общий footer (из нашего шаблона)
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");
?>-
При обращении к странице происходит следующее:
-
Выполняется код из
header.phpшаблона. Формируется начало HTML-документа. -
Выполняется код самой страницы
/about/company.php. Содержимое этого файла подставляется на место маркера#WORK_AREA#в шаблоне. -
Выполняется код из
footer.phpшаблона. Документ завершается.
-
Таким образом, шаблон задает единую обертку для всех страниц сайта, а каждая отдельная страница отвечает исключительно за свое уникальное содержимое.
Заключение
Создание собственного шаблона в 1С-Битрикс — это не просто техническая процедура, а творческий процесс проектирования архитектуры будущего сайта. Вы закладываете фундамент, на котором будет строиться весь последующий проект. В этом руководстве мы рассмотрели ключевые аспекты: создание каркаса, организацию оптимальной структуры, использование включаемых областей и принципы взаимодействия шаблона с системой.
Это отправная точка в освоении искусства разработки для Битрикс. Дальнейшее погружение откроет перед вами увлекательный мир компонентов, их шаблонов, комплексных страниц и оптимизации производительности. Однако с правильно созданным и хорошо организованным шаблоном все эти задачи становятся значительно проще и логичнее.
Успехов в освоении безграничных возможностей платформы 1С-Битрикс!
