Урок 3. Создание шаблона 1С Битрикс (Foundation)
Приветствую! Продолжаем создавать интернет магазин на редакции Старт CMS Битрикс и в этом уроке займемся, уже более интересными вещами. А именно создадим шаблон Битрикс на основании нашей верстки на CSS-фреймворке Foundation, которую я описывал в предыдущем уроке.
403 Forbidden You don’t have permission to access / on this server
Отлично! Начнем свое повествование с ошибки )). Дело в том, что я сам растерялся получив эту ошибку, уже думал у меня перестало работать Веб-окружение Битрикс или порт заблокировался. Но оказалось все проще, мы просто в прошлом уроке удалили файл index.php из папки сайта, а сервер по умолчанию не дает просматривать содержимое папки и выдает ошибку доступа.
По этому чтобы больше не пугаться и не пугать вас проверим работу веб-сервера apache командой phpinfo() .
Для этого создадим в корневой папке нашего проекта файл index.php и заполним его простым содержанием.
В веб-окружении Битрикс сайт находится по пути C:\BitrixVM\www .
В этом уроке я буду пользоваться самым доступным редактором кода Notepad++, он бесплатный, легковесный и имеет подсветку синтаксиса (PHP, HTML, CSS) очень удобно в нем редактировать текстовые файлы. Единственное советую сразу установить плагин explorer и тогда у вас появится слева панель дерева файлов, что значительно повысит удобство работы с блокнотом. (В дальнейшем я наверное в других уроках познакомлю вас с другими редакторами кода, такими как NetBeans, Visual Studio Code и может другими).
Вот такой у нас будет файл. И теперь если выполнить открытие сайта через веб-окружение мы уведем информацию о настройках php.
Устройство шаблона Битрикс
Сейчас Битрикс с внедрением ядра D7 рекомендует располагать шаблон и другую кастомизацию в папке local в корне сайта. Напомню раньше шаблоны располагались в папке bitrix ( www/bitrix/templates ). На самом деле это было не очень удобно, и тем что в папке bitrix много системных файлов, и тем, что при бекапе только публичной части сайта шаблоны не попадали в архив. Теперь все гораздо удобнее и вся кастомизация изолирована от ядра даже на уровне папок.
Создадим папку local , в коне сайта, а в ней папку templates , и ещё папку с названием шаблона startshop .
Минимальный набор шаблона Битрикс
- description.php— файл описания шаблона. Это описание будет отображаться в административной части битрикс (в админки).
- styles.css — это стили которые будут использоваться при редактировании контента (нужен контент менеджеру, у нас будет пустым)
- template_styles.css — основной файл css-стилей шаблона (в нем будем создать собственные стили)
- header.php — файл содержит шапку шаблона
- footer.php — файл содержит подвал шаблона (в этих файлах мы будем редактировать шаблон)
Если лень создавать файлы вручную, то набор файлов шаблона можно скачать от сюда.
Шаблон Битрикса устроен интересным образом. Он разбит на 2 файла header.php и footer.php. В админке же весь текст шаблона объединяется в одно целое. А разделителем на два файла служит специальная строка #WORK_AREA#.
Из админки открыть шаблон можно в разделе Настройки продукта -> Сайты -> Шаблоны сайтов.
Т.е. все что выше разделителя #WORK_AREA# попадает в header.php, а что ниже в файл footer.php. Вместо разделителя выводится контент сайта через какой-либо компонент, например news (новости).
Не очень понятная структура скажете вы. И я соглашусь. Например, в joomla примерно такое же устройство шаблона, как и в Bitrix, как бы это было не парадоксально. Но файл шаблона один, а вывод контента сделал через вызов специального компонента. Почему так не сделал Битрикс? Я думаю такое устройство шаблона эта дань традициям, ведь Битрикс поддерживает совместимость со всеми предыдущими своими редакциями. И в связи с этим они не могут поменять структуру шаблона, как основу проектирования сайтов.
И чтобы у нас хоть что-то начало открываться давайте отредактируем файл index.php в корне сайта, заполнив его таким содержимым.
require($_SERVER[‘DOCUMENT_ROOT’].’/bitrix/header.php’);
$APPLICATION->SetTitle(«Главная»);
?>
Магазин Start Shop
Внедрение собственной верстки в шаблон Битрикс
Копирование исходников шаблона
Наконец-то начнем внедрять шаблон. А в начеле скачем, если ещё не скачали шаблон интернет-магазина StartShop. И распакуем в папку C:\BitrixVM\www\local\templates\ . Должно получится вот так:
Теперь нужно подключить добавленный шаблон в админки Битрикса. Авторизуемся если вы этого ещё не сделали добавив адресной строке к адресу сайта bitrix/ . Например так http:/localhost:6449/bitrix/. Затем нужно авторизоваться, перейти в раздел администрирования Настройки продукта — Сайты — Список сайтов. Выбрать единственный сайт и открыть его на изменение.
В открывшийся форме Параметры сайта выбрать наш единственный шаблон.
Нажать Сохранить.
Но наша страничка не изменится. Во-первых в индексной страничке нет никаких данных, а во-вторых пока что в файлах Битрикс шаблона header.php и footer.php у нас пусто. Заполнением их мы и займемся в первую очередь.
Верстка шаблона Битрикс
И все таки ещё чуть чуть теории. Я выше уже рассказывал, что шаблон Битрикса делится на две части, теперь покажу на примере, как мы разделим свой шаблон.
Зеленым квадратом выделены данные которые попадут в шапку (header.php), синим, то что попадет в подвал (footer.php) и желтым выделен контент, т.е. то что будет выводится компонентом Битрикс, который мы разместим в файле index.php. При навигации по сайту переходя в разделы шапка и подвал будут оставаться всегда одинаковыми, а контент меняться на вывод содержимого файла index.php того раздела в который вы перешли.
Чтобы открыть файлы, которые мы будем верстать я их специально оставил в шаблоне. Это два файла ecommerce-grid-x.html и product-page-grid-x.html. Вы можете их просто открыть двойным кликом мыши в браузере. Использоваться в работе шаблона они не будут, но мы будем из них брать верстку и помещать в файлы шаблона Битрикс. Ну и сравнивать результат.
Открываем в редакторе notepad++ (или в любом вашем любимом) два файла header.php и ecommerce-grid-x.html. И начинаем переносить необходимый нам код. Первым делом перенесем начало верстки и раздел .
Код:
И заменяем определение CSS на вызовы API Битрикс.
Код:
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/jquery.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/foundation.min.js’);
?>
ShowTitle();?> — здесь мы определяем заголовок сайта, который задан в админки Битрикс.- ShowHead();?> — выводим все необходимые объявления Битрикс в . Это и стили Битрикс для административной панели, и подключения его скриптов и другие файлы о которых можно пока не задумываться.
- /ico/favicon_bx.png»> — здесь мы подключаем фавикон. SITE_TEMPLATE_PATH это ещё одна глобальная переменная которая будет подменена на путь к папке текущего шаблона.
- $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.’/css/foundation.css);— этой строкой мы подключаем стили.
- $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/foundation.min.js’);— а так мы подключаем скрипты JavaScript.
Ну а теперь вставим код меню, который в последствии мы заменим на вызов компонента Битрикс.
Код:
И ещё выведем одну важную вещь — выведем панель администрирования Битрикс. Чтобы нам стали доступные все возможности управления сайтом из публичной части. Битрикс этот функционал называет Эрмитаж. Для этого сразу после тега нужно вывести строчку показа Битрикс-панели.
Код:
ShowPanel();?>
Вот такая панель появляется вверху если пользователь авторизовался, как администратор. Очень удобно и в дальнейшем мы её будем постоянно пользоваться.
.
На этом пока работу с head.php закончим и перейдем к foter.php. В подвал мы скопируем конец файла нашего исходного примера ecommerce-grid-x.html.
Код:
Тут обращу внимание на один момент, чтобы заработали скрипты CSS-фреймворка Foundation в конце шаблона нужно прописать код JavaScript с инициализацией скриптов.
Код:
Теперь можно обновить страницу и увидеть уже почти работающий сайт! Вот что вы должны увидеть на экране если все сделали правильно.
Собственно все, шаблон внедрен. Дальше остается внедрять компоненты Битрикс, но это уже в следующих статьях.
От автора:
Уже что-то готово. Мы познакомились с основой основ Битрикс — шаблонизатором. В следующем уроке мы создадим стрктуру нашего сайта и выведем главное меню через соответствующий компанент. Подписывайтесь не пропустите новых статей.
Как создать шаблон в 1с битрикс
Роберт Басыров
Сложность урока:
2 уровень — несложные понятия и действия, но не расслабляйтесь.
Недоступно в лицензиях:
Ограничений нет
Управление шаблонами дизайна осуществляется в административном разделе на странице Шаблоны сайта ( Настройки > Настройки продукта > Сайты > Шаблоны сайтов ), где можно:
- Создать новый;
- Отредактировать существующий;
- Импортировать/Экспортировать шаблон;
Создание шаблона
Шаблон дизайна сайта может быть создан непосредственно в системе с помощью формы Новый шаблон, для перехода к которой служит кнопка Добавить шаблон, расположенная на контекстной панели.
При создании нового шаблона через интерфейс задается:
- его идентификатор;
- название;
- описание для показа в списке;
- порядок следования в общем списке;
- тип;
- код внешнего вида сайта;
- таблицы стилей:
- Закладка Стили сайта служит для описания таблиц каскадных стилей (CSS), используемых на страницах сайта. Описание стилей хранится в файле styles.css в папке шаблона сайта.
- Закладка Стили шаблона служит для описания таблиц каскадных стилей (CSS), используемых в шаблоне. Описание стилей хранится в файле template_styles.css в папке шаблона сайта.
При сохранении шаблона автоматически создается поддиректория /bitrix/templates/ .
Все используемые графические элементы рекомендуется размещать в директории /bitrix/templates//images/ .
Примечание: На время создания шаблона рекомендуется отключить кеширование.
Для наглядного представления шаблона в списке может использоваться его скриншот. Скриншот размещается в папке соответствующего шаблона в файле с именем screen.gif (например, /bitrix/templates/books/screen.gif ).
Редактирование шаблона
Чтобы просмотреть или поменять структуру и программный код шаблона, перейдите в режим редактирования, выбрав в меню действий пункт Изменить в списке шаблонов, либо используйте пункт Редактировать шаблон меню кнопки Шаблон сайта на административной панели в Публичном разделе.
Ранее была возможность редактировать шаблон дизайна, как с использованием визуального редактора, так и работая с исходным кодом. С версии 14.0 эта опция отключена.
Внимание! В шаблоне дизайна сайта категорически не рекомендуется использовать комплексные компоненты.
Экспорт/Импорт шаблона
С помощью интерфейса системы используемый на сайте шаблон может быть выгружен в файл формата .tar.gz. Для выгрузки шаблона служит пункт контекстного меню Скачать.
Готовый шаблон можно импортировать в виде комплекта файлов с помощью менеджера файлов либо с помощью специального интерфейса системы. На странице со списком шаблонов имеется специальная кнопка контекстной панели Загрузить шаблон.
При нажатии на кнопку открывается форма:
-
С помощью кнопки Обзор. укажите файл с шаблоном для загрузки.
Примечание: Файлы шаблона должны быть в кодировке UTF-8.
При загрузке по умолчанию шаблон будет распакован и помещен в папку с именем, соответствующим имени загружаемого файла ( /bitrix/templates// ). Например, если имя загружаемого файла template1.tar.gz , то шаблон будет автоматически помещен в папку . /template1/ , а самому шаблону будет присвоен идентификатор (ID) template1.
Создание шаблона под Битрикс
Шаблоны 1С Битрикс имеют особую структуру, существенно отличающуюся от структуры шаблонов других CMS. Система Bitrix Framework, настроена на удобство работы пользователя, поэтому разработан ряд новшеств, среди которых: включаемые области, отдельные компоненты, модули и прочее. Сам шаблон, в отличие, например от бесплатных CMS, разбит на две части header и footer, где в верхней части располагается все, что предназначено до рабочей части, после идет нижняя часть в которой расположено все, что после рабочей части. Сама же рабочая область в шаблоне Битрикс, имеет обозначение #WORK AREA#, прописывать в шаблоне данное выражение не нужно, если идет речь о PHP или HTML, то следует просто разделить верхняя часть header и нижняя часть footer.
Сегодня в интернете существует множество площадок, где возможно купить готовый дизайн сайта или интернет магазина с готовым шаблоном, версткой и исходниками. За адаптацией данного шаблона в систему управления сайтом 1С Битрикс, можно обратиться к нашей команде специалистов. Ввиду того, что мы являемся сертифицированными партнерами 1С Битрикс и имеем накопленный опыт работы с CMS 1С Битрикс, так же среди реализованных проектов есть перенесенные см. (перенос сайта на 1С битрикс) с других CMS таких как Joomla, WordPress, Drupal и других, то создание сайта и адаптация функционала из готового шаблона занимает около 2-3 дней.
Мы сегодня
Что отличает нас? Это наша способность воплотить ваши идеи и бизнес задумки в интерактивные представления, именно они превосходят все существующие стандарты, так как трансформированы в доступный, инновационный, ценный и гибкий веб ресурс.
ООО «Драйв проджект»
г. Екатеринбург
ул. Фрунзе 35А,
Литер А4 оф. 2
- Заявка
- Контакты
- Поддержка
Видеоурок №4: создаем шаблон битрикс из HTML/CSS макета сайта
Интегрируем HTML/CSS верстку в битрикс, создаем на ее основе шаблон для системы управления. Рассказываю об устройстве шаблонов битрикс. Интегрировать будем верстку созданную нами во втором уроке. Скачать готовую можно по ссылке скачать (кому лень смотреть второй урок).
Все серии
- Видеоурок №1: вводный
- Видеоурок №2: верстка макета на HTML/CSS
- Видеоурок №3: установка битрикс на виртуальную машину
- Видеоурок №4: создаем шаблон битрикс из HTML/CSS макета сайта
- Видеоурок №5: создание меню
- Видеоурок №6: создаем простые инфоблоки и выводим на сайт
- Видеоурок №7: включаемые области в битрикс
- Видеоурок №8: создание слайдера
- Видеоурок №9: наводим марафет на сайте
- Видеоурок №10: создание каталога товаров
- Видеоурок №11: перенос сайта на хостинг
- Видеоурок №12: верстка каталога в Битрикс
- Видеоурок №13: выводим анонсы каталога
- Видеоурок №14: послесловие и немного тупняка с Яндексом
Комментарии к видео
Илья 26.02.2015
Нашел проблему с прижатием футера к низу.В стилях прописан не класс it_asist,а просто как элемент.Просто добавьте точку и футер внизу окажется)))
Влад 06.05.2015
Помогите, пожалуйста, не подключаются стили, добавил команду ShowHead()?>, и ничего
chybakabra 03.03.2017
Михаил, здравствуйте! Спасибо вам за видео-уроки. В одном из видео-материалов вы говорите о том, что можно посмотреть сайт по адресу http://asistant.camouf.ru/, понимаю, что времени прошло много с момента написания материала, но по данному адресу сайт не открывается.
Михаил Базаров 03.03.2017
| Цитата |
|---|
| chybakabra написал: Михаил, здравствуйте! Спасибо вам за видео-уроки. В одном из видео-материалов вы говорите о том, что можно посмотреть сайт по адресу http://asistant.camouf.ru/ , понимаю, что времени прошло много с момента написания материала, но по данному адресу сайт не открывается. |
LiKang 06.07.2017
Добрый вечер, Михаил. Все сделал как у Вас в уроке. Все классно. Только вот у Вас одна программа, а у меня WinSCP на Windows. В видео на 13 минуте 11 секунде — нажимаем на админ. панели Изменить страницу — В визуальном редакторе. Требуху добавляем, и потом идем в программу WinSCP. Ну а Вы у себя в другую программу. Я не смог найти index.php. по тому же адресу, по которому он у Вас расположился. Нашел еле-еле. Потом пытался открыть его как Вы это сделали в программе в виде «липесточка».) Скачал в самом начале урока DreamW. а index.php в WinSCP нельзя редактировать да? NotePad++ открыл, и увидел, что это именно тот индекс.php. Вроде разобрался. Все круто. Спасибо за видео уроки. Идем к следующему уроку. 🙂
Михаил Базаров 07.07.2017
| Цитата |
|---|
| LiKang написал: Добрый вечер, Михаил. Все сделал как |
Добавте в WinSCP редактор SublimeText — как-то, сильно по удобнее станет сразу)
ksulya4 22.11.2017
Добрый вечер! Спасибо за понятные уроки с комментариями что, где и зачем 🙂 дошла до 7 минуты 4-го урока и оказалось, что у меня нет папки ext_www. Что мне делать? Её можно самой создать? Или это какая-то ошибка и надо что-то переустанавливать? У меня последние версии: Виртуальная машина BitrixVM7.1.0 с объемом диска 20 Гб для VirtualBox, Transmit, Dw, а OS X El Capitan — 10.11.3.
Михаил Базаров 22.11.2017
| Цитата |
|---|
| ksulya4 написал: Добрый вечер! Спасибо за понятные уроки с комментариями что, где и зачем дошла до 7 минуты 4-го урока и оказалось, что у меня нет папки ext_www. Что мне делать? Её можно самой создать? Или это какая-то ошибка и надо что-то переустанавливать? У меня последние версии: Виртуальная машина BitrixVM7.1.0 с объемом диска 20 Гб для VirtualBox, Transmit, Dw, а OS X El Capitan — 10.11.3. |
Можете продолжать работать в папке www — там ваш сайт и лежит. Либо добавить сайт в виртуальную машину- тогда он появится в папке ext_www (ее и создаст)
ksulya4 24.11.2017
| Цитата |
|---|
| ksulya4 написал: Добрый вечер! Спасибо за понятные уроки с комментариями что, где и зачем дошла до 7 минуты 4-го урока и оказалось, что у меня нет папки ext_www. Что мне делать? Её можно самой создать? Или это какая-то ошибка и надо что-то переустанавливать? У меня последние версии: Виртуальная машина BitrixVM7.1.0 с объемом диска 20 Гб для VirtualBox, Transmit, Dw, а OS X El Capitan — 10.11.3. |
| Цитата |
|---|
| Михаил Базаров написал: Можете продолжать работать в папке www — там ваш сайт и лежит. Либо добавить сайт в виртуальную машину- тогда он появится в папке ext_www (ее и создаст) |
В папке «www» есть папка «asistant», но в ней лежит лишь один файл «index.php», если его открыть в Dw, то выскакивает сообщение: «Не удалось обнаружить динамически связанные файлы, поскольку отсутствует определение веб-сайта для данного документа. Настройка».
Возможно, это из-за того, что я ранее некорректно удалила сайт с битрикс: от него остались картинки, может, и другие мелочи. Я их заметила, пока в Transmit искала место, где прячется футер с компанией. Нашла по адресу: ip/home/birtix/www/bitrix/templates/asistant. Но у них та же беда, что у «index.php» — открытие сопровождается вышеупомянутым сообщением об отсутствии определения веб-сайта. В общем, я совсем запуталась — не знаю, каким папкам там место, а каких быть не должно. Хочу начать заново, пока я на пробных версиях. Что мне переустановить, чтобы чистенько было и я могла бы только с одним сайтом работать по вашим урокам?
Михаил Базаров 25.11.2017
Да просто грохние все) И установите сервер и битрикс с нуля. Иначе можно долго и разбираться и не известно, где что вылезет еще
Мои видео на Boosty:
Поделиться страницей: