Как подключить шаблон в битрикс

Шаблоны в Битрикс. Создание, изменение и удаление

После установки системы управления сайтом 1С-Битрикс необходимо выполнить настройку системы. Первым делом — настроить дизайн сайта. Для этого нужно сделать шаблон дизайна и назначить его на все страницы или определённую папку. Разберём подробнее.

Шаблон — это дизайн обрамления страниц сайта. Один шаблон может использоваться для отображения множества страниц. Можно провести грубую аналогию: если картина — это страница сайта, то рамка картины — это её шаблон.

Шаблон сайта на Битриксе

Войдите в панель администрирования. В боковом меню выберите пункт «Настройки». Затем кликните на подпункт «Настройки продукта», затем на «Шаблоны сайтов»: Откроется страница, на которой будут перечислены все шаблоны сайтов, которые есть в системе: Если необходимо добавить новый шаблон, то кликните на зелёную кнопку «Добавить шаблон». Если нужно изменить или удалить существующий шаблон, то кликните на кнопку опций, сбоку строки шаблона: На открывшейся странице изменения шаблона необходимо указать ID (только латинские символы без пробелов), название и небольшое описание шаблона. Рассмотрим подробнее строение шаблона битрикса, которое находится внутри блока под названием «Внешний вид шаблона сайта (рабочую область заменить #WORK_AREA#)«. В этом поле стоит подобный шаблон:

    ShowTitle();?>  #WORK_AREA#

Пример начинается со строчки с PHP кодом. Этот код не даёт поисковым сетям считывать файл шаблона и считать его за отдельную страницу. То есть перейдя по ссылке — адресу шаблона на вашем сайте, нельзя будет увидеть его содержимое.

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

В примере указана фраза #WORK_AREA# внутри шаблона. Вместо этой фразы будет вставляться содержание страницы. Если в редакторе, в поле редактирования шаблона, не указать эту фразу, то система не даст сохранить изменения в шаблоне.

При сохранении шаблона битрикса происходит следующее: код, который был записан в поле «Внешний вид шаблона. » будет разделён на две части. Разделителем будет фраза #WORK_AREA#. Первая часть называется хидером (шапкой) сайта и записывается в файл, который находится по адресу /bitrix/templates/id_шаблона/header.php . Вторая часть, которая стояла после фразы #WORK_AREA#, называется футером (подвалом) сайта, будет сохранена в файл /bitrix/templates/id_шаблона/footer.php . Вы можете самостоятельно исправлять содержимое этих файлов не используя административную панель битрикса, делая это через sFTP.

Рекомендуем ознакомиться со статьями. описывающими редакторы файлов на сервере: «Средство разработки: Notepad++» или «Средство разработки: Atom»

Установить шаблон для страницы

После создания или изменения шаблона, необходимо установить его для страниц сайта. Можно поставить шаблон для определённой страницы, для всех страниц в папке или даже для параметра в адресе.

Для задания страницам сайта шаблона зайдите в панель администрирования, кликните на пункт «Настройки» в боковом меню. Затем кликните на пункт «Настройки продукта», потому на «Сайты». Кликните на пункт «Список сайтов»: Откроется страница, на которой будут перечислены все сайты, которые есть в системе: Если необходимо добавить новый сайт, то кликните на зелёную кнопку «Добавить сайт». Если нужно изменить или удалить существующий сайт, то кликните на кнопку опций, сбоку строки нужного сайта: Прокрутите страницу в самый низ и найдите блок «Шаблон сайта». В этом блоке необходимо выбрать условия применения шаблонов к страницам сайта: Если выбрать опцию [без условия], то выбранный шаблон будет показываться на всех страницах сайта.

Обратите внимание, что этот список применяемых шаблонов работает по такому принципу: условия будут проверяться на «истину», и будет показан первый шаблон и того условия, которое вернёт истину. Поэтому для изменения приоритетов есть поле «Сорт.». Условия проверяются по возрастанию значения этого поля.

Создаем шаблон битрикс — быстрый старт

В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине cms, более функциональный аналог блокнота и хороший файловый менеджер (не проводник:)

Почему я не люблю админку битрикс — во-первых она очень тяжелая, во-вторых плохо приспособлена для создания шаблонов. Встроенный относительно недавно визуальный редактор содержит значительные ограничения для использования. Особенно порадовала фраза «шаблоны демонстрационной версии адаптированы для использования в этом режиме» — смысл «затачивать» шаблон под редактор непонятен.

Итак, приступим к самому главному.

Этап первый — неинтересный

Тут предполагается долгое, вдумчивое ознакомление с мануалами (качать с dev.1c-bitrix.ru) и успешное прохождение курса «Интеграция». После изучения часть вопросов у Вас должна отпасть.

Теперь перейдем к практике.

Этап второй — создаем файлы

Файловую составляющую будем делать ручками — так быстрее и удобнее. Шаблоны хранятся в директории /bitrix/templates/, тут надо создать каталог для своего творения, например test. Внутри него размещаем:
— каталог images — для картинок шаблона (которые не зависят от просматриваемой страницы), незачем их хранить в публичной части
— каталог include_areas — для включаемых файлов
— каталог page_templates — для образцов включаемых областей
— файл header.php — часть шаблона ДО контента
— файл footer.php — часть шаблона ПОСЛЕ контента
— файл description.php — название и описание шаблона
— файл .styles.php — описания стилей для визуального редактора страниц
— файл template_styles.css — стили шаблона
— файл styles.css — стили для контента и включаемых областей

Этап третий — заполняем файлы

Картинки сразу пихаем в images, все стили css в template_styles.css, потом из него выберем необходимый минимум в styles.css. Я всегда стараюсь стили шаблона помещать в template_styles, потому что он подключается последним и случайное переопределение не сломает каркас сайта.

В исходной верстке нужно выделить область для контента и разрезать верстку на 3 части — до него, сам контент, и после него. Для наглядности приведу рисунок

По пунктам:
— в header.php включается 1 часть, за исключением содержимого между тегами и (оставить можно подключение различных скриптов). После обязательно добавить
ShowPanel();?>
— вместо удаленных в секции head метатегов, заголовка, подключений css файлов размещаем вызовы функций битрикс, которые будут динамически формировать эти данные

ShowHead()?> ShowTitle()?>

— в footer.php целиком записываем 3ю часть
— ко всем относительным путям добавляем /bitrix/templates// Например, было

Таким образом мы не привязываем пути к конкретному имени шаблона, оно будет подставляться автоматически (что позволит копировать шаблоны без дополнительных трудностей)

После описанных манипуляций должно получиться нечто похожее на
header.php

ShowHead()?> ShowTitle()?> ShowPanel();?>

"template description");?>

