В этой статье мы с вами рассмотрим все особенности создания шаблона для Битрикса с нуля. Не важно, есть у вас готовая верстка, или вы просто перфекционист, которому только дай что-нибудь написать самому без посредников 🙂
Какие файлы нужны для создания шаблона
Внешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 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();?> – пишем эту строку, чтобы файл нельзя было вызвать напрямую из браузера и он не начал выполняться;
<?$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>
Зачем нам динамический путь к шаблону спросите вы?
- нам не нужно запоминать имена всех шаблона и помнить в каком именно мы сейчас шаблоне работаем
- если мы поменяем имя шаблона, нам не нужно будет искать в файле это имя и исправлять на новое
- легко запомнить
Думаю, тут сплошные плюсы. Ну хорошо, это что касается 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/
Здравствуйте, Дмитрий.
Хочу поблагодарить Вас за интересную статью. Я сам столкнулся с битриксом при разработке сайта. Ваша информация ускорила выполнение работы. Пишите еще !!!
Спасибо вам за отзыв 🙂 Ждите продолжения, впереди много интересного 🙂
Дмитрий! Здорово что вот так можно найти опыт знающего человека в сети ! Дайте знать если заинтересованы в разработке шаблона на Битриксе.
Спасибо, заходите к нам еще 🙂
Добрый день, в начале пропустили слово “Настройки продукта”,
Администрирование > Настройки > “Настройки продукта” > Сайты > Шаблоны сайтов > Добавить шаблон
Добрый день, спасибо, поправил 🙂
Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.
Где узнать про шаблоны битрикс это