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

На чтение
мин
Опубликовано
08.02.2020
Просмотров
2930
В этой статье мы создадим тему для собственного шаблона. Рассмотрим темы Битрикс.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

Создание сайта на Битрикс для новичков. Создание своего шаблона. Документация.#3Проверять правильность подключения элементов мы уже научились в ходе урока. Пробуем добавить любой знак или текст.

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

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

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

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

Если статья была полезной подписывайтесь
Подписаться
Если у вас остались вопросы или нужен разработчик сайта, напишите мне в Telegram или WhatsApp
Также вы можете позвонить мне по номеру телефона +7 (904) 634-38-92

Обсудим ваш проект

Если у вас остались вопросы, напишите мне в Telegram или WhatsApp, или заполните форму обратной связи

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