1с битрикс как установить шаблон. Создаем шаблон битрикс — быстрый старт

02.04.2021

Tutorial

В очередной раз, пытаясь найти себе программиста, который работал с CMS 1C-Bitrix с своем городе натыкаюсь на проблему…

Программисты есть, работавшие с разными бесплатными фреймворками по типу Joomla, WordPress и т.д., но когда дело доходит до Битрикса, все как один говорят: - «Ой, она платная, зачем мне это когда есть куча других бесплатных». И не хотят браться за изучение чего то нового.

Так начинал и я, за исключение одного, мне сразу показали, как что и почему. Но материала в сети и на хабре я так и нашел. По этому начну с простого, как обычному программисту владеющим знаниями PHP и хотя бы базовыми HTML, CSS, JS начать работать c Битрикс.

Про структуру каталогов шаблона говорить не буду, об этом можно почитать . Первое, с чем приходится сталкиваться, это интеграция HTML шаблона на CMS.

Допустим, у вас есть готовый HTML шаблон и вам его необходимо интегрировать с системой. Начнем с установки на сервер:

Все на этом этап установки заканчивается, переходим непосредственно к интеграции шаблона. Заходим в панель администрирования в раздел «Настройки». Далее спускаемся по дереву настоек: Настройки продукта - Шаблоны сайтов, жмем на кнопку «Добавить шаблон»

Открывается стандартная форма создания шаблона.

Придумываете ID (я обычно использую main), вписываете название шаблона. Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько.

Вот тут началось самое интересное. Обычно шаблон HTML страниц выглядит следующим образом:

...

Тут главное понимать, что относится к шаблону, а что к контентной части. В данном примере контентная часть начинается между тегом section . Поэтому копируем шаблон в поле «Внешний вид шаблона сайта». Между тегом вставляем служебную директиву #WORK_AREA# . В итоге ваш шаблон будет выглядеть вот так:

#WORK_AREA#

Если у вас есть CSS, то переходим на вкладку «Стили шаблона» и вставляем его туда.

Далее, я обычно редактирую файлы уже через FTP. Открываете свой текстовый редактор (у меня Notepad++, поэтому буду писать не его примере) и заходите на сервер. Весь шаблон Битрикс располагается по адресу /bitrix/templates/название_шаблона/ , если у вас есть картинки или дополнительные файлы стилей, JS скрипты и т.д., то копируете всё в эту папку.

Переходим к заключительной части и прописываем все необходимые переменные Битрикса. Открываем файл header.php и начинаем редактировать. Первое что нужно сделать это, подключить вывод шапки сайта:

… ShowHead();?> …
Так же мы хотим видеть панель администратора сайта в публичной части сайта:

… ShowPanel();?> … …
Чтоб отображался заголовок страницы, добавляем функцию ShowTitle();?> в соответствующий тег. В итоге мы получаем вот такой файл:

<?$APPLICATION->ShowTitle();?> ShowHead();?> ShowPanel();?>

Кстати забыл сказать, если всё таки есть дополнительные файлы, будь то JS, CSS, favicon и так далее, то чтоб не прописывать полный длинный путь /bitrix/…/ есть специальная константа SITE_TEMPLATE_PATH . Её и вставляем на нужные места:

Не забываем редактировать пути в CSS, сохраняем все и можете смотреть на получившийся результат.
Ах, да, нужно еще применит созданный шаблон к сайту. Для этого идем в «Настройки продукта - Список сайтов - s1»

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

Заходим на сайт Битрикса и качаем инсталлятор ;
Заливаем bitrixsetup.php на сервер и начинаем установку.
Первое, что вам предлагает установочник, это выбрать редакцию:
Выбираете нужный вам дистрибутив (как правило это «Управление сайтом»), если у вас есть ключ, то вводите его, и нажимаете «Загрузить». Процесс пошел…
Если распаковка прошла успешно, значит, вы видите приветственное окно установки
Следующее с чем сталкиваются начинающие программисты это «Обязательные параметры системы», а именно:

