Заказать
Заказать

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #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.

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

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

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

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

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

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

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

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

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

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

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Для чего нужна FileZilla
Следующий этап обучения начнем с настройки FileZilla. Это FTP-клиент, и он находится в свободном доступе. Один из самых простых и многофункциональных менеджеров файлов, который поможет скачать или загрузить файлы с FTP-серверов, легче и быстрее находить и редактировать их. Если Вы хотите узнать подробнее, где лучше скачать и как установить FileZilla, пишите в комментариях и я расскажу об этом в одном из следующих видео.

Чтобы подключиться по удаленному серверу через FTP-клиента FileZilla понадобится логин и пароль. На Макхосте необходимые данные находятся в левом меню «Мой аккаунт» во вкладке «Пароли аккаунта».

Во вкладке находятся все пароли и логины Ваших услуг на хостинге.

С вкладки «Пароли аккаунта» (слайд выше) копируем Хост, Имя пользователя (логин), пароль и вставляем в настройки подключения через FileZilla (слайд ниже).

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

Справа в разделе «Удаленный сайт» в папке httpdocs будет находиться вся информация сайта распределенная по отдельным папкам.

Создание и редактирование блоков сайта

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

Основные вкладки необходимые для работы:

  1. Создание и изменение разделов и страниц;
  2. Сбросить, обновить кеш — очень нужная опция. На время разработки сайта рекомендуется отключать.
  3. Режим правки — возможность редактировать все элементы страницы, содержание статьи, добавить (удалить) пункт меню или изменить его название. Ниже рассмотрим детальнее.
  4. Свернуть или развернуть панель.

Чем Битрикс отличается от классической CMS

Битрикс не только CMS, а и конструктор. Для обычной CMS также возможно собрать подобный функционал, расширить возможности. Но стоимость и сложность себя не оправдывают. Битрикс по праву можно охарактеризовать, как статично-динамичную CMS -создавать ряд блоков, возможность править. В Битриксе вся информация, новости, статьи выводятся напрямую из хостинга. В классической CMS контент хранится в базе данных. Такое отличие является одновременно и плюсом и минусом: с одной стороны делает сайт на Битриксе значительно быстрее, с другой – сложно разобраться в большом количестве папок. Отдельные файлы находятся в отдельных папках, изначально все сайты так создавались. Сегодня можно отойти от этой практики, но в Битрикс без изменений.

Детальнее о редакторе

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

Одно нажатие кнопкой мышки — и в другом окне можно редактировать или полностью заменить текст. По завершению СОХРАНИТЬ.

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

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

Все изменения отображаются сразу после сохранения. Разделы меню двигаются при помощи мыши.

Добавить новости и выбрать категорию.

Работать достаточно просто. Не имея значительных навыков ведения сайтов, можно вносить изменения, добавлять новый материал.

Визуальный режим редактора

Рассмотрим визуальный режим редактора. Текст в виде HTML – кода. Изменение не самого содержания статьи, информации, а оформления. Другими словами, при помощи кода можно вставить ссылку разделить текст на абзацы и тд.

По желанию пользователя отформатировать новость можно при помощи опций на панели или вручную. Для удобства редактор выводит текст в 4 режимах: в виде кода, текста, одновременно(в двух вариантах расположения в окне).

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

Структура Битрикс: разрыв шаблона

Рассмотрим структуру Битрикс на примере раздела «О компании». Сам код в корне сайта найти крайне сложно. Пользователей изначально удивит местоположения файла. Править блоки можно и проще, как показано выше. Но и такой доступ в дальнейшем понадобится.

Возвращаемся к FileZilla. Ищем папку company.

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

Открываем index.pxp.

Непривычное расположение. Что-то лежит так, другая часть в базе. С большим объемом материала сложно. Элементы хранятся в отдельных папках, работать над каждым будем отдельно. Терпимо, если речь идет о сайте-визитке или небольшом простом сайте, который мы будем создавать в ходе обучения. Большие информационные порталы, Интернет-магазины править таким способом неудобно. Но как уже упоминалось, подобная структура позволяет ускориться, что особенно актуально для тяжелых сайтов с внушительным количеством подразделов. При просмотре сайта нагрузка на базу данных значительно меньше, файлы показываются напрямую и сайт не «виснет», быстро загружаются элементы страницы.

В файле видны все компоненты, с которыми мы ознакомимся. Рассмотрим, как подключили Header и Footer, необычное расположение картинки. Но об этом более детально в других уроках.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

CMS Битрикс — сейчас достаточно популярна. Выбор шаблонов на MarketPlay огромен, но на них вы далеко не уедете, так как  дизайнер предоставляет уже готовый проект, в котором Вы не всегда найдете готовое решение именно в шаблоне и поэтому нужно верстать. В видео данная вёрстка уже готова.

Наша задача в этом уроке натянуть готовую верстку на Битрикс.                                                      

Начнем с установки Битрикса.

Для установки Битрикс я использую Mchost.ru.

Панель хостинга

Основной особенностью сайта является возможность установки Bitrix без дополнительных скачиваний, и мы можем установщик поставить прямо из хостинга.
Лицензия Битрикса  платная, можно купить минимальный тариф  за 5500 рублей. Но так же можно в течении 30 дней бесплатно потестить эту CMS. Я Вам показываю на бесплатной  лицензии на 30 дней.

Установка приложения.
Заходим на главную страницу Mchost.ru.

Ищем 1С Битрикс. Загружаем.

Далее выбираем домен.
Если у Вас нет домена, Вам нужно его купить. Так же вы можете купить хостинг по моей партнерке, плюс ее в том, что Вы получите 3 месяца бесплатного хостинга.

Создаем базу данных и подключаем домен.

Ждем подключения базы.

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

Устанавливаем Битрикс, пока загружается база.
Выбираем самую простую Старт.

Далее в установке нет ничего сложного.

Заполняем все поля.
Добавляем ранее созданную базу, имя пользователя, пароль. Выбираем существующую базу данных.

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

Выбираем решение для установки (вообще в принципе без разницы что выбрать).

Выбор темы.

Далее все тоже оставляем как есть.

Переходим на сайт.

Чтобы перейти в админ панель – нужно вести домен сайт/bitrix/  Затем вести логин и пароль.

На этом я хочу закончить этот урок.