Как интегрировать вёрстку в 1С-Битрикс

Интеграция вёрстки в 1С-Битрикс — это перенос готовых HTML-макетов в шаблон сайта так, чтобы статичные страницы стали управляемыми через административную панель. Задача решается в несколько этапов: подготовка файлов вёрстки, создание структуры шаблона, подключение стилей и скриптов, вынос повторяющихся блоков в включаемые области и замена статичного контента компонентами.

Типичная ошибка новичков — попытка «натянуть» вёрстку за один проход, сразу вставляя весь HTML в header.php и footer.php. Такой подход приводит к дублированию кода, конфликтам путей к ресурсам и невозможности редактировать контент из админки. Правильная последовательность — сначала каркас шаблона, затем ресурсы, затем области и только потом компоненты.

Перед началом работы убедитесь, что у вас есть: доступ к файловой структуре сайта (через FTP, SSH или файловый менеджер Битрикса), права администратора в панели управления и исходники вёрстки — HTML-файлы, CSS, JavaScript, шрифты и изображения. Все действия безопаснее выполнять на копии сайта или тестовом поддомене.

Подготовьте вёрстку и файловую структуру шаблона

Шаблоны Битрикса хранятся в директории /bitrix/templates/ или, что предпочтительнее, в /local/templates/ — папка local не затрагивается при обновлениях ядра. Создайте папку с именем шаблона, например /local/templates/main/, и разместите в ней базовые файлы: header.php (верхняя часть страницы), footer.php (нижняя часть) и description.php (название и описание шаблона для админки).

Ресурсы вёрстки — CSS, JS, изображения, шрифты — разложите по подпапкам внутри шаблона: /local/templates/main/css/, /js/, /images/, /fonts/. Не оставляйте ресурсы в корне сайта или в папке upload: при смене шаблона или очистке кеша ссылки могут сломаться. Проверьте, что в HTML нет абсолютных путей вида /Users/designer/Desktop/... — такое встречается в экспортированных макетах.

1. 1
   Создайте папку /local/templates/main/ с файлами header.php, footer.php, description.php
2. 2
   Скопируйте CSS, JS, изображения и шрифты в подпапки шаблона
3. 3
   В админке (Настройки → Сайты → Шаблоны) назначьте новый шаблон сайту
4. 4
   Откройте главную страницу и убедитесь, что каркас отображается без ошибок

Разбейте HTML на header.php и footer.php

Откройте главный HTML-файл вёрстки и найдите точку, где заканчивается повторяющаяся «шапка» (doctype, head, открывающий body, верхнее меню) и начинается уникальный контент страницы. Всё до этой точки переносится в header.php, всё после закрытия контента — в footer.php. Между ними Битрикс подставит содержимое конкретной страницы.

В header.php обязательно сохраните служебные вызовы ядра. В начале файла — подключение пролога, внутри head — вывод метаданных и панели администратора. Минимальный каркас выглядит так:

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>




<?$APPLICATION->ShowPanel();?>

Обратите внимание: если убрать вызов ShowHead(), перестанут выводиться метатеги, Open Graph-разметка и подключаемые модулями скрипты — это сломает SEO и работу многих компонентов. Если убрать ShowPanel(), администраторы потеряют панель быстрого редактирования на публичной части.

Подключите стили и скрипты через API Битрикса

Строки link и script из вёрстки не копируйте в шаблон как есть. Битрикс предоставляет методы для подключения ресурсов, которые корректно работают с кешированием и объединением файлов: SetAdditionalCSS() для стилей и AddHeadScript() для скриптов в head, AddJS() — для скриптов, которые можно выводить перед закрывающим body.

<?
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/normalize.css");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/main.css");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH."/js/vendor.js");
Asset::getInstance()->addString("");
?>

Константа SITE_TEMPLATE_PATH автоматически содержит путь к текущему шаблону — используйте её вместо жёстко прописанных путей, чтобы шаблон можно было переименовать или скопировать. Проверьте результат: откройте исходный код страницы и убедитесь, что стили и скрипты загружаются с кодом ответа 200, а в консоли браузера нет ошибок 404.

Вынесите редактируемые блоки во включаемые области

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

Для телефона в шапке типичный вариант — область из файла сайта. В шаблоне вместо статичного HTML вставьте вызов компонента, а само содержимое сохраните в файл /include/phone.php в корне сайта. После этого блок станет редактируемым прямо на странице в режиме правки, без доступа к коду.

<?$APPLICATION->IncludeComponent("bitrix:main.include","",array(
  "AREA_FILE_SHOW" => "file",
  "PATH" => "/include/phone.php",
  "EDIT_TEMPLATE" => ""
),false);?>

Не превращайте во включаемые области всё подряд. Каждая область — это отдельный файл и дополнительный запрос при генерации страницы. Разумный критерий: блок выносится в область, если его правит человек без навыков HTML или если он повторяется на многих страницах с одинаковым содержимым.

Замените статичный контент компонентами

Главная ценность интеграции — динамический контент. Статичные блоки вёрстки (список новостей, каталог товаров, слайдер, меню) заменяются стандартными или кастомизированными компонентами Битрикса. Типовое соответствие: меню — bitrix:menu, лента новостей — bitrix:news.list, детальная страница и разделы — комплексный bitrix:news, каталог — bitrix:catalog.

Чтобы компонент выводил данные в дизайне вашей вёрстки, создайте кастомный шаблон компонента. Скопируйте шаблон .default в папку своего шаблона сайта (например, /local/templates/main/components/bitrix/news.list/main_slider/) и перепишите template.php, перенеся туда HTML-разметку из вёрстки, а динамические значения подставляя из массива $arResult.

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

Проверьте результат и производительность

После интеграции пройдите по контрольному списку: все страницы открываются без ошибок PHP, стили и скрипты загружаются, контент редактируется из админки, компоненты выводят реальные данные. Особое внимание уделите страницам 404, результатам поиска и формам — их часто забывают сверстать и интегрировать.

Производительность проверяйте встроенным монитором (Настройки → Производительность → Панель производительности). Типичные проблемы после интеграции: неоптимизированные изображения большого веса, подключение нескольких версий jQuery (вёрстка приносит свою, Битрикс подключает свою), отсутствие кеширования у компонентов. Включите кеширование компонентов и проверьте, что в настройках главного модуля активно объединение CSS и JS.

Типичные ошибки при интеграции

Большинство проблем при интеграции вёрстки повторяются от проекта к проекту. Знание типовых сценариев экономит часы отладки.

Отдельный класс проблем — кодировка файлов. Битрикс работает в UTF-8, а вёрстка иногда приходит в windows-1251. Смешение кодировок даёт «кракозябры» в самых неожиданных местах. Перед интеграцией приведите все файлы к UTF-8 без BOM и проверьте настройки сайта в админке.

Частые вопросы