Меню Рубрики

Установка html шаблона битрикс

3 урок: Варианты внедрения HTML шаблона в битрикс

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

Урок, Варианты внедрения HTML шаблона в битрикс, это третье видео из серии уроков «Интеграция шаблона в систему 1С Битрикс». В данном видео речь пойдет о структуре сайта, файлов и папок. Разберем варианты интеграции таких шаблонов и выберем оптимальный вариант для себя.

Введение – HTML шаблоны в Битрикс

Когда хотим внедрить шаблон на сайт, нам нужно визуально разделить сайт на три части. Где верхняя часть выделенная синим цветом является header.php , зеленая это рабочая область #WORK_AREA# , а красная часть дизайна это footer.php .

Более подробно об это, как формируется страница, я рассказывал в видео уроке «Структура сайта».

Давайте посмотрим нашу html верстку шаблона сайта.

Вы можете скачать архив и на практике, повторяя за мной, натянуть шаблон на 1С битрикс.

Открываем index.html и через фаербаг посмотрим структуру данной странички.

Сайт состоит из одной страницы и в данном случае реализовать установку шаблона можно несколькими способами:

1. В рабочую область, нечего не помещать, распределяем блоки между footer.php и header.php .

2. Мы убираем весь код в header.php до секции section (блок счетчик), остальное до тега footer помещаем в рабочую область, оставшийся код в footer.php .

3. Другой вариант, поместить в рабочую область только блок «Характеристика», код выше характеристики в header , а ниже характеристики в footer .

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

Для удобства администрирования желательно все блоки распределить не в рабочей области #WORK_AREA# , а поместить их в header , а в footer поместить подвал сайта.

Давайте разделим верстку для нашей интеграции шаблона. Как видите все рабочие блоки, мы включили в header , а нижнею часть в сам footer .

Управление шаблонами, структура шаблона

Управление шаблонами в Битрикс осуществляется в административном разделе.

Перейдем в раздел администратора, далее выбираем >> Настройки продукта >> Сайты >> открываем Шаблоны сайтов. Тут видим один пустой шаблон, который устанавливали из Маркеплейса, открываем его.

В верхней части видим ID сайта, который является важным параметром в шаблоне, название, описание. Ниже размещен сам код, в котором содержится верхняя часть сайта header , и нижняя часть шаблона footer разделенная маркером #WORK_AREA# .

Редактировать шаблон можно напрямую тут, но удобнее всего работать через FTP в своем редакторе.

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

Откроем наш редактор PhpStorm и в нем директорию, в которой лежит шаблон сайта. Для этого переходим в папку bitrix >> templates, и текущий шаблон, рассмотрим подробнее присутствующие файлы.

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

Имеется файл description.php где содержится описание текущего шаблона. Файл template_styles.css в нем хранятся стили шаблона. Файл styles.css тут располагаются стили контента.

В папке templates также содержится дефолтный шаблон, или другими словами шаблон по умолчанию. Это обычный шаблон с отличительной особенностью, в данной папке размещенные компоненты будут доступны при их вызове в других шаблонах, а также файлы, картинки и так далее. Эту папку удобно использовать, когда есть несколько шаблонов и чтобы не прописывать для каждого один и тот же компонент, или стили, их можно все подключать из данной директории.

На этом вводный урок по «Вариантам внедрения HTML шаблона в битрикс» заканчиваю, в следующем видео внедрим верстку на сайт.

источник

Интегрцаия шаблона на 1С-Битрикс

В очередной раз, пытаясь найти себе программиста, который работал с CMS 1C-Bitrix с своем городе натыкаюсь на проблему…

Программисты есть, работавшие с разными бесплатными фреймворками по типу Joomla, WordPress и т.д., но когда дело доходит до Битрикса, все как один говорят: — «Ой, она платная, зачем мне это когда есть куча других бесплатных». И не хотят браться за изучение чего то нового.

Так начинал и я, за исключение одного, мне сразу показали, как что и почему. Но материала в сети и на хабре я так и нашел. По этому начну с простого, как обычному программисту владеющим знаниями PHP и хотя бы базовыми HTML, CSS, JS начать работать c Битрикс.

Читайте также:  Установка и замена гаражных ворот

Про структуру каталогов шаблона говорить не буду, об этом можно почитать тут. Первое, с чем приходится сталкиваться, это интеграция HTML шаблона на CMS.

Допустим, у вас есть готовый HTML шаблон и вам его необходимо интегрировать с системой. Начнем с установки на сервер:

  1. Заходим на сайт Битрикса и качаем инсталлятор;
  2. Заливаем bitrixsetup.php на сервер и начинаем установку.
    Первое, что вам предлагает установочник, это выбрать редакцию:

