Видео урок по Создание HTML шаблона в 1С Битрикс , это четвертое видео из серии уроков «Интеграция шаблона в систему 1С Битрикс ».

В видео мы с Вами разберем:

• Как перенести готовую верстку HTML шаблона в Битрикс
• Подключим скрипты и перенесем структуру сайта в битрикс
• Подключим языковые файлы и проверим, как это работает
• Разберем часто встречающие ошибки

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

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

Задаем основные настройки шаблона, ID пропишем «lendtv» , в поле название «Лендинг», в описании прописываем «Наш шаблон лендинга», порядок указываем «1», Тип оставляем по умолчанию «Шаблон сайта». Спускаемся ниже.

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

Открываем нашу страницу верстки HTML шаблона в редакторе, выделяем код, копируем и вставляем в нашу форму. Мы с Вами условились, что все рабочие блоки отнесем в header . Для этого спускаемся до закрытия секции . Ставим курсор между section и footer , жмем #WORK_AREA# , добавился маркер.

При помощи вставки данного маркера система Битрикс создаст автоматически файлы header.php и footer.php с размещенным в них нашим кодом. Вкладку «Стили сайта» оставляем пустой, в «Стили шаблона» копируем наш основной код стилей из файла style.css, и сохраняемся.

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

Пропишем код проверки

Для примера откроем наш установленный шаблон из маркеплейса и скопируем код для проверки константы «B_PROLOG_INCLUDED» , эта константа запрещает запуск данного файла без подключения ядра Битрикс.

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); // проверка

Подключение перевода

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

IncludeTemplateLangFile(__FILE__); // перевод файлов

Пример:

Подключаем скрипты

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

$APPLICATION->ShowHead(); // подключения скриптов со страницы шаблона

Подключение title

Следующим этапом подключаем title при помощи метода «ShowTitle» .

$APPLICATION->ShowTitle(); // вывод title

Подключение директорий файлов

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

// путь к директории шаблона (обязательно поставить флешь в конце).

2017 .

Выносим языковое фразы

Теперь вынесем языковые файлы, которые будем подключать без компонентов, то есть напрямую через шаблон. Для этого создадим соответствующею директорию, где они будут храниться. Создаем папку lang , в ней поддиректории ru и en .

Открываем директорию ru и создаем в ней файл, с которого будем выносить языковые фразы, пишем header.php . В основном шаблоне смотрим, что нам нужно вынести в ленговские файлы. Возьмем из header.php шаблона заголовки наших блоков, открываем leng , формируем массив с первой нашей фразой «В настоящее время мы работаем над удивительным проектом» с ключом «WORKING_PROJECT» , а в header.php пропишем вместо фразы функцию «GetMessage» с нашим ключом «WORKING_PROJECT» .

Затем заменим заголовок "Контакт", создаем массив с ключом «CONTACT» , и меняем заголовок на функцию с нашим ключом.

Добавляем фразы в footer.php

Переходим в footer , тут можно вывести данный блок как есть через включаемую область, но для примера давайте вынесем эти фразы в Leng . Переходим в директорию ru и создаем новый файл с названием, у которого будем выносить фразы, пишем footer.php . В нем создаем массив с нашей фразой «ДАЛЬВЕБСТРОЙ» с ключом «COPY_DWS» и вставляем функцию «GetMessage» в основной файл с нашим параметром ключа.

Переносим следующую фразу «Все Права Защищены. Разработанный» в leng с ключом «COPY_RIGHTS» и не забываем заменить фразу в footer на функцию «GetMessage»

Английская версия языковых файлов

Для английской версии, нам нужно создать в директории en соответствующие файлы с такими же массивами только с английским переводом.

Копируем массив из файла header , переходим в нашу директорию en , создаем файл header.php , вставляем массив и вставляем переведенные фразы.

Тоже проделаем с footer , копируем массив, переходим в директорию en, и создаем файл footer.php в который вставляем наш массив и переводим фразы.

Включим шаблон в настройках сайта

Перейдем в административный раздел, Настройки продукта, Cайты, Список сайтов, открываем текущий сайт, спускаемся в самый низ и в Шаблонах укажем наш созданный шаблон «Лендинг», сохраняемся.

Переходим в визуальную часть и смотрим, что у нас получилось.

Шаблон загрузился, но нет основной картинки. Скорей всего это связано с тем что ранне файл стилей находился в папку styles , но мы его переместили на директорию выше в файл template_styles.css тем самым путь к нему изменился, и для нормального отображения картинки нам нужно откорректировать данный файл.

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

Давайте это поправим, перейдем в наш шаблон, откроем template_styles.css , находим код для вывода картинки, убираем [../] , так как текущий файл находится в основной директории шаблона. Сохранимся, перейдем на сайт и посмотрим отображение. Видим, появилась иконка загрузки и картинка слайдера.

Обновляем главную страницу, спускаем вниз, и у нас все нормально выводится. Давайте проверим английскую версию наших заголовков, для этого в настройках шаблона меняем язык на Английский и сохраняемся. Переходим в визуальную часть и все заголовки, которые мы выносили отдельно в leng файлы изменились.

Резюмирую:

