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

Категории

В Битриксе за организацию визуального отображения страниц отвечают шаблоны сайта. Основой для создания любого шаблона может служить следующий код:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
 <?IncludeTemplateLangFile(__FILE__);?>
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
 <head>
  <meta http-equiv="Content-Tipe" content="text/html"; charset="utf-8">
  <title><?$APPLICATION->ShowTitle()?></title>
  <?$APPLICATION->ShowHead();?>
 </head>
 <body>
  <div id="panel"><?$APPLICATION->ShowPanel();?></div>
 
  #WORK_AREA#

 </body>
 </html>

Предлагаю разобрать его более подробно:

// Проверяем, подключён ли 1С-Битрикс. Если вызвать страницу напрямую, например,
// вбив её URL в адресную строку, то без подключённого Битрикса будет выдана ошибка.
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

// Подключаем языковые файлы для скриптов лежащих в каталоге текущего шаблона сайта.
 <?IncludeTemplateLangFile(__FILE__);?>

// Выводим заголовок страницы (может быть взят из подключаемого компонента)
<?$APPLICATION->ShowTitle()?>

// Подключаем в шаблон мета-теги Content-Type, robots, description, keywords, стили CSS
<?$APPLICATION->ShowHead();?>

// Подключаем панель администратора
<?$APPLICATION->ShowPanel();?>

// Рабочая область - всё то, что входит в файл index.php раздела
#WORK_AREA#

На всякий случай распишу поэтапное внедрение нового шаблона.

Шаг 1. Создание раздела для шаблона

Если шаблон разрабатывается под новый раздел, то есть смысл задуматься о создании новой директории. Для этого переходим в режим "Администрирование", слева находим вкладку "Контент", выбираем пункт "Структура сайта" и его подпункт "Файлы и папки". Если на вашей версии Битрикс работает один сайт, то вы увидите список его папок, если же реализована многосайтовость, то сначала необходимо выбрать корневую папку нужного сайта. Затем, находим кнопку "+ Добавить" и выбираем пункт "Добавить папку".

В настройках необходимо указать название раздела (можно на русском) и имя папки (латиницей), обязательно ставим галку "Создать индексную страницу раздела". "Перейти к редактированию" галочку пока лучше снять.

Шаг 2. Создание шаблона

Теперь необходимо создать сам шаблон. Для этого переходим на страницу списка шаблонов:

/bitrix/admin/template_admin.php?lang=ru

Нажимаем кнопку "+ Добавить шаблон". Здесь необходимо вписать уникальный ID шаблона (обязательно латинскими буквами), указать название и описание шаблона. Чуть ниже есть поле "Внешний вид шаблона сайта", здесь указывается сам код шаблона (который можно спокойно взять из этой статьи).

Внимательный администратор сайта уже заметил наличие нескольких вкладок в окне редактирования шаблона. Перечислим их:

Шаблон - нетрудно догадаться, в этой вкладке пишется html разметка, php код, вызовы компонентов, подключение различных внешних файлов и т.д.
Стили сайта - вот здесь товарищ пишет, что в данном файле могут быть указаны стили, которые предполагается использовать в визуальном редакторе. Сам не использовал данную возможность, поэтому сказать ничего не могу о её работе.
Стили шаблона - здесь пишутся все css, относящиеся к разметке шаблона. Стоит отметить, что у различных компонентов (список новостей, детальная страница, теги, меню сайта и т.д.) есть собственные файлы style.css, где указываются стили конкретно под каждый компонент. Поэтому не рекомендую стили для компонентов хранить в общей куче со стилями шаблона.
Дополнительные файлы - можно подключать дополнительные файлы к данному шаблону.

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

Шаг 3. Привязка шаблона к разделу сайта

В левом меню административного раздела находим пункт "Настройки", в нем переходим "Настройки продукта" -> "Сайты" -> "Список сайтов".

/bitrix/admin/site_admin.php?lang=ru

Здесь выбираем нужный сайт (кликая по его ID), к которому привязываете шаблон. Внизу страницы выбираем созданный нами раньше шаблон, выбирает тип привязки (самый простой - "Для папки или файла") и указываем раздел, к которому привязать данный шаблон.