Как создать шаблон для сайта на 1С-Битрикс

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

Какие файлы нужны для создания шаблона

Внешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 1С-Битрикс путь к шаблону лежит через папку bitrix, в которой есть папка templates и уже в ней список всех наших шаблонов.

Путь к шаблонам: /bitrix/templates/

Создать шаблон можно 3 способами:

  1. можно скопировать готовый шаблон и на его основе изменять под себя
  2. можно создать через админку пустой шаблон
  3. можно создать пустую папку и постепенно заполнять ее файлами и папками

Как вы поняли 3-ий вариант самый хардкорный 🙂 . Зайдем в админку, Администрирование > Настройки > Настройки продукта > Сайты > Шаблоны сайтов > Добавить шаблон.
ссылка относительно сайта: /bitrix/admin/template_admin.php?lang=ru

ID шаблона это по сути имя папки в которой он будет лежать, я назову development. Остальные поля заполните как удобнее, они сейчас не очень важны. В код шаблона добавьте следующий код:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title><?$APPLICATION->ShowTitle()?></title>
	<?$APPLICATION->ShowHead()?>
</head>
<body>
	<?$APPLICATION->ShowPanel();?>
	#WORK_AREA#
</body>
</html>

<?if (!defined(“B_PROLOG_INCLUDED”) || B_PROLOG_INCLUDED !== true) die();?> – пишем эту строку, чтобы файл нельзя было вызвать напрямую из браузера и он не начал выполняться;
<?$APPLICATION->ShowTitle()?> –
показываем текущий title для страницы;
<?$APPLICATION->ShowHead()?> – показываем keywords, description и все скрипты;
<?$APPLICATION->ShowPanel();?> – показываем панель для админов.

После сохранения шаблона, мой файл description.php, выглядит так:

<?
$arTemplate = array (
	'NAME' => 'Разработка',
	'DESCRIPTION' => 'шаблон для разработки',
	'SORT' => 1,
	'TYPE' => '',
);
?>

Отлично, у нас в корне должны остаться 5 файлов, остальное на данный момент мы не будем использовать:

  • description.php,
  • header.php,
  • footer.php,
  • styles.css,
  • template_styles.css

Та часть кода, которая находится до #WORK_AREA# в итоге записывается в header.php. Угадайте, какая часть записывается в footer.php 🙂 (та, что после нее). Сама ворк-арея представляет собой динамический контент (не всегда он такой уж и динамический), который находится, к примеру, в папке /contacts/ или /about/ в файле index.php. Сам файл обычно начинается подключением хедера и заканчивается подключением футера:

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
Text хир
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Пока что, все выглядит логично.

1С-Битрикс папки и структура нового шаблона

В документации есть несколько рекомендаций, которые лично мне не очень нравятся. Во-первых, они любят называть папку с изображениями images вместо сокращенного img. И, я конечно все понимаю, но когда вы пишите стили, вам в любом случае нужно ссылаться на изображения, зачем писать в 2 раза больше? 🙂 . Во-вторых, была такая рекомендация, хранить включаемые области в папке include_areas – почему бы не создать inc? В-третьих, зачем нам 2 файла со стилями? Если мне захочется вынести все в отдельный файл и подключать потом по необходимости, то эти стили будут хранится либо в шаблоне компонента, либо в папке css шаблона.

Если подытожить, наша правильная структура шаблона:

include_areas
images
components
js

Если быть немного бунтарем, то:

inc
img
components
js

Вас в принципе никто не ограничивает, это лишь рекомендации.

И вот мы плавно подошли к первой проблеме – хардкод. Хардкод это когда вы вместо динамических значений, например доменное имя, используете текстовую запись. Большинство начинающих разработчиков не знают про константу SITE_TEMPLATE_PATH, которая в качестве значения хранит путь к текущему шаблону – в нашем случае это /bitrix/templates/development (без слеша в конце, обратите внимание). И поэтому, когда вы будете подключать свои скрипты или включаемые области, для папки нужно писать:

<script src="<?=SITE_TEMPLATE_PATH?>/js/script.js"></script>

и уж точно НЕ НУЖНО ПИСАТЬ:

<script src="/bitrix/templates/development/js/script.js"></script>

Зачем нам динамический путь к шаблону спросите вы?

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

Думаю, тут сплошные плюсы. Ну хорошо, это что касается PHP файлов, в которых мы можем использовать константу. А как насчет картинок и стилей? В CSS стилях пишите относительные пути.
Если это дополнительный файл со стилями и находится в папке css (редкий случай):

url('../img/ico-menu.png');

если это styles.css или template_styles.css

url('img/ico-menu.png');

Никогда НЕ пишите вот так:

url('/bitrix/templates/development/img/ico-menu.png')

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

Какие изображения хранить не в шаблоне а в корневой папке images?

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

1С-Битрикс включаемые области для шаблона

Код подключения включаемой области очень простой. В случае если наша папка находится в корне:

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

Если в шаблоне, то:

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

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

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

Как выглядит по шагам Прототип -> Шаблон -> Готовый сайт, вы можете посмотреть на моем сайте портфолио:
https://forwww.ru/portfolio/vash-proekt/

Если вам необходимо создать сайт на 1С-Битрикс, доработать функционал на уже созданном проекте, или просто сверстать макет по шаблону Фотошоп или Figma, обращайтесь, буду рад помочь

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

8 коментаря

  1. Здравствуйте, Дмитрий.

    Хочу поблагодарить Вас за интересную статью. Я сам столкнулся с битриксом при разработке сайта. Ваша информация ускорила выполнение работы. Пишите еще !!!

  2. Дмитрий! Здорово что вот так можно найти опыт знающего человека в сети ! Дайте знать если заинтересованы в разработке шаблона на Битриксе.

  3. Добрый день, в начале пропустили слово “Настройки продукта”,
    Администрирование > Настройки > “Настройки продукта” > Сайты > Шаблоны сайтов > Добавить шаблон

  4. Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.

Залишити коментар до Виктор Скасувати коментар