Как создать шаблон для сайта на 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();?> — пишем эту строку, чтобы файл нельзя было вызвать напрямую из браузера и он не начал выполняться;
<?$APPLICATION->ShowTitle()?> —
показываем текущий title для страницы;
<?$APPLICATION->ShowHead()?> — показываем keywords, description и все скрипты;
<?$APPLICATION->ShowPanel();?> — показываем панель для админов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.

Предоставляю услуги по созданию проектов на CMS 1С-Битрикс - сайты, шаблоны и компоненты с нуля.

Другие виды работ:
  • Доработка функционала на уже существующих проектах
  • Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp)
  • Скрипты на PHP и JS (jQuery)

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

7 комментария

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *