Опубликовано:
Создаем свой шаблон сайта на Битриксе

Урок 2: создаем шаблон сайта в Битриксе

Содержание:

Введение

Наша задача в этом уроке – создать простейший шаблон Битрикса на основе готовой верстки. Архив с версткой можете скачать по ссылке: https://alfavitka.ru/downloads/gruzovichok.zip. Демо-страничка верстки: https://alfavitka.ru/demo/gruzovichok/.

Создаем шаблон сайта в настройках

На вкладке «Администрирование» идем в Настройки=>Настройки продукта => Сайты => Шаблоны сайтов и нажимаем кнопку «Добавить шаблон»:

Нажимаем кнопку Добавить шаблон

В открывшейся форме заполняем поля на вкладке «Шаблон»:

ID – идентификатор шаблона (а также название папки шаблона), используем латинские буквы/цифры. Пусть будет alfavitka

Название – как хотим, так и называем, например, Учебный шаблон

Описание – необязательное поле, заполняем по желанию. Я введу Создаем шаблон с нуля

Порядок – порядок отображения шаблона в списке шаблонов (можно не заполнять)

Тип – выбираем «Шаблон сайта»

Внешний вид шаблона сайта – сюда мы можем вставить HTML код шапки и подвала сайта, разделив их плейсхолдером #WORK_AREA#. Однако, чтобы получше разобраться с системой шаблонов Битрикса, мы сделаем немного по-другому: давайте пока не будем вставлять сюда верстку, а просто вставим плейсхолдер #WORK_AREA# (чуть позже будет понятно, зачем он нужен).

Вкладки «Стили сайта» и «Стили шаблона» предназначены для добавления стилей, но их мы тоже пока что оставим пустыми.

Обязательные поля мы заполнили, сохраняем шаблон:

Сохраняем шаблон

Отлично, он появился в списке шаблонов:

Шаблон создан

Теперь зайдем в настройки сайта и установим наш (пока еще пустой) шаблон. Настройки => Настройки продукта => Сайты => Список сайтов => Кликаем на ID сайта, чтобы перейти к его настройкам:

Идем в настройки сайта

Проматываем страницу к блоку «Шаблон сайта», в первом поле выбираем наш шаблон и сохраняем изменения:

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

Теперь, если мы перейдем в публичный раздел сайта, то больше не увидим сообщение «Шаблон не найден». То есть всё ок, Битрикс принял наш шаблон. Сейчас наша главная страница выглядит следующим образом:

Главная страница обновилась
Обратите внимание, что также пропала панель администратора, которая раньше отображалась в самом верху страницы. Так и должно быть, мы вернем ее чуть позже.

Знакомимся со структурой шаблона

Давайте посмотрим, из чего состоит созданный нами шаблон. Для этого по FTP перейдем в папку шаблона. В Битриксе шаблоны сайта лежат в папке /bitrix/templates/ , если мы зайдем туда – увидим следующий набор папок:

Папка с шаблонами

Это три шаблона, которые сейчас есть у нас на сайте.

.default – папка шаблона сайта по-умолчанию: он подключается, если нет никаких других шаблонов (именно он использовался Битриксом до тех пор, пока мы не создали и не выбрали в настройках наш собственный шаблон).

landing24 – папка стандартного шаблона, который используется для создания лэндингов в рамках Битрикса (этот функционал в рамках данного курса мы рассматривать не будем).

alfavitka – это папка нашего шаблона (совпадает с ID шаблона, который мы указали при его создании).

Зайдем в папку нашего шаблона и видим следующий набор файлов:

Наш новый шаблон

Быстренько разберемся, для чего нужен каждый из этих файлов.

.styles.php – файл для описания стилей, которые используются в визуальном редакторе Битрикса (с ним мы разберемся в следующих уроках).

description.php – здесь хранится текстовое название шаблона, описание и другая информация:

Описание шаблона

footer.php – содержит код подвала сайта.

header.php – содержит код шапки сайта.

Сейчас эти файлы пустые, потому что на этапе создания шаблона мы не внесли в них никакой код.

styles.css – содержит стили сайта (с этим файлом мы разберемся в следующих уроках).

template_styles.css – содержит стили шаблона сайта.

Эти файлы также пустые, т.к. при создании шаблона их мы не заполняли.

Вставляем HTML в шаблон и на главную страницу

Если в начале урока вы не скачали архив с версткой – скачайте его по ссылке https://alfavitka.ru/downloads/gruzovichok.zip

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

Контент главной страницы

Всё, что выше контента – вставляем в файл шаблона header.php, весь код под контентом – в файл footer.php

Заголовок h1 тоже можно отнести к контенту, но т.к. этот тег у нас будет на каждой странице сайта – вынесем его в шапку.

Главная страница нашего сайта немного изменилась:

Главная страница без стилей

Т.к. в нашей верстке есть контент для главной страницы – давайте вставим его на главную страницу нашего сайта. Через FTP-менеджер идем в корень сайта и открываем файл index.php, видим следующее содержимое:

Содержимое главной страницы

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

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

Вставляем новый контент на главную

Главная страница сайта стала еще чуть более информативной:

Главная страница с новым контентом

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