В списке шаблонов имя каталога (у нас для примера оно test) будет в колонке ID, [template name] и [template description] в «Название» и «Описание» соответсвенно.

Этап четвертый — интеграция

Самое время подключить шаблон к сайту (или разделу) и посмотреть что получилось. Визуальное представление должно соответствовать сверстанному варианту без контента. Если все красиво, можно начинать поочередно выделять участки кода и заменять их на вызов нужного компонента. Стандартные вызовы можно найти в этой статье. Напомню, что делать подобные замены удобно, напрямую изменяя в текстовом редакторе header.php и footer.php

В исходном виде информация, которую выводят компоненты, скорее всего не впишется в дизайн. Идем в Режим разработки — тыкаем на шестеренку — копировать шаблон. Теперь шаблон компонента можно спокойно кромсать из админки битрикса или редактированием style.css и template.php в каталоге /bitrix/templates/[имя шаблона]/components/[имя компонента]/[имя шаблона компонента]/

На сегодня все, в следующих статьях разберемся со стилями и начнем править шаблоны различных компонентов.

Больше статей и материалов по web-разработке в tg-канале — подписывайтесь!

41 комментарий “ Создаем шаблон битрикс — быстрый старт ”

Спасибо тебе за даную статью очень кратно и полно описал ! верстать научился под битрикс по ней!
Спасибо! Просто и доступно! Теперь переход на Битрикс уже не кажется таким сложным

глупый вопрос.. но как поставить созданный шаблон за место стандартного . Положил свой шаблон как и требовалось в отдельную директорию в \bitrix\templates\
из административного раздела «Рабочий стол>Настройки>Настройки продукта>Сайты>Шаблоны сайтов» нет ни кнопки ничего чтобы установить свой как используемый.. может я кудат оне туда смотрю…
Алексей Валеев если не сложно .. могли бы вы описать процесс создания и работы с МЕНЮ (например графические или сногоуровневые и т.п.)
ЗЫ -использую демоверсию 1с битрикс -управление сайтом (Бизнес 9.5.0)

Алекс, шаблон можно установить в настройках конкретного сайта — в Рабочий стол>Настройки>Настройки продукта>Сайты открываем настройки сайта и выпадающем списке ищем шаблон.
По поводу меню — даже не знаю что там можно описать.. вроде все прозрачно:)

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

Николай 24.11.2010

Алексей, а чем плохо использовать [?=SITE_TEMPLATE_PATH?] вместо /bitrix/templates/[?=SITE_TEMPLATE_ID?] ? И да, Алексей, может быть напишите заметку о том, как реализован аякс в битриксе. Я пока не исследовал подробно этот вопрос, и подозреваю, что там все прозрачно, но тем не менее, буду (и другие читатели тоже, наверно) очень благодарен.

