Как установить шаблон на 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 часть, за исключением содержимого между тегами и (оставить можно подключение различных скриптов). После обязательно добавить
- вместо удаленных в секции head метатегов, заголовка, подключений css файлов размещаем вызовы функций битрикс, которые будут динамически формировать эти данные
В footer.php целиком записываем 3ю часть
- ко всем относительным путям добавляем /bitrix/templates// Например, было
Подключаем скрипты
Затем, чтобы отображались наши мето-данные, мы задействуем метод «ShowHead» , он выведет наши мета данные страниц, а также подключит скрипты из шаблона. Заменяем на вызов метода.
$APPLICATION->ShowHead(); // подключения скриптов со страницы шаблона
Подключение title
Следующим этапом подключаем title при помощи метода «ShowTitle» .
$APPLICATION->ShowTitle(); // вывод title
Подключение директорий файловЗатем укажем путь к нашим файлам при помощи константы «SITE_TEMPLATE_PATH» , она помогает определить директорию, где они находятся.
// путь к директории шаблона (обязательно поставить флешь в конце).
Выносим языковое фразы
Теперь вынесем языковые файлы, которые будем подключать без компонентов, то есть напрямую через шаблон. Для этого создадим соответствующею директорию, где они будут храниться. Создаем папку 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 Битрикс.
Шаблоны сайтов применяются в соответствии со значением индекса сортировки. Если для страницы может быть использовано несколько шаблонов, будет выбран тот, что имеет больший индекс сортировки. Поэтому внимательно указывайте сортировку шаблонов — неправильная расстановка индексов сортировки может привести к неприятным ошибкам.
Не забывайте, что “не следует множить сущее без необходимости”, т.е., если какую-то задачу возможно решить без создания дополнительного шаблона, то лучше дополнительный шаблон не создавать. Это связано с тем, что копируя шаблон для внесения незначительных изменений, вы вынуждаете себя поддерживать несколько одинаковых файлов, одновременно вносить правки в несколько шаблонов.
Итак, мы рассмотрели процесс управления шаблонами: загрузку в систему нового шаблона, применение шаблона к сайту, условия применения разных шаблонов на странице. В следующих статьях мы перейдем непосредственно к созданию собственного шаблона.
Привет друзья, это продолжение к сери уроков, а точнее пятый урок по созданию 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.
Урок подготовил Горелов Денис.