Как создать шаблон для сайта на 1С-Битрикс
В этой статье мы с вами рассмотрим все особенности создания шаблона для Битрикса с нуля. Не важно, есть у вас готовая верстка, или вы просто перфекционист, которому только дай что-нибудь написать самому без посредников.
Какие файлы нужны для создания шаблона
Внешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 1С-Битрикс путь к шаблону лежит через папку bitrix, в которой есть папка templates и уже в ней список всех наших шаблонов.
Путь к шаблонам: /bitrix/templates/
- можно скопировать готовый шаблон и на его основе изменять под себя
- можно создать через админку пустой шаблон
- можно создать пустую папку и постепенно заполнять ее файлами и папками
Как вы поняли 3-ий вариант самый хардкорный. Зайдем в админку, Администрирование > Настройки > Настройки продукта > Сайты > Шаблоны сайтов > Добавить шаблон (ссылка относительно сайта: /bitrix/admin/template_admin.php?lang=ru).
После сохранения шаблона, мой файл description.php, выглядит так:
- 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 (без слеша в конце, обратите внимание). И поэтому, когда вы будете подключать свои скрипты или включаемые области, для папки нужно писать:
и уж точно НЕ НУЖНО ПИСАТЬ:
- нам не нужно запоминать имена всех шаблона и помнить в каком именно мы сейчас шаблоне работаем
- если мы поменяем имя шаблона, нам не нужно будет искать в файле это имя и исправлять на новое
- легко запомнить
Думаю, тут сплошные плюсы. Ну хорошо, это что касается PHP файлов, в которых мы можем использовать константу. А как насчет картинок и стилей? В CSS стилях пишите относительные пути.
Если это дополнительный файл со стилями и находится в папке css (редкий случай):
Никогда НЕ пишите вот так:
хотя бы по причине того, что имя шаблона вдруг придется переименовать. И да, если вы скопировали пути с firebug, тоже удаляйте лишнее.
Какие изображения хранить не в шаблоне а в корневой папке images?
Все довольно просто — те, которые вы будете использовать по всему сайту, особенно полезно если у вас много шаблонов. В стандартном шаблоне это изображение ошибки 404, думаю это хороший пример.
1С-Битрикс включаемые области для шаблона
Код подключения включаемой области очень простой. В случае если наша папка находится в корне:
Если в шаблоне, то:
Во включаемые области лично я советую выносить практически все, где есть текст или изображения. Вот представьте, структура вашего шаблона, ее адаптивная основа, написана на bootstrap, к примеру, а содержимое каждого блока, можно легко отредактировать при помощи включенного визуального редактора. При этом, у вас уже есть прочный скелет, который не сломает всеми горячо-любимые визуальные редакторы.
Этих знаний вполне достаточно для экспериментов и создания простых шаблонов, но это лишь вершина айсберга, ведь мы не рассмотрели компоненты, скрипты, как показывать контент на разных страницах и много чего другого.
Надеюсь, этот материал поможет вам легко создавать новые шаблоны для 1С-Битрикс.
Сайт и шаблон сайта
В публичной части ID текущего сайта хранится в константе SITE_ID.
Шаблон сайта
Синонимы термина шаблон сайта: дизайн сайта, скин сайта. Для показа одного сайта можно использовать несколько различных шаблонов. В шаблон сайта входят:
- набор файлов в каталоге /bitrix/templates/ID шаблона сайта/
где ID шаблона сайта — поле «ID» в форме редактирования шаблона сайта (административный пункт меню «Шаблоны сайта»); ниже представлена структура данного каталога:- header.php — пролог данного шаблона
- footer.php — эпилог данного шаблона
- styles.css — стили для контента и включаемых областей. Эти стили можно применять в визуальном редакторе.
- .тип меню.menu_template.php — шаблон вывода меню соответствующего типа
- chain_template.php — шаблон по умолчанию для вывода навигационной цепочки
- /components/ — каталог с компонентами принадлежащими тому или иному модулю
- /lang/ — языковые файлы, принадлежащие как данному шаблону в целом, так и отдельным компонентам
- /images/ — каталог с изображениями данного шаблона сайта
- /page_templates/ — каталог с шаблонами страниц и их описанием хранящимся в файле .content.php
- а также ряд других вспомогательных произвольных файлов входящих в данный шаблон
Применить тот или иной шаблон к сайту можно в форме настроек сайта, раздел Шаблоны. Возможно использование разных условий применения того или иного шаблона.
Если свойство раздела «phone» равно «Y»
Если текущий раздел равен «/ru/catalog/phone/»
Если текущий пользователь — администратор
Примечание. Возможно подключение пролога/эпилога на странице без использования шаблона:
Шаблон сайта в битриксе где хранится
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Имена авторов цитат даются в том написании, в каком авторы зарегистрировали себя на сайте "1С-Битрикс". .
Евгений Смолин: Сам кувыркался с непонятками (пока курсы учебные не прочитал и руками не попробовал то, что там написано). Битрикс из тех систем, где изучение "методом тыка" не очень эффективно без предварительного изучения учебных курсов. Уважаемые новички, потратьте немного своего драгоценного времени, пройдите пару-тройку учебных курсов и масса вопросов просто испарится — там есть ответы на множество вопросов.
Курс для разработчиков — продолжение линейки учебных курсов по Bitrix Framework. Получение сертификата по курсу рекомендуется после успешной сдачи тестов по всей линейке курсов, так как без понятия о работе Контент-менеджера и Администратора создание успешных сайтов будет затруднено.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
- Интерфейс программы — в главе Элементы управления курса Контент-менеджер.
- Компоненты 2.0 (начальные сведения) в главе Компоненты 2.0 (начальные сведения) курса Контент-менеджер.
- Информационные блоки — в главе Информационные блоки (начальные сведения) курса Контент-менеджер.
- Управление доступом к файлам, элементам контента, модулям и другие права доступа в главе Управление доступом курса Администратор. Базовый.
- Работа с инструментами системы — в главе Работа с инструментами курса Администратор. Базовый.
- Модуль Поиск — в главе Поиск курса Администратор. Базовый.
- Вся информация по администрированию модулей размещена в курсах:
-
— модули "1С-Битрикс: Управление сайтом" — модули "1С-Битрикс: Управление сайтом", связанные с коммерческой деятельностью в Интернете. — модули "1С-Битрикс: Корпоративный портал"
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
- Junior сможет создавать простые сайты работая со штатными компонентами и модифицируя их шаблоны.
- Middle разработчик может работать с API Bitrix Framework.
- Senior умеет работать над производительностью и безопасностью сайтов, создавать свои модули и компоненты.
Примечание: Такое построение удобно для пошагового изучения принципов работы Bitrix Framework. По этому же принципу построены и тесты. Но такая структура не очень удобна для использования содержания курса как постоянного источника информации. Что бы переключить курс в режим Справочника, воспользуйтесь переключателем в правом углу «шапки» курса.
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
- основами PHP, баз данных;
- основами HTML, CSS.
У нас часто спрашивают, сколько нужно заплатить
Курс полностью бесплатен. Изучение курса, прохождение итоговых тестов и получение сертификатов — ничего из этого оплачивать не нужно.
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
В конце каждого урока есть кнопка Прочитано! . При клике на неё в Вашу итоговую таблицу опыта добавляется то количество баллов, которое указано в прочитанном После нажатия кнопки Прочитано! появится
окно подтверждения:
уроке.Периодически мы заново оцениваем сложность уроков, увеличивая/уменьшая число баллов, поэтому итоговое количество набранных Вами баллов может отличаться от максимально возможного. Не переживайте! Отличный результат — это если общее число набранных Вами баллов отличается от максимального на 1-2%.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Также Вы можете поделиться ссылкой на страницу со своими сертификатами. Для этого на странице Моё обучение отметьте опцию Разрешить публичный доступ к резюме студента
и скопируйте ссылку на страницу резюме
. Страница с Вашим резюме будет доступна всем, кому Вы отправите ссылку на неё.Комментарии к статьям
На каждой странице курса авторизованный на сайте посетитель может дать комментарий к содержимому страницы. Комментарий — не форум, там не ведётся обсуждений или разъяснений. Это инструмент для сообщений нам об ошибках, неточностях. Для отправки комментария воспользуйтесь расположенной в правом нижнем углу окна браузера кнопкой:

Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания офлайн
Если данный курс берётся в качестве основы для офлайнового преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBooxiPhone:
FBReader
CoolReader
iBook
BookmateWindows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google ChromeiOS
Marvin for iOS
ShortBookLinux:
Calibre
FBReader
Cool Reader
Okular обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса. Версия файла — от 06.03.2023.Как создать шаблон для сайта на 1С-Битрикс
В этой статье мы с вами рассмотрим все особенности создания шаблона для Битрикса с нуля. Не важно, есть у вас готовая верстка, или вы просто перфекционист, которому только дай что-нибудь написать самому без посредников
Какие файлы нужны для создания шаблона
Внешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 1С-Битрикс путь к шаблону лежит через папку bitrix, в которой есть папка templates и уже в ней список всех наших шаблонов.
Путь к шаблонам: /bitrix/templates/
Создать шаблон можно 3 способами:
- можно скопировать готовый шаблон и на его основе изменять под себя
- можно создать через админку пустой шаблон
- можно создать пустую папку и постепенно заполнять ее файлами и папками
Как вы поняли 3-ий вариант самый хардкорный . Зайдем в админку, Администрирование > Настройки > Настройки продукта > Сайты > Шаблоны сайтов > Добавить шаблон.
ссылка относительно сайта: /bitrix/admin/template_admin.php?lang=ruID шаблона это по сути имя папки в которой он будет лежать, я назову 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 (без слеша в конце, обратите внимание). И поэтому, когда вы будете подключать свои скрипты или включаемые области, для папки нужно писать:
и уж точно НЕ НУЖНО ПИСАТЬ:
Зачем нам динамический путь к шаблону спросите вы?
- нам не нужно запоминать имена всех шаблона и помнить в каком именно мы сейчас шаблоне работаем
- если мы поменяем имя шаблона, нам не нужно будет искать в файле это имя и исправлять на новое
- легко запомнить
Думаю, тут сплошные плюсы. Ну хорошо, это что касается PHP файлов, в которых мы можем использовать константу. А как насчет картинок и стилей? В CSS стилях пишите относительные пути.
Если это дополнительный файл со стилями и находится в папке css (редкий случай):если это styles.css или template_styles.css
Никогда НЕ пишите вот так:
хотя бы по причине того, что имя шаблона вдруг придется переименовать. И да, если вы скопировали пути с firebug, тоже удаляйте лишнее.
Какие изображения хранить не в шаблоне а в корневой папке images?
Все довольно просто – те, которые вы будете использовать по всему сайту, особенно полезно если у вас много шаблонов. В стандартном шаблоне это изображение ошибки 404, думаю это хороший пример.
1С-Битрикс включаемые области для шаблона
Код подключения включаемой области очень простой. В случае если наша папка находится в корне:
Если в шаблоне, то:
Во включаемые области лично я советую выносить практически все, где есть текст или изображения. Вот представьте, структура вашего шаблона, ее адаптивная основа, написана на bootstrap, к примеру, а содержимое каждого блока, можно легко отредактировать при помощи включенного визуального редактора. При этом, у вас уже есть прочный скелет, который не сломает всеми горячо-любимые визуальные редакторы.
Этих знаний вполне достаточно для экспериментов и создания простых шаблонов, но это лишь вершина айсберга, ведь мы не рассмотрели компоненты, скрипты, как показывать контент на разных страницах и много чего другого. Если вам интересно продолжение данной статьи дайте мне об это знать в комментариях .
Надеюсь, этот материал поможет вам легко создавать новые шаблоны для 1С-Битрикс .