Для решения этой проблемы заходим на сервер, открываем файл.htaccess и находим там следующие строки
#php_value mbstring.func_overload 2 #php_value mbstring.internal_encoding UTF-8
Раскомментируем их. Жмем F5 и все работает… Если все же не заработало (а такое иногда бывает), то пишите обращение в тех. поддержку хостинга .
Следующий этап установка базы данных. Тут я думаю расписывать не надо. Поэтому идем далее. Если все хорошо, то вы увидите процесс установки Битрикса:
Добрались до выбора решения, предлагаемые Битриксом. Так как нам нужна чистая система без каких либо дополнений выбираем «Демо-сайт для разработчиков»
Далее нас приветствует стандартный «Мастер»

С помощью его можно установить демо данные. Нам это не нужно жмем «Отмена».

Открывается стандартная форма создания шаблона.

Вот тут началось самое интересное. Обычно шаблон HTML страниц выглядит следующим образом:

...

вставляем служебную директиву #WORK_AREA# . В итоге ваш шаблон будет выглядеть вот так:

#WORK_AREA#

Если у вас есть CSS, то переходим на вкладку «Стили шаблона» и вставляем его туда.

… ShowHead();?> …

Так же мы хотим видеть панель администратора сайта в публичной части сайта:

… ShowPanel();?> … …

Чтоб отображался заголовок страницы, добавляем функцию ShowTitle();?> в соответствующий тег. В итоге мы получаем вот такой файл:

<?$APPLICATION->ShowTitle();?> ShowHead();?> ShowPanel();?>

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

Поддержка не ограниченного количества шаблонов в 1С-Битрикс.

Всем кто работает на 1С-Битрикс известно, что CMS предоставляет возможность подключать неограниченное количество шаблонов. Для тех кто не в курсе давайте рассмотрим как используется реализация многошаблонности.
Для добавления шаблона необходимо перейти в раздел, в административной части сайта, "Настройки" - "Настройки продукта" - "Сайты" в выпадающем меню в разделе "Сайты" есть два подраздела - "Шаблоны сайтов" и "Список сайтов".

Копируем основной шаблон сайта.

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

Применяем шаблон к сайту для редактирования.

Нам осталось применить шаблон к сайту, но так как сайт у нас рабочий и на нем могут находится пользователи, и нам не нужно чтобы они видели производимые изменения на сайте мы подключим шаблон по условию - "Параметр в URL". Давайте сделаем это - перейдем в раздел "Список сайтов" и зайдем в настройки сайта для которого требуется изменение. В самом низу страницы настройки сайта есть блок "Шаблон сайта". Выбираем из списка в колонке "Шаблон" копию нашего шаблона, устанавливаем условие "Параметр в URL" и добавляем любое удобное вам условие к примеру test=Y, как показано на скриншоте:

Теперь копия вашего шаблона будет отображаться если вы передадите данный параметр в урл, следующим образом site.ru/?test=Y где site.ru домен вашего сайта. Данное условие будет работать для всех разделов и страниц вашего сайта к примеру если вам необходимо посмотреть как будет выглядеть шаблон в определенном разделе сайта, перейдите в этот раздел и передайте ваш параметр, в данном случае?test=Y и страница отобразится с новым шаблоном.

Теперь вы можете редактировать новый шаблон, в то время как ваши посетители будут видеть сайт как обычно. Обратите внимание что все изменения нужно будет производить именно в папке нового шаблона, и если вам необходимо изменить шаблоны компонентов которых нет в папке, вам потребуется скопировать шаблон компонента в папку с новым шаблоном. Ни в коем случае не правьте компоненты в папке /bitrix, это может привезти к критическим последствиям. И всегда делайте бекап в Облаке 1С-Битрикс.

Ну вот собственно и вся методика, надеемся что она поможет вам сэкономить время.

В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине 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()?> <?$APPLICATION->ShowTitle()?>

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

/images/pict.gif" alt="pict" />

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

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

ShowHead()?> <?$APPLICATION->ShowTitle()?> ShowPanel();?>

