Как установить скачанный шаблон в 1с битрикс. Создание шаблона Битрикс

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

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

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

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

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

Заходим на сайт Битрикса и качаем инсталлятор ;

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

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

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

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

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

#php_value mbstring.func_overload 2 #php_value mbstring.internal_encoding UTF-8

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

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

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

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

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

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

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

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

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

... ... ... ... ...

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

... ... ... #WORK_AREA# ...

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

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

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

… …

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

… … …

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

... ... ...

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

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

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

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

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

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

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

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

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

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

2017 .

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

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

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

Затем заменим заголовок "Контакт", создаем массив с ключом «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 , находим код для вывода картинки, убираем [../] , так как текущий файл находится в основной директории шаблона. Сохранимся, перейдем на сайт и посмотрим отображение. Видим, появилась иконка загрузки и картинка слайдера.

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

Резюмирую:

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

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

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

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

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

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

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

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

Регистрируем аккаунт на Макхост
Вводим E-mail, промокод и вуаля, мы имеем три месяца бесплатного хостинга.

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

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

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

Display_errors - On
default_charset - "UTF-8"
mbstring.func_overload - 2
mbstring.internal_encoding - "UTF-8"

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

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

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

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

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

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

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

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

Урок подготовил Горелов Денис.

17 декабря 2012 в 18:49 Интегрцаия шаблона на 1С-Битрикс

• CMS ,
• 1С-Битрикс

• Tutorial

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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