Верстку мы добавили, теперь подключим стили и скрипты. В нашем HTML шаблоне есть папка css-js, которая содержит файлы CSS-стилей и JS-скриптов. Давайте загрузим ее в папку Битрикс шаблона /bitrix/templates/alfavitka :

Папка шаблона

В header.php у нас есть 2 файла со стилями:

<link href="css-js/bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">    
<link href="css-js/styles.css" rel="stylesheet">

Файл bootstrap.min.css – это файл-библиотека, который в будущем мы точно не будем редактировать. Поэтому подключаем его как дополнительный файл стилей. Для подключения дополнительных файлов со стилями в Битриксе используется следующий код:

<?$APPLICATION->SetAdditionalCSS(путь_к_файлу_стилей);?>

В нашем случае код будет иметь следующий вид:

<?$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css-js/bootstrap-4.0.0-dist/css/bootstrap.min.css');?>
Константа SITE_TEMPLATE_PATH в Битриксе содержит путь к папке текущего шаблона сайта. Поэтому всегда используем данную константу при подключении стилей/скриптов из папки шаблона.

Секция head в нашем шаблоне теперь выглядит следующим образом:

Вывод стилей через SetAdditionalCSS

Теперь разберемся со вторым подключаемым файлом стилей styles.css – он содержит стили шаблона, которые мы в перспективе точно будем редактировать. Поэтому стили из этого файла мы вставляем в файл шаблона template_styles.css. Сам файл styles.css из папки css-js можем удалить. Также удаляем подключение этого файла из секции head, в итоге она выглядит следующим образом:

Удалили подключение файла styles.css

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

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

Этот код выводит не только все подключенные CSS-стили, но и JS-скрипты, а также мета-теги Content-Type, robots, keywords, description. Вставляем этот код в самый конец секции head, в итоге она выглядит следующим образом:

Функция ShowHead
Обратите внимание, что мы нигде не подключали файл стилей шаблона template_styles.css, т.к. этот файл автоматически подключается Битриксом.

С подключением стилей мы разобрались, наш шаблон приобретает более-менее приемлемый вид:

Теперь давайте подключим JS-скрипты. В файле footer.php у нас есть две строчки со скриптами:

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

Как и в случае со стилями, для подключения JS-скриптов в Битриксе есть своя функция:

<?$APPLICATION->AddHeadScript(путь_к_файлу_скрипта);?>

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

<?$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/css-js/jquery.min.js");?>
<?$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/css-js/bootstrap-4.0.0-dist/js/bootstrap.min.js");?>

Также давайте перенесем подключение скриптов из подвала в шапку.

Обычно JS-скрипты переносят в подвал сайта, чтобы они не замедляли скорость загрузки сайта. Как в Битриксе перенести подключение скриптов в конец сайта – разберемся в одном из следующих уроков.

В итоге секция head будет выглядеть следующим образом:

Функция AddHeadScript в Битриксе

Теперь на мобильных размерах экрана меню будет разворачиваться/сворачиваться при клике на иконку «гамбургера»:

Меню заработало

Прописываем актуальные пути к картинкам

Сейчас у нас на сайте есть две картинки, которые не отображаются. Во-первых, нам нужно загрузить их на хостинг: из локального HTML шаблона загружаем папку images в папку шаблона на нашем хостинге:

Загрузили папку картинок

Теперь, чтобы картинки отобразились у нас на сайте, в атрибуте src каждому тегу img нужно указать актуальный путь к файлу изображения. Обе картинки теперь лежат в папке images внутри папки шаблона. Как вы уже догадались, здесь нам опять поможет константа SITE_TEMPLATE_PATH. Код подключения логотипа теперь выглядит так:

<img src="<?=SITE_TEMPLATE_PATH;?>/images/logo.png" alt="Логотип">

Аналогично используем SITE_TEMPLATE_PATH для получения пути картинки в контенте на главной странице (файл index.php в корне сайта):

<img src="<?=SITE_TEMPLATE_PATH;?>/images/index-image.jpg" alt="Наш автопарк">
Во втором случае не очень уместно подключать картинку из папки шаблона, т.к. изображение относится к контенту конкретной страницы => оно не должно быть привязано к какому-либо шаблону (ведь в будущем у сайта может поменяться шаблон, а значит, что это изображение может оказаться недоступным). Но пока оставим всё как есть, а в следующих уроках разберем правильный вариант добавления картинки в контент страницы.

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

Итоговый вид главной страницы

Выводим панель администратора

Напоследок давайте выведем панель администратора в самое начало страницы. Для вывода панели администратора в Битриксе используется следующий код:

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

Разместим этот код в header.php сразу после открывающего тега body:

Битрикс ShowPanel
При желании, панель администратора можно вывести и в подвале сайта (перед закрывающим тегом body). Это может помочь в том случае, если в шаблоне сайта используется абсолютное/фиксированное позиционирование элементов и верстка шаблона из-за этого конфликтует с панелью администратора.

Панель администратора отобразилась:

Вывели панель администратора

На этом закончим данный урок. В следующем уроке познакомимся с компонентами битрикса на примере компонента «Меню» и научимся создавать новые страницы сайта.

Другие посты из этой же рубрики:

Перейти в рубрику