Выбираете нужный вам дистрибутив (как правило это «Управление сайтом»), если у вас есть ключ, то вводите его, и нажимаете «Загрузить». Процесс пошел…

Если распаковка прошла успешно, значит, вы видите приветственное окно установки

Нажимаем «Далее», принимаем лицензионное соглашение, устанавливаем сайт в кодировке UTF-8 (или нет, по желанию)

Следующее с чем сталкиваются начинающие программисты это «Обязательные параметры системы», а именно:

Для решения этой проблемы заходим на сервер, открываем файл .htaccess и находим там следующие строки

Раскомментируем их. Жмем F5 и все работает… Если все же не заработало (а такое иногда бывает), то пишите обращение в тех. поддержку хостинга.

Следующий этап установка базы данных. Тут я думаю расписывать не надо. Поэтому идем далее. Если все хорошо, то вы увидите процесс установки Битрикса:



Добрались до выбора решения, предлагаемые Битриксом. Так как нам нужна чистая система без каких либо дополнений выбираем «Демо-сайт для разработчиков»



Далее нас приветствует стандартный «Мастер»

С помощью его можно установить демо данные. Нам это не нужно жмем «Отмена».

Все на этом этап установки заканчивается, переходим непосредственно к интеграции шаблона. Заходим в панель администрирования в раздел «Настройки». Далее спускаемся по дереву настоек: Настройки продукта — Шаблоны сайтов, жмем на кнопку «Добавить шаблон»

Открывается стандартная форма создания шаблона.

Придумываете ID (я обычно использую main), вписываете название шаблона. Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько.

Вот тут началось самое интересное. Обычно шаблон HTML страниц выглядит следующим образом:

Тут главное понимать, что относится к шаблону, а что к контентной части. В данном примере контентная часть начинается между тегом section . Поэтому копируем шаблон в поле «Внешний вид шаблона сайта». Между тегом вставляем служебную директиву #WORK_AREA# . В итоге ваш шаблон будет выглядеть вот так:

Если у вас есть CSS, то переходим на вкладку «Стили шаблона» и вставляем его туда.

На данном этапе можно нажать «Сохранить» и посмотреть что получилось. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.

Далее, я обычно редактирую файлы уже через FTP. Открываете свой текстовый редактор (у меня Notepad++, поэтому буду писать не его примере) и заходите на сервер. Весь шаблон Битрикс располагается по адресу /bitrix/templates/название_шаблона/ , если у вас есть картинки или дополнительные файлы стилей, JS скрипты и т.д., то копируете всё в эту папку.

Переходим к заключительной части и прописываем все необходимые переменные Битрикса. Открываем файл header.php и начинаем редактировать. Первое что нужно сделать это, подключить вывод шапки сайта:

Так же мы хотим видеть панель администратора сайта в публичной части сайта:

Чтоб отображался заголовок страницы, добавляем функцию ShowTitle();?> в соответствующий тег. В итоге мы получаем вот такой файл:

Кстати забыл сказать, если всё таки есть дополнительные файлы, будь то JS, CSS, favicon и так далее, то чтоб не прописывать полный длинный путь /bitrix/…/ есть специальная константа SITE_TEMPLATE_PATH . Её и вставляем на нужные места:

Не забываем редактировать пути в CSS, сохраняем все и можете смотреть на получившийся результат.
Ах, да, нужно еще применит созданный шаблон к сайту. Для этого идем в «Настройки продукта — Список сайтов — s1»

Выбираем созданный нами шаблон и жмем «Сохранить», и можем посмотреть результат проделанной работы.

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

источник

Устанавливаем наш ШАБЛОН в 1С-Битрикс

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

Привет друзья, это продолжение к сери уроков, а точнее пятый урок по созданию landing page на CMS 1С-Битрикс.

Так как давно записывал предыдущие уроки, давайте повторно развернем платформу, и перенесем туда шаблон, с которым ранее работали.

Регистрируем Хостинг под 1С-Битрикс

Перейдем в раздел новостей, откроем статью 3 месяца бесплатного хостинга от МАКХОСТ и скопируем из нее промокод (8A93-0ECC-D7AD-4A76) . Затем переходим на Макхост и выбираем пункт в меню CMS хостинг, далее жмем на иконку 1С-Битрикс.

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

Авторизуемся и пополняем баланс на 100 рублей что бы нам активировали аккаунт.

