Создание сайта на битрикс для новичков. | Создание своего шаблона. документация. | #3

Переходим на сайт 1С Битрикс — dev.1c-bitrix.ru.

На сайте 1С Битрикс в разделе «Разработчикам» выбираем меню «Документация» и «Управление сайтом».

Находим вкладку «Разработчикам» и пункт «Интеграция дизайна». На открывшейся странице слева в разделе «Интеграция Дизайна» выбираем пункт «Верстка базового шаблона». Пошагово показано ниже на слайдах.

Элементы шаблона

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

Основные элементы страницы:

1. Header – в простонародье шапка сайта, дает общее понимание о содержимом сайта. Выполняет роль навигатора. Обычно содержит главные разделы. Интернет-магазины также в шапке размещают формы заказов, контакты, вход в личный кабинет, чтобы у потенциального клиента все было под рукой.
2. Контент – основная информационная часть. Содержит все статьи, товары, фото, видео, опросы, бланки заказов, формы обратной связи, перечислять можно до бесконечности.
3. Sidebar – блок справа или слева. Возможен вариант с двумя сайдбарами. В отличие от контента, сайдбар не меняется, а дублируется на каждой странице. Часто содержит рекламные блоки и боковое меню.
4. Footer или «подвал» – делает страницу завершенной. Также может содержать дополнительную справочную информацию, разделы и т.д.

В отличии от WordPress, в Битрикс не предусмотрен сайдбар.

На примере главной страницы сайта рассмотрим, как работать с элементами. Через FileZilla заходим в корень сайта и находим папку index.рhр. Как работать с файлами через FileZilla подробно в уроке №2.

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

Хедер и футер находятся в корне папки «Активные темы», из нее и подключаются. Ниже идет вызов компонентов: «Наша продукция», «Новости», «Наши услуги» и т.д. Детальнее познакомимся в следующих уроках.

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

Путь к нужной теме пошагово:

1. Заходим в папку bitrix;
2. Ищем папку templates, заходим;
3. Наша тема называется Furniture blue, заходим.

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

Сначала входим в папку header.php и в код хедера добавим название элемента на кириллице.

Сохранить и обновить страницу на сайте.

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

После обновления страница будет выглядеть следующим образом.

Контент находится в файле index.php в корне сайта. Все действия аналогичны.

Внести изменение можно в любой области элемента, достаточно найти соответствующий отрезок кода.

Таким образом: хедер и футер находятся в общем шаблоне, контент лежит в корне сайта.

Создание шаблона

Есть два варианта создания шаблона: с админки и с корня сайта. Документацию сайта создаем через корень сайта и через админку включим его – такой алгоритм рекомендуют разработчики Битрикс.

В корне сайта создаем новую папку под названием local. Важно не забывать, что в папке bitrix корректировки не вносятся.

Создаем тем же способом основу будущего шаблона в виде цепочки папок.

• Папка local, вход;
• Создать папку template, вход;
• Создать папку teh – так будет называться шаблон, вход;
• Создаем файлы: header.php, footer.php, description.

Важно!!! Если открыть хедер или футер из папки bitrix (как это сделать смотрите в начале урока) первое, что стоит в коде – это константа. Своеобразная проверка, которая ограничивает доступ к данным блокам. Другими словами: без константы посетители могут обращаться к хедеру или футеру напрямую и видеть все папки, строение сайта.

Рекомендуется ставить константу в начале всех файлов. Затем прописываем название элемента. Константу можно скопировать с исходного шаблона или воспользоваться кодом ниже.

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile(__FILE__);
?>

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

Содержимое файла description.php копируем из шаблона в файле bitrix.

На слайде выше зеленым маркером указан путь к нужному файлу. Или используйте код ниже.

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile(__FILE__);
?>
<?$arTemplate = Array(
	"NAME"=>  'Шаблон техники', 
	"DESCRIPTION"=> 'Короткое описание шаблона'
);?>

Файл должен иметь следующий вид: константа (копируем из созданных ранее файлов) и код скопированный из одноименного файла в корне файла bitrix.

Задаем значение, обозначенных элементов: 1 (название) и 2 (характеристики).

Непривычное написание команд большими буквами, хотя логичнее написание php маленькими. Битрикс создан в 1998 г. Самая старая в мире CMS – более 20 лет. Скорее всего, такое написание команд является пережитком прошлого, когда кодили с CapsLock.

Перед подключением шаблона следует почистить файл index.php. Файл должен содержать следующий код.

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Мебельная компания");
?>
<p>Контент</p>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Теперь, на админпанели Битрикс, появился созданный шаблон.

В зеленой рамке можно увидеть визуальную версию папки local.

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

Открываем изображение и в выпадающем меню (правая кнопка мыши) выбираем «Проверить объект».

Уточняем месторасположение объекта и название.

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

Заранее подготовленную картинку переименовываем в соответствии с требованием Битрикс и «перетягиваем» прямо с Рабочего стола в шаблон.

Обновляем страницу администрирования Битрикс – в шаблоне появилась картинка.

Чтобы включить шаблон, переходим к списку сайтов в меню слева «Сайты».

Проверяем, как выглядит новый шаблон.

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

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

На выходе должен получиться чистый шаблон с пустыми инфоблоками. Подробно остановимся на теме «Инфоблоки» в одном из следующих видео. В ходе урока мы научились создавать и подключать тему. В следующем видео продолжаем натягивать верстку.