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

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

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

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

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

Создать шаблон можно 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();?>** — пишем эту строку, чтобы файл нельзя было вызвать напрямую из браузера и он не начал выполняться;

ShowTitle()?> — показываем текущий title для страницы;
ShowHead()?> — показываем keywords, description и все скрипты;
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>

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

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

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

Если это дополнительный файл со стилями и находится в папке 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С-Битрикс.

Источник: http://forwww.com/bitrix-how-to-create-template/

⤧ Next post Как использовать arFilter, в Битрикс API ⤧ Previous post Как получить путь к изображению в 1C-Битрикс