Далее ждем пока аккаунт активируется, в это время получаем еще два письма, с подтверждение платежа и с уведомлением что на сайт загружен файл установки 1С-Битрикс.

После активации аккаунта переходим в настройки PHP и изменяем его конфигурацию под 1С-Битрикс.

Устанавливаем следующие параметры:

Запускаем установщик 1С-Битрикс. Просто копируем ссылку из письма и вставляем ее в браузерную строку.

Далее запускается мастер установки CMS 1С-Битрикс, выбираем нужную нам редакцию, в моем случае это редакция «Старт» и разворачиваем платформу на Макхосте с пустым шаблоном из Маркетплейс.

Устанавливаем ШАБЛОН из предыдущего урока

На данный момент мы установили пустой шаблон Битрикс, по этой причини видим белый экран. Переходим в административную часть, жмем на иконку Контент -> Файлы и папки -> bitrix -> templates . Создаем в данной директории пустую папку под шаблон с названием «lendtv». Переходим в нее и закачиваем шаблон из предыдущего урока. Распаковываем его и удаляем архив он нам больше не понадобиться.

Что бы шаблон подключился нам нужно выбрать его в настройках текущего сайта. Для этого переходим в Настройки -> Настройки продукта -> Сайта -> Список сайтов .

Открываем первый сайт, спускаемся в самый низ и в пункте «Шаблон сайта» выбираем шаблон который ранее мы копировали.

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

Вот таким простым способом можно создавать свои шаблоны и затем переносить их между проектами. На этом все, в следующем уроке разберем как такой шаблон перенести в папку local.

источник

Создание HTML шаблона в 1С Битрикс

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

Видео урок по Создание HTML шаблона в 1С Битрикс, это четвертое видео из серии уроков «Интеграция шаблона в систему 1С Битрикс».

В видео мы с Вами разберем:

  • Как перенести готовую верстку HTML шаблона в Битрикс
  • Подключим скрипты и перенесем структуру сайта в битрикс
  • Подключим языковые файлы и проверим, как это работает
  • Разберем часто встречающие ошибки

Создаем шаблон через административный раздел

Мы не будем использовать текущий установленный шаблон из маркеплейса, а создадим свой с нуля на примере того что есть сейчас. Для этого перейдем в административную часть сайта, Настройки, Настройки продуктов, выбираем Шаблоны сайтов. Добавляем новый шаблон.

Задаем основные настройки шаблона, ID пропишем «lendtv» , в поле название «Лендинг», в описании прописываем «Наш шаблон лендинга», порядок указываем «1», Тип оставляем по умолчанию «Шаблон сайта». Спускаемся ниже.

В данное поле, нам нужно вставить код нашей HTML страницы, который будет разделен макросом #WORK_AREA# , верхняя часть у нас пойдем в header.php , а нижняя часть после макроса в файл footer.php .

Открываем нашу страницу верстки HTML шаблона в редакторе, выделяем код, копируем и вставляем в нашу форму. Мы с Вами условились, что все рабочие блоки отнесем в header . Для этого спускаемся до закрытия секции . Ставим курсор между section и footer , жмем #WORK_AREA# , добавился маркер.

При помощи вставки данного маркера система Битрикс создаст автоматически файлы header.php и footer.php с размещенным в них нашим кодом. Вкладку «Стили сайта» оставляем пустой, в «Стили шаблона» копируем наш основной код стилей из файла style.css, и сохраняемся.

Далее все работы будем проводить через FTP.

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

Пропишем код проверки

Для примера откроем наш установленный шаблон из маркеплейса и скопируем код для проверки константы «B_PROLOG_INCLUDED» , эта константа запрещает запуск данного файла без подключения ядра Битрикс.

if(!defined(‘B_PROLOG_INCLUDED’) || B_PROLOG_INCLUDED !== true) die(); // проверка

Подключение перевода

Подключаем ленговские файлы, отвечающие за перевод нашего шаблона. Вставляем данный код.

IncludeTemplateLangFile(__FILE__); // перевод файлов

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

Затем, чтобы отображались наши мето-данные, мы задействуем метод «ShowHead» , он выведет наши мета данные страниц, а также подключит скрипты из шаблона. Заменяем на вызов метода.

$APPLICATION->ShowHead(); // подключения скриптов со страницы шаблона

Подключение title

Следующим этапом подключаем title при помощи метода «ShowTitle» .

$APPLICATION->ShowTitle(); // вывод title

Подключение директорий файлов

Затем укажем путь к нашим файлам при помощи константы «SITE_TEMPLATE_PATH» , она помогает определить директорию, где они находятся.