При создании footer , если из него нужно вынести фразы в leng , не забываем прописать проверку подключения ядра и подключение языковых файлов.

Если из основного шаблона меняем путь файла style.css , тогда изменяем этот путь в самом коде, так как относительно данного файла картинки будут находиться в другой директории.

Прописывая путь, с помощью константы «SITE_TEMPLATE_PATH» , не забывайте ставить в конце ее флешь.

На этом урок по Установке HTML заканчиваю , в следующих видео будем выводить некоторые блоки в отдельные включаемые области. С программируем компоненты, форму и так далее.

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

Шаблон битрикс — это набор php-файлов, файлов стилей, изображений, а также шаблонов компонентов. Все шаблоны расположены в папке /bitrix/templates/ и могут применяться как один шаблон к нескольким сайтам, так и несколько шаблонов к одному сайту. На странице Настройки → Настройки продукта → Шаблоны сайтов в административной панели отображается список доступных в системе шаблонов.

Установка нового шаблона

Шаблон битрикс представляет собой архив.tar.gz, содержащий все необходимые php-файлы, файлы стилей, скрипты и картинки. Установить новый шаблон можно, как просто распаковав архив в папку /bitrix/templates/, так и воспользовавшись формой на странице Настройки → Настройки продукта → Шаблоны сайтов в административной панели битрикс. На этой странице необходимо нажать на кнопку Загрузить шаблон, выбрать на локальном диске архив с шаблоном и ввести символьный код шаблона.

На рисунке 1 показан список шаблонов в административной панели, на рисунке 2 — форма добавления нового шаблона.

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

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

Применение шаблона к текущему сайту

После того, как шаблон загружен и добавлен в систему, его можно применить к одному из сайтов. Для этого необходимо в административной панели на странице Настройки / Настройки продукта / Список сайтов выбрать сайт, для которого должен быть применен шаблон (на рисунке 3 показан список сайтов в админке).

Откроется форма настройки сайта. Последними параметрами этой формы являются настройки шаблонов сайта. Здесь можно выбрать один или несколько шаблонов, которые будут применяться для данного сайта.

Условия применения шаблонов

Для того, чтобы в рамках одного сайта при разных условиях использовались разные шаблоны, на форме настройки сайта можно указать условия применения шаблона. В системе предусмотрены следующие типы условий: Для папки или файла, Для групп пользователей, Период времени, Параметр в URL, Выражение PHP. Рассмотрим каждое из них детальнее:

Для папки или файла — это условие следует применять, когда разные шаблоны должна применяться для разный страниц и разделов. Для того, чтобы шаблон применялся только для раздела личного кабинета пользователя, в качестве значения этого условия следует указать — “/personal/” — путь к разделу от корневой папки, в котором находится раздел “Личный кабинет”. Если шаблон должен отличаться только для страницы с 404 ошибкой, в качестве значения условия следует указать — “/404.php”.

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

Период времени — хороший пример использования данного условия — новогодняя тема для сайта. Если новогодний шаблон должен применяться на сайте в течении периода времени с 25 декабря по 10 января, нужно указать этот диапазон в качестве згначения условия типа Период времени. После окончания периода шаблон автоматически сменится на шаблон по умолчанию.

Параметр в URL — чаще всего этот тип условия условия используется для создания версии для печати или для тестирования шаблона. Для создания использования шаблона для печати в качестве значения условия этого типа следует указать “print=Y”. Для тестирования нового шаблона в качестве условия можно указать “test=Y” — и на любой странице, если передан параметр test равный Y будет использоваться тестовый шаблон.

Выражение PHP — в качестве значения этого условия может выступать любое выражение PHP, функуия API Битрикс.

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

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

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

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

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

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

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

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

Заходим на сайт Битрикса и качаем инсталлятор ;

Заливаем bitrixsetup.php на сервер и начинаем установку.
Первое, что вам предлагает установочник, это выбрать редакцию:

Выбираете нужный вам дистрибутив (как правило это «Управление сайтом»), если у вас есть ключ, то вводите его, и нажимаете «Загрузить». Процесс пошел…

Если распаковка прошла успешно, значит, вы видите приветственное окно установки

Следующее с чем сталкиваются начинающие программисты это «Обязательные параметры системы», а именно:

Для решения этой проблемы заходим на сервер, открываем файл.htaccess и находим там следующие строки

#php_value mbstring.func_overload 2 #php_value mbstring.internal_encoding UTF-8

Раскомментируем их. Жмем F5 и все работает… Если все же не заработало (а такое иногда бывает), то пишите обращение в тех. поддержку хостинга .

Следующий этап установка базы данных. Тут я думаю расписывать не надо. Поэтому идем далее. Если все хорошо, то вы увидите процесс установки Битрикса:

Добрались до выбора решения, предлагаемые Битриксом. Так как нам нужна чистая система без каких либо дополнений выбираем «Демо-сайт для разработчиков»

Далее нас приветствует стандартный «Мастер»

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

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

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

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

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

... ... ... ... ...

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

... ... ... #WORK_AREA# ...

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

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

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

… …

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

… … …

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

... ... ...

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

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

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

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