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

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

6.04.20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#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.

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

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

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

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<?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 – выводит все шрифты, стили, скрипты. Метод обязателен, иначе на странице ничего не появится.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
    <?php 
       use \Bitrix\Main\Page\Asset;
       $APPLICATION->ShowHead();
    ?>   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<div id="#panel"><?php $APPLICATION->ShowPanel();?></div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решите все свои проблемы с сайтом: заполните эту форму или напишите мне на почту onesait@mail.ru

    Нажимая на кнопку, Вы соглашаетесь c политикой конфиденциальности.