// путь к директории шаблона (обязательно поставить флешь в конце).

Вставляем константу к нашим стилям шаблона и обязательно за ней, вставляем флешь. У файла style.css мы код перенесли в templates_styles.css поэтому, он нам не нужен, и можем его удалить.

Укажем данную константу по всему шаблону у подключаемых файлов скриптов, стилей, картинок. Поместим favicon в основную директорию шаблона, заменим в атрибуте type=»png» на x-icon и укажем расширение файла .ico .

При помощи данного сервиса http://www.tools.dynamicdrive.com/favicon/ преобразуем ее в наше расширение и зальем в основную директорию, а favicon.png удалим.

Не забываем в footer.php прописать подключение файлов к текущему шаблону.

Подключение административной панели

Далее сразу за тегом body , подключаем административную панель при помощи метода «ShowPanel» .

$APPLICATION->ShowPanel(); //панель админки

Выносим языковое фразы

Теперь вынесем языковые файлы, которые будем подключать без компонентов, то есть напрямую через шаблон. Для этого создадим соответствующею директорию, где они будут храниться. Создаем папку lang , в ней поддиректории ru и en .

Открываем директорию ru и создаем в ней файл, с которого будем выносить языковые фразы, пишем header.php . В основном шаблоне смотрим, что нам нужно вынести в ленговские файлы. Возьмем из header.php шаблона заголовки наших блоков, открываем leng , формируем массив с первой нашей фразой «В настоящее время мы работаем над удивительным проектом» с ключом «WORKING_PROJECT» , а в header.php пропишем вместо фразы функцию «GetMessage» с нашим ключом «WORKING_PROJECT» .

Далее вынесем «Характеристика», прописываем массив с ключом «CHARACTERISTIC» и вставляем функцию «GetMessage» где передаем параметр данного ключа.

Затем заменим заголовок «Контакт», создаем массив с ключом «CONTACT» , и меняем заголовок на функцию с нашим ключом.

Добавляем фразы в footer.php

Переходим в footer , тут можно вывести данный блок как есть через включаемую область, но для примера давайте вынесем эти фразы в Leng . Переходим в директорию ru и создаем новый файл с названием, у которого будем выносить фразы, пишем footer.php . В нем создаем массив с нашей фразой «ДАЛЬВЕБСТРОЙ» с ключом «COPY_DWS» и вставляем функцию «GetMessage» в основной файл с нашим параметром ключа.

Переносим следующую фразу «Все Права Защищены. Разработанный» в leng с ключом «COPY_RIGHTS» и не забываем заменить фразу в footer на функцию «GetMessage»

Английская версия языковых файлов

Для английской версии, нам нужно создать в директории en соответствующие файлы с такими же массивами только с английским переводом.

Копируем массив из файла header , переходим в нашу директорию en , создаем файл header.php , вставляем массив и вставляем переведенные фразы.

Тоже проделаем с footer , копируем массив, переходим в директорию en, и создаем файл footer.php в который вставляем наш массив и переводим фразы.

Включим шаблон в настройках сайта

Перейдем в административный раздел, Настройки продукта, Cайты, Список сайтов, открываем текущий сайт, спускаемся в самый низ и в Шаблонах укажем наш созданный шаблон «Лендинг», сохраняемся.

Переходим в визуальную часть и смотрим, что у нас получилось.

Шаблон загрузился, но нет основной картинки. Скорей всего это связано с тем что ранне файл стилей находился в папку styles , но мы его переместили на директорию выше в файл template_styles.css тем самым путь к нему изменился, и для нормального отображения картинки нам нужно откорректировать данный файл.

Спускаемся ниже, видим, что в footer не отображается копирайт, и я это намеренно сделал, что бы показать, часто встречающую ошибку.

Давайте это поправим, перейдем в наш шаблон, откроем template_styles.css , находим код для вывода картинки, убираем [../] , так как текущий файл находится в основной директории шаблона. Сохранимся, перейдем на сайт и посмотрим отображение. Видим, появилась иконка загрузки и картинка слайдера.

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

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

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

Если из основного шаблона меняем путь файла style.css , тогда изменяем этот путь в самом коде, так как относительно данного файла картинки будут находиться в другой директории.

Прописывая путь, с помощью константы «SITE_TEMPLATE_PATH» , не забывайте ставить в конце ее флешь.

На этом урок по Установке HTML заканчиваю, в следующих видео будем выводить некоторые блоки в отдельные включаемые области. С программируем компоненты, форму и так далее.

источник

Добавить комментарий