Николай, ничем не плохо — так даже короче:)
Что касается аякса — хорошая идея. Хотя я видел в сети пару неплохих статей на эту тему, надо поискать

Алекс:
22.11.2010 в 07:25
********
ага, то есть я не один такой 🙂 качал прошлую демку битрикса, там визуальный редактор был и кнопки выглядели как в мануале (для 7 версии). сейчас тоже 9.5 и визуальный редактор шаблона я найти не могу. единственное что смог добиться — это включать галочки на визуальный режим и тогда править тексты можно прямо на страницах, но это не совсем то.

В настройках главного модуля в первой секции «Системные настройки» есть галочка «Использовать визуальный редактор для редактирования шаблонов сайта»

что-то одно из двух. или за ночь она появилась или я вчера был слеп 🙂 вобщем нашел. как не увидел ее вчера — загадка ибо в этих настройках я лазил несколько раз читая справку.

Bit_x64 15.01.2011
Алексей, а не объясните ли вы как подключить в header.php шаблоне js-файлы? не могу разобраться:(
Спасибо большое! Интересовал вопрос куда закидывать js файлы.

А не подскажете в каком файле править саму workarea? мне например надо оттуда новости убрать и популярные товары в другое место перетащить.

В workarea подставляется контент, который формируется на страницах в физической структуре сайта

2 Алексей Валеев
🙂 понятно что ничего не понятно 🙂
в каком файле определяется эта физическая структура? и еще такой вопрос. насколько я понял битрикс изначально «заточен» под табличную верстку. по крайней мере дизайн компонентов заключен в таблички. имеет ли смысл не заморачиваться дивами и верстать таблицей?

всплыла еще проблема. вобщем я сделал простенький дизайн на дивах. залил все вроде работает отображается. но при добавлении товара в корзину сайт раздваивается 🙂 то есть сам сайт остается и рядом появляется как бы копия страницы с товаром в корзине (прокрутка вправо).
с чем это может быть связано?

grundfos, последние версии компонентов стали делать на дивах уже, не все правда.
А глюк с корзиной скорее всего из-за аяксового добавления. Шаблоны компонентов взяты из демо-магазина?

про шаблоны не совсем понял. вобщем я делал как. установил битрикс. потом в соответствии с прочитанным мануалом по привязке дизайна скопировал сайт s1 и назвал копию s2. потом заменил header footer. потом перешел в сайт s1 и через режим правки покопировал все компоненты (корзину, поиск, новости и т.д.) в сайт s2. в мануале про это тоже было написано типа после копирования из .default шаблоны компонентов становятся пользовательскими и их можно спокойно редактировать. коды вызова компонентов я брал из Вашей статьи по кодам вызова. вобщем похоже что запутал все окончательно 🙂

убрал в коде вызова корзины кусок кода «.default» раздвоение вроде как прекратилось. но при нажатии на «В корзину» товар плывет кажется в ту сторону где по умолчанию и располагалась корзина. не подскажете где исправить координаты или направление перемещения товара.

В шаблоне сайта есть файлик script.js (это стандартный магазин). В нем строка
flyImage.animate(< width: 10, height: 10, left: 948, top: -58 >, 500, ‘linear’);
Я думаю что тут и задаются координаты «полета». Не проверял.

угу. спасибо попробую. если я укажу координаты полета то у меня количество товаров в корзине будет автоматически изменяться? а то сейчас при добавлении товара товар добавляется но в ссылке на малую корзину количество товара остается прежним пока страница не обновится или пока не перейдешь куда-либо. еще вопрос 🙂 напоминатель пароля — какой у него код вставки? регистрация нового пользователя в шаблоне есть (я создал новый шаблон тест в нем таблицу и пихаю в визуальном режиме все компоненты чтоб посмотреть код их вызова) регистрацию нашел а вот напоминатель пароля там отсутствует.

Андрей 18.05.2011

Сделал все по вашему мануалу, столкнулся с проблемой, не выводится «GetMessage» например в модуле авторизации нет слов войти и выйти. GetMessage посылает пустую строку. файлы ленг кинул в корень шаблона, не помогло, в шаблоне IncludeTemplateLangFile(__FILE__) имеется. Уже руки опускаются.

Андрей, языковые файлы есть для шаблонов компонентов. Положите в /lang/ru/template.php для шаблона авторизации нужные строки и выведите из этого шаблона через GetMessage , все сработает.

Андрей 19.05.2011
Спасибо. Решено.
Сделал как описано в пункте два, все быстро и достаточно легко.
Большое спасибо! Статья очень помогла

>> ко всем относительным путям добавляем /bitrix/templates// Лучше сразу добавлять путь к текущему шаблону: src=»/images/logo.png» />

Алексей 2 19.06.2012

Скажите, пожалуйста, можно ли менять значение [?=SITE_TEMPLATE_PATH?] = /bitrix/templates/…вот, не хочется мне показывать всем и каждому в коде, что сделано сие на битриксе, а?

Евгения 17.10.2012

Извиняюсь, за возможно глупый вопрос. Только учусь.
Вот я создам по Вашей статье шаблон, эту будет главная страница. А как быть с остальными страницами, на которые ведутся ссылки с моего шаблона?
В какую папку их помещать? Или как?

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

Здравствуйте, Алексей. Была верстка для сайта, начал из нее делать шаблон. Все по различным статьям (Ваша взята за основу). В итоге вся верстка перекосилась, съехала, половина картинок не отображается. В чем может быть проблема? (в моих кривых руках)

Алексей Валеев 11.01.2013

Артем, а вы посмотрите верстку на сайте в неавторизованном виде и сравните с оригиналом. Наверняка не подключились стили или незакрытые тэги.

Андрей 13.01.2013

Здравствуйту. приобрел демо версию битрикса. хочу переделать шаблон. ( не подходит мне по тематике и работе). как можно это сделать?
на хосте это возможно?

Виктор 17.01.2013

Здравствуйте, а данной cms можно воспользоваться как конструктом и после бекапа выложить файлы на хост, но не покупать данную cms? Я в дальнейшем смогу сайтом пользоваться или вывалится надпись о преобретении продукта?

Шаблоны задач

В рабочем процессе сотрудники часто сталкиваются с одними и теми же задачами, например, бухгалтер, который сдает отчётность раз в три месяца, или менеджер по продажам, сдающий ежемесячную отчётность.

Чтобы не тратить время на повторное создание таких задач, в Битрикс24 есть инструмент шаблон задач.

С помощью этого инструмента можно создавать однотипные задачи с уже готовым описанием, участниками, сроками и задавать периодичность их повторения.

Чтобы создать шаблон задачи, перейдите в Задачи и Проекты > Еще > Шаблоны.

Перед вами откроется список со всеми существующими шаблонами задач. Чтобы создать новый шаблон нажмите кнопку Создать.

создать_шаблон

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

О дополнительных возможностях задач читайте в статье.

Как указать крайний срок шаблона задачи

В поле Крайний срок через укажите период, когда задача должна быть завершена, например через 5 дней.

Битрикс24 автоматически применит настройку даты при создании новой задачи.

Права доступа к шаблону задачи

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

Для этого перейдите в шаблоне задачи в раздел Дополнительно > Права доступа.

Выберите сотрудника, которому хотите дать права и определите, какие это будут права — Только чтение или Полный доступ.

Как работать с шаблонами в задачах

Вы можете создавать задачи на основе готовых шаблонов прямо из раздела Задачи и Проекты.

В первом случае при просмотре задачи нажмите Добавить > Добавить задачу из шаблона и выберите шаблон, с которым вы хотите работать.

Во втором случае в списке задач нажмите на стрелку рядом с кнопкой Создать и выберите Задачу по шаблону. Чтобы посмотреть все имеющиеся шаблоны выберите пункт Список всех шаблонов.

Как сделать задачу регулярной

Для того, чтобы задача автоматически повторялась с определённой периодичностью, включите опцию Сделать задачу регулярной.

Здесь вы можете определить период повторения — день, неделя, месяц, год.

Устанавливайте время, когда повторения должны прекратиться. Вам доступны следующие настройки периодов:

Нет даты окончания – повторение никогда не прекратится.
Дата окончания – система перестанет повторять задачу в указанный день.
Завершить после . повторений – будет создано заданное количество задач, после чего повторение прекратится.

Как привязать подзадачи

У вас есть несколько вариантов привязать к шаблону подзадачи.

Откройте раздел Дополнительно вашего шаблона и выберите пункт Сделать подзадачей. Далее нажмите Шаблон > Добавить.

В выпадающем списке вы можете выбрать к какому шаблону привязать подзадачу.

список

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

При просмотре готового шаблона нажмите на кнопку Добавить подзадачу для шаблона в правом верхнем углу.

Как добавить задачу новому сотруднику

Чтобы новым сотрудникам автоматически выставлялась задача, например, «Заполнить профиль», нажмите в шаблоне Еще и выберите опцию Шаблон задачи для вновь добавляемого сотрудника.

Обратите внимание, этот параметр может выбрать только администратор портала для вновь создаваемого шаблона.