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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Продолжаем работать и изучать CMS Битрикс. В этом уроке мы будем интегрировать наш шаблон, натягивать готовую верстку на Битрикс.

На прошлом уроке мы создали папку с темой. Подключили футер и хедер. А контент, папка index.php (главный файл), остался без изменений. Напомню, что футер и хедер подключаются идентично, из активной темы.

Продолжим. Переносим шаблон в корень сайта.

Шаг 1: Разбивка макета на элементы

Заходим в макет и открываем следующие папки.

Из файла index.html следует скопировать код полностью и перенести в index.php вместо «контент» (5строка). В дальнейшей работе index.html не понадобится — закрываем.

Подготовим футер и хедер. Из файла header.php удаляется 5 строка – «Хедер!»; из fоoter.php — 4 строка, «Футер». После обновления шаблон выглядит как на слайде.

Так как ничего не подключено (стили, скрипты), страница получила такое оформление.

Рассмотрим шаблон более детально. Откроем исходный код: левой кнопкой мышки — выпадающее меню «исследовать объект». Выводится код шаблона из трех элементов: футер, хедер и контент.

Первоочередная задача – разбить макет правильно и разнести соответствующие фрагменты кода шаблона по нужным файлам. Код можно копировать через вкладку «исследовать объект» или работать в index.php, куда ранее был скопирован код шаблона.

 Обращаю внимание, что хедер часто содержит картинки и видео. Следует убедиться, что элемент скопирован полностью. В данном шаблоне копируем код с 7 до 90 строчки включительно. Переносим информацию в файл header.php, из файла index.php удаляем.

Аналогично переносим код в файл fоoter.php – копируем с 68 по 96 строку включительно. Из index.php вырезаем ненужный фрагмент. Сохраняем все изменения. На странице видимых изменений не произойдет, а значит все подключено правильно.

Футер и хедер закрываем. Эти элементы едины для всех страниц – будут выглядеть одинаково на каждой странице.

Шаг 2: Выводим Title

На начальном этапе title выводится из шаблона, а должен — из CMS.

Редактируем код, начиная с 13 строке. Открываем php без эхо, так как объект APPLICATION в любом случае будет выводиться.

Вызываем ShowTitle у объекта APPLICATION – и проверяем результат.

<title><?php $APPLICATION->ShowTitle(); ?></title>

Шаг 3: Подключаем стили

Редактируем код с 14 строчки по 18-ю до строчки 19 – «/head».

Открываем php код, прописываем addCss. Чтобы не писать постоянство имен для каждого стиля, импортируем путь при помощи метода use. То есть параметру переданному методу прописываем путь к скрипту. Также прописывается константа SITE_TEMPLATE_PATH, которая возвращает путь к активному шаблону, чтобы Битрикс понимал, что и где лежит. И добавляем путь к стилю. В данном случае используется 4 стиля – копируем код и прописываем соответствующий путь. Не забываем поставить итоговый слеш. Код, обозначенный синим маркером, после редактирования следует удалить.

Ниже готовая подсказка. Замените содержимое строк 14-18 готовым кодом ниже.

<?php 
       use \Bitrix\Main\Page\Asset;
    ?>
    
    <title><?php $APPLICATION->ShowTitle(); ?></title>
    
    <?php 
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/normalize.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/owl.carousel.min.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/main.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/responsive.css");
    ?>

Также следует перенести содержимое темы (видео, картинки и т.д) в папку teh.

Шаг 4: Адаптируем под мобильные устройства

Выводим meta name=veiwport – метатег, позволяющий контролировать видимую область сайт для мобильных браузеров. Простым языком: позволяют приспособить сайт для удобного просмотра при помощи мобильного телефона и других гаджетов с разным разрешением экрана.

10-12 строки удаляются. Отредактированный код вставляем после шрифтов. Также используем метод Asset но вместо addCss пописываем addString — выводит произвольный код, произвольную строчку, скрипты. Копируем код макета. Вторая строка для Интернет-Экспл.

<?php 
        Asset::getInstance()->addString('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">');
        Asset::getInstance()->addString('<meta http-equiv="X-UA-Compatible" content="ie=edge">');
?>
 

Таким же способом подключаются шрифты Google Fonts. В скобках ставится Google Fonts и прописывается ссылка. Напоминаю, что двойные кавычки главнее одинарных.

Команда APPLICATIOH — Show – выводит все шрифты, стили, скрипты. Метод обязателен, иначе на странице ничего не появится.

    <?php 
       use \Bitrix\Main\Page\Asset;
       $APPLICATION->ShowHead();
    ?>   

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

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

Обязательно команда APPLICATIOH – Show (зеленый маркер), так как в данном случае скрипты находятся в футере и хедере, хотя обычно подключаются из футера.

Чтобы получить прокрутку, можно добавить больше картинок в файл index.php.

Шаг 6: Как вывести изображение и подключить логотип

Появился макет, но без картинок и видео. Есть бетафоны, подключились скрипты выпадающего меню. Чтобы вывести картинки, копируем константу и прописываем в каждом изображении после главных кавычек. Не забываем о слеш.

<?=SITE_TEMPLATE_PATH;?>/

Также выводим изображения в футере и логотип.

Шаг 7: Как отобразить видео

Видео находится в хедере – 92 строка. Путь прописан настолько нестандартно, что даже у опытных пользователей могут возникнуть серьезные затруднения. Константа вставляется после двоеточия.

Шаг 8: Подключенте рабочей панели Битрикс

Конечно, можно войти в админку Битрикс, но пропишем в коде. За подключение панели отвечает метод APPLICATIOH – Show Panel. Вставим код после «body»-32 строка.

<div id="#panel"><?php $APPLICATION->ShowPanel();?></div>

После обновления появится окно для входа администратора. Переходим по вкладке «Сайт» — рабочая панель появилась.

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

Чтобы окончательно разобраться в принципе работы Битрикс, рассмотрим код страницы через google. Копируем адрес сайта, заходим через Гугл, в выпадающем меню левой кнопки мышки выбираем «просмотреть код страницы».

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

Для правок такая оптимизация достаточно неудобная. На рабочей панели во вкладке «Настройки» — «настройка модулей» есть возможность отключить объединение элементов в один документ.

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

Шаг 9: Отключаем кеширование

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

Во время разработки сайта будет много изменений, так кеш не будет накапливаться.

Шаг 10: Как создавать страницы и разделы

На админпанели Битрикс перейти на вкладку «Сайт» — «Создать страницу», в выпадающем меню выбираем соответствующий пункт. В появившемся окне вводится имя страницы. Зеленым обозначено имя файла этой страницы в корне сайта через Файлзилла.

Нажимаем «Далее», в следующем окне ничего не заполняем и кликаем «Готово». Откроется окно редактирования страницы.

На панели инструментов содержится ряд опций для редактирования текста. Мы уже рассматривали выборочно возможности этого окна, и будем останавливаться более детально в следующих уроках. На данный момент пока ничего не размещаем, оставляем текст образец (в зеленой рамке).

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

Соответствующий файл и папку теперь можно найти в корне сайта через FileZilla.

Смотрим код страницы.

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

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

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