Это левая колонка, она НЕ входит в рабочую область, и пока она в шаблоне. Чуть позже ее можно будет убрать во включаемую область.

Это правая колонка, она НЕ входит в рабочую область сайта, и пока она в шаблоне. Чуть позже ее можно будет убрать во включаемую область.

В template_styles.css все стили, файл styles.css пока пустой.

Файл description.php содержит всего одну строку вида:

"template name", "DESCRIPTION"=>"template description");?>

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

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

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

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

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

Комментарии (41)

Спасибо тебе за даную статью очень кратно и полно описал! верстать научился под битрикс по ней!

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

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

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

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

Алексей, а чем плохо использовать [?=SITE_TEMPLATE_PATH?] вместо /bitrix/templates/[?=SITE_TEMPLATE_ID?] ?

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

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

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

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

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

Алексей, а не объясните ли вы как подключить в 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’);
Я думаю что тут и задаются координаты «полета». Не проверял.

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

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

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

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

Спасибо. Решено.

Сделал как описано в пункте два, все быстро и достаточно легко.

Большое спасибо! Статья очень помогла

>> ко всем относительным путям добавляем /bitrix/templates//

Лучше сразу добавлять путь к текущему шаблону:

src=»/images/logo.png» />

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

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

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

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

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

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

После вставки в header своего кода вот этот кусок (от начала и до тега) при попытке сохранить его, просто исчезает. Куда он девается и как это предотвратить?

ShowHead()?>
ShowTitle()?>

$(document).ready(function(){
$(«#featured»).tabs({fx:{opacity: «toggle»}}).tabs(«rotate», 5000, true);
});

(Относительные пути я тоже изменил, здесь это не показано)

Спасибо за статью. Но может вы поделитесь опытом, как создать свой шаблон(стилизацию) для админки битрикс. Знаю, что есть в папке bitrix папка themes с единственным разделом.default. Но каким образом подключить свою темку или где поместить ее, чтоб потом обновления не перетерли, пока инфы не нашел.

Привет друзья, это продолжение к сери уроков, а точнее пятый урок по созданию landing page на CMS 1С-Битрикс .

Так как давно записывал предыдущие уроки, давайте повторно развернем платформу, и перенесем туда шаблон, с которым ранее работали.

Регистрируем Хостинг под 1С-Битрикс

Перейдем в раздел новостей, откроем статью 3 месяца бесплатного хостинга от МАКХОСТ и скопируем из нее промокод (8A93-0ECC-D7AD-4A76) . Затем переходим на Макхост и выбираем пункт в меню CMS хостинг, далее жмем на иконку 1С-Битрикс.

Регистрируем аккаунт на Макхост
Вводим E-mail, промокод и вуаля, мы имеем три месяца бесплатного хостинга.

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

После активации аккаунта переходим в настройки PHP и изменяем его конфигурацию под 1С-Битрикс.

Устанавливаем следующие параметры:

Display_errors - On
default_charset - "UTF-8"
mbstring.func_overload - 2
mbstring.internal_encoding - "UTF-8"

Затем переходим в файл менеджер нашего домена и удаляем все лишние файлы, оставляем только установщик.

Запускаем установщик 1С-Битрикс. Просто копируем ссылку из письма и вставляем ее в браузерную строку.

Устанавливаем ШАБЛОН из предыдущего урока

На данный момент мы установили пустой шаблон Битрикс, по этой причини видим белый экран. Переходим в административную часть, жмем на иконку Контент -> Файлы и папки -> bitrix -> templates . Создаем в данной директории пустую папку под шаблон с названием "lendtv". Переходим в нее и закачиваем шаблон из предыдущего урока. Распаковываем его и удаляем архив он нам больше не понадобиться.

Что бы шаблон подключился нам нужно выбрать его в настройках текущего сайта. Для этого переходим в Настройки -> Настройки продукта -> Сайта -> Список сайтов .

Открываем первый сайт, спускаемся в самый низ и в пункте "Шаблон сайта" выбираем шаблон который ранее мы копировали.

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

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

Урок подготовил Горелов Денис.