Как создать шаблон для сайта на 1С-Битрикс
В этой статье мы с вами рассмотрим все особенности создания шаблона для Битрикса с нуля. Не важно, есть у вас готовая верстка, или вы просто перфекционист, которому только дай что-нибудь написать самому без посредников
Какие файлы нужны для создания шаблона
Внешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 1С-Битрикс путь к шаблону лежит через папку bitrix, в которой есть папка templates и уже в ней список всех наших шаблонов.
Путь к шаблонам: /bitrix/templates/
Создать шаблон можно 3 способами:
- можно скопировать готовый шаблон и на его основе изменять под себя
- можно создать через админку пустой шаблон
- можно создать пустую папку и постепенно заполнять ее файлами и папками
Как вы поняли 3-ий вариант самый хардкорный . Зайдем в админку, Администрирование > Настройки > Настройки продукта > Сайты > Шаблоны сайтов > Добавить шаблон.
ссылка относительно сайта: /bitrix/admin/template_admin.php?lang=ru
ID шаблона это по сути имя папки в которой он будет лежать, я назову development. Остальные поля заполните как удобнее, они сейчас не очень важны. В код шаблона добавьте следующий код:
ShowTitle()?> ShowHead()?> ShowPanel();?> #WORK_AREA#
– пишем эту строку, чтобы файл нельзя было вызвать напрямую из браузера и он не начал выполняться;
ShowTitle()?> – показываем текущий title для страницы;
ShowHead()?> – показываем keywords, description и все скрипты;
ShowPanel();?> – показываем панель для админов.
После сохранения шаблона, мой файл description.php, выглядит так:
'Разработка', 'DESCRIPTION' => 'шаблон для разработки', 'SORT' => 1, 'TYPE' => '', ); ?>
Отлично, у нас в корне должны остаться 5 файлов, остальное на данный момент мы не будем использовать:
- description.php,
- header.php,
- footer.php,
- styles.css,
- template_styles.css
Та часть кода, которая находится до #WORK_AREA# в итоге записывается в header.php. Угадайте, какая часть записывается в footer.php (та, что после нее). Сама ворк-арея представляет собой динамический контент (не всегда он такой уж и динамический), который находится, к примеру, в папке /contacts/ или /about/ в файле index.php. Сам файл обычно начинается подключением хедера и заканчивается подключением футера:
Text хир
Пока что, все выглядит логично.
1С-Битрикс папки и структура нового шаблона
В документации есть несколько рекомендаций, которые лично мне не очень нравятся. Во-первых, они любят называть папку с изображениями images вместо сокращенного img. И, я конечно все понимаю, но когда вы пишите стили, вам в любом случае нужно ссылаться на изображения, зачем писать в 2 раза больше? . Во-вторых, была такая рекомендация, хранить включаемые области в папке include_areas – почему бы не создать inc? В-третьих, зачем нам 2 файла со стилями? Если мне захочется вынести все в отдельный файл и подключать потом по необходимости, то эти стили будут хранится либо в шаблоне компонента, либо в папке css шаблона.
Если подытожить, наша правильная структура шаблона:
include_areas images components js
Если быть немного бунтарем, то:
inc img components js
Вас в принципе никто не ограничивает, это лишь рекомендации.
И вот мы плавно подошли к первой проблеме – хардкод. Хардкод это когда вы вместо динамических значений, например доменное имя, используете текстовую запись. Большинство начинающих разработчиков не знают про константу SITE_TEMPLATE_PATH, которая в качестве значения хранит путь к текущему шаблону – в нашем случае это /bitrix/templates/development (без слеша в конце, обратите внимание). И поэтому, когда вы будете подключать свои скрипты или включаемые области, для папки нужно писать:
и уж точно НЕ НУЖНО ПИСАТЬ:
Зачем нам динамический путь к шаблону спросите вы?
- нам не нужно запоминать имена всех шаблона и помнить в каком именно мы сейчас шаблоне работаем
- если мы поменяем имя шаблона, нам не нужно будет искать в файле это имя и исправлять на новое
- легко запомнить
Думаю, тут сплошные плюсы. Ну хорошо, это что касается PHP файлов, в которых мы можем использовать константу. А как насчет картинок и стилей? В CSS стилях пишите относительные пути.
Если это дополнительный файл со стилями и находится в папке css (редкий случай):
url('../img/ico-menu.png');
если это styles.css или template_styles.css
url('img/ico-menu.png');
Никогда НЕ пишите вот так:
url('/bitrix/templates/development/img/ico-menu.png')
хотя бы по причине того, что имя шаблона вдруг придется переименовать. И да, если вы скопировали пути с firebug, тоже удаляйте лишнее.
Какие изображения хранить не в шаблоне а в корневой папке images?
Все довольно просто – те, которые вы будете использовать по всему сайту, особенно полезно если у вас много шаблонов. В стандартном шаблоне это изображение ошибки 404, думаю это хороший пример.
1С-Битрикс включаемые области для шаблона
Код подключения включаемой области очень простой. В случае если наша папка находится в корне:
IncludeComponent("bitrix:main.include", "", array("AREA_FILE_SHOW" => "file", "PATH" => SITE_DIR."include/company_logo.php"), false);?>
Если в шаблоне, то:
IncludeComponent("bitrix:main.include", "", array("AREA_FILE_SHOW" => "file", "PATH" => SITE_TEMPLATE_PATH."/inc/company_logo.php"), false);?>
Во включаемые области лично я советую выносить практически все, где есть текст или изображения. Вот представьте, структура вашего шаблона, ее адаптивная основа, написана на bootstrap, к примеру, а содержимое каждого блока, можно легко отредактировать при помощи включенного визуального редактора. При этом, у вас уже есть прочный скелет, который не сломает всеми горячо-любимые визуальные редакторы.
Этих знаний вполне достаточно для экспериментов и создания простых шаблонов, но это лишь вершина айсберга, ведь мы не рассмотрели компоненты, скрипты, как показывать контент на разных страницах и много чего другого. Если вам интересно продолжение данной статьи дайте мне об это знать в комментариях .
Надеюсь, этот материал поможет вам легко создавать новые шаблоны для 1С-Битрикс .
Как выглядит по шагам Прототип -> Шаблон -> Готовый сайт, вы можете посмотреть на моем сайте портфолио:
https://forwww.ru/portfolio/vash-proekt/
Если вам необходимо создать сайт на 1С-Битрикс, доработать функционал на уже созданном проекте, или просто сверстать макет по шаблону Фотошоп или Figma, обращайтесь, буду рад помочь
автор: Dmitriy
З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com
Читайте також:
8 коментаря
Виктор :
Здравствуйте, Дмитрий. Хочу поблагодарить Вас за интересную статью. Я сам столкнулся с битриксом при разработке сайта. Ваша информация ускорила выполнение работы. Пишите еще .
Dmitriy :
Спасибо вам за отзыв Ждите продолжения, впереди много интересного
Дмитрий! Здорово что вот так можно найти опыт знающего человека в сети ! Дайте знать если заинтересованы в разработке шаблона на Битриксе.
Dmitriy :
Спасибо, заходите к нам еще
Добрый день, в начале пропустили слово “Настройки продукта”,
Администрирование > Настройки > “Настройки продукта” > Сайты > Шаблоны сайтов > Добавить шаблон
Dmitriy :
Добрый день, спасибо, поправил
Hosting :
Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.
Екатерина :
Где узнать про шаблоны битрикс это
Залишити відповідь Скасувати відповідь
Щоб відправити коментар вам необхідно авторизуватись.
Шаблоны в Битрикс. Создание, изменение и удаление
После установки системы управления сайтом 1С-Битрикс необходимо выполнить настройку системы. Первым делом — настроить дизайн сайта. Для этого нужно сделать шаблон дизайна и назначить его на все страницы или определённую папку. Разберём подробнее.
Шаблон — это дизайн обрамления страниц сайта. Один шаблон может использоваться для отображения множества страниц. Можно провести грубую аналогию: если картина — это страница сайта, то рамка картины — это её шаблон.
Шаблон сайта на Битриксе
Войдите в панель администрирования. В боковом меню выберите пункт «Настройки». Затем кликните на подпункт «Настройки продукта», затем на «Шаблоны сайтов»: Откроется страница, на которой будут перечислены все шаблоны сайтов, которые есть в системе: Если необходимо добавить новый шаблон, то кликните на зелёную кнопку «Добавить шаблон». Если нужно изменить или удалить существующий шаблон, то кликните на кнопку опций, сбоку строки шаблона: На открывшейся странице изменения шаблона необходимо указать ID (только латинские символы без пробелов), название и небольшое описание шаблона. Рассмотрим подробнее строение шаблона битрикса, которое находится внутри блока под названием «Внешний вид шаблона сайта (рабочую область заменить #WORK_AREA#)«. В этом поле стоит подобный шаблон:
ShowTitle();?> #WORK_AREA#
Пример начинается со строчки с PHP кодом. Этот код не даёт поисковым сетям считывать файл шаблона и считать его за отдельную страницу. То есть перейдя по ссылке — адресу шаблона на вашем сайте, нельзя будет увидеть его содержимое.
В шаблоне можно использовать PHP код. В реальных проектах к этому часто прибегают для отображения/скрытия элементов шаблона в зависимости от раздела сайта.
В примере указана фраза #WORK_AREA# внутри шаблона. Вместо этой фразы будет вставляться содержание страницы. Если в редакторе, в поле редактирования шаблона, не указать эту фразу, то система не даст сохранить изменения в шаблоне.
При сохранении шаблона битрикса происходит следующее: код, который был записан в поле «Внешний вид шаблона. » будет разделён на две части. Разделителем будет фраза #WORK_AREA#. Первая часть называется хидером (шапкой) сайта и записывается в файл, который находится по адресу /bitrix/templates/id_шаблона/header.php . Вторая часть, которая стояла после фразы #WORK_AREA#, называется футером (подвалом) сайта, будет сохранена в файл /bitrix/templates/id_шаблона/footer.php . Вы можете самостоятельно исправлять содержимое этих файлов не используя административную панель битрикса, делая это через sFTP.
Рекомендуем ознакомиться со статьями. описывающими редакторы файлов на сервере: «Средство разработки: Notepad++» или «Средство разработки: Atom»
Установить шаблон для страницы
После создания или изменения шаблона, необходимо установить его для страниц сайта. Можно поставить шаблон для определённой страницы, для всех страниц в папке или даже для параметра в адресе.
Для задания страницам сайта шаблона зайдите в панель администрирования, кликните на пункт «Настройки» в боковом меню. Затем кликните на пункт «Настройки продукта», потому на «Сайты». Кликните на пункт «Список сайтов»: Откроется страница, на которой будут перечислены все сайты, которые есть в системе: Если необходимо добавить новый сайт, то кликните на зелёную кнопку «Добавить сайт». Если нужно изменить или удалить существующий сайт, то кликните на кнопку опций, сбоку строки нужного сайта: Прокрутите страницу в самый низ и найдите блок «Шаблон сайта». В этом блоке необходимо выбрать условия применения шаблонов к страницам сайта: Если выбрать опцию [без условия], то выбранный шаблон будет показываться на всех страницах сайта.
Обратите внимание, что этот список применяемых шаблонов работает по такому принципу: условия будут проверяться на «истину», и будет показан первый шаблон и того условия, которое вернёт истину. Поэтому для изменения приоритетов есть поле «Сорт.». Условия проверяются по возрастанию значения этого поля.
ШАБЛОН сайтов / Устанавливаем свой шаблон для разделов
Имея сайт на 1С битрикс, мало кто задействует функционал по управлению шаблонами, а ведь это немало важная часть веб-ресурса. На сайте мы можем создавать мобильные версии его отображения, показывать их по определенному условию, изменять оформление для разделов так и страниц, менять его полностью структуру в зависимости от времени суток, а также показывать различным группам пользователей абсолютно разный дизайн.
Преимущество данного механизма это примеры персонального оформление сайта в праздничные дни, или проведения каких-то акций, которые начинаются и заканчиваются в определенное время суток. Также можно создавать различного рода условия, которые будут срабатывать и автоматически менять дизайн при помощи встроенных различных шаблонов, а как это все делается, читайте далее.
Формирование дизайна шаблонов
Прежде чем показать, как все подключается и настраивается, давайте разберемся, каким образом это все работает.
Шаблоны находятся в директории «templates» и особенность их является отделения логики от отображения.
Первое что должны понять, вся информация в инфоблоках это своего рода база данных, которая остается не изменой, при различном оформлении дизайна сайта. Что бы, мы не делали с дизайном, это, не каким образом на контент с инфоблоков не влияет, за исключением тех случаев, когда редактируем содержание инфоблоков через визуальную часть.
То есть, есть база данных, где хранится вся информация вашего контента. Также имеется шаблон, который эту информацию представляет в определенном визуальном оформлении. И таких шаблонов может быть множество, у нас есть возможность эти шаблоны, переключать между собой при помощи настроек сайта.
Установка шаблонов
Самостоятельное создание шаблона в 1С Битрикс.
Все шаблоны размещаются в административной части сайта на страничке Настройки > Настройки продукта > Сайты >Шаблоны сайтов . Обладая той или иной лицензией, у Вас уже будут предустановленные шаблоны в системе. Мы можем их изменять, удалять и делать с ними все, что нам угодно.
При работе с шаблонами обязательно сделайте резервную копию сайта, это поможет в случае чего сэкономить время.
У меня в системе установлены два шаблона, стандартный интернет магазина и шаблона сайта из маркеплейс.
На примере интернет магазина проведем ряд операций, удалим шаблон, а затем восстановим его в системе. При этом посмотрим, что будет происходить с сайтом.
Сейчас страница сайта отображается, в таком виде.
Давайте сохраним текущий шаблон, а затем его удалим. Нажимаю на следующую иконку, выбираю скачать, указываю, куда его загрузить, и подтверждаю свои действия. Затем выделяю данный шаблон, жму на этот крестик и подтверждаю свои действия на удаления.
Теперь посмотрим, что получилось на главной странице сайта, переходим в ее визуальную часть, обновляем страничку, и видим, что все оформление сайта сбросилось.
На главной странице отображаются товары из каталога, так как компонент находится на индексной странице в области WARKAREA , и он подгружает товары из инфоблока. Если мы очистим индексную страницу, тогда главная страница сайт будет отображаться пустой, и это не удалит товары с сайта, так как они находится в БД.
Вернем сохраненный шаблон, для этого п ереходим в «шаблоны сайтов», жмем кнопку «Загрузить шаблон», затем выбираем наш шаблон для загрузки , код шаблона автоматически подставляется из названия папки, привязываем его по умолчанию к нашему сайту и жмем загрузить.
Затем посмотрим его отображение, откроем главную страничку, обновляем ее, и сайт полностью отображается в том виде, когда его сохраняли.
Для примера давайте подключим второй шаблон, установленный у нас в системе к определенному разделу. Я предварительно создал раздел и разместил в нем необходимые файлы для его отображения.
Перейдем в настройки списков сайтов, открываем наш текущий сайт, спускаемся в самый низ до шаблонов, тут выбираем шаблон simai, а в поле «тип условия» указываем отображать для папка или файла и прописываем свою папку, сохраняемся и проверяем что получилось.
Для этого перейдем в визуальную часть, откроем раздел simai. Перед нами совсем другой дизайн сайта.
Таким образом, можем назначать разное оформление как разделам, файлам, так и отображать их по каким то условиям. Давайте на примере интернет магазина, сделаем копию шаблона и отредактируем ее как нам нужно. Данную копию будем отображать по определенному условию.
Переходим в шаблоны сайтов, копируем шаблон, и немного отредактируем его год. Для начала поменяем название, затем удалим правый сайтбар, для этого спустимся где начинается его код и удалим данное условие.
Затем в настройках сайта пропишем дополнительные условия при которых будет отображаться текущий шаблон, для этого выбираем шаблон копия и в колонке «Тип условия» укажем параметр URL «?demo=Y», жмем применить, смотрим что получилось.
Как видите пропал правый сайтбар, если убрать данный параметр с браузерной строки то он возвращается обратно.
Шаблоны также можно отображать по времени, где можно назначать дату, когда он будет отображаться и когда снят с публикации, а также можно задавать отображение шаблонов для определенных групп пользователей, сам принцип я думаю, Вам понятен.
Шаблоны в 1С Битрикс достаточно удобны и функциональны. Их использование во многом раз ускоряет и упрощает разработку проекта, делает сайт более функциональным и дает возможность заменить текущий дизайна, а также отдельно создать новый.
Кто для себя узнал, что-то новенькое не забывайте поделится материалом в социальных сетях.
Где найти файл tempale.php в Bitrix
Приветствую! Подскажите, новичку в Bitrix , где найти файл tempale.php ? Я с этой CMS раньше не работала. А сейчас по работе подогнали сайт на Bitrix , мне нужно добавить мета-теги , тайтл . Нашла мануал, как это сделать. Вроде бы несложно, простым добавлением определенной строки в файл tempale.php :
AddHeadString('ваш_код',true)?>
А я, блин, не знаю где его найти — этот файл. В принципе, я разобралась где менять html -код страниц. Но эти изменения возможны для тегов секции body . А добавить новые мета в head так не получится. Куда копать? С битриксом в первый раз работаю. Спасибо!
Отслеживать
47.9k 17 17 золотых знаков 56 56 серебряных знаков 100 100 бронзовых знаков
задан 21 дек 2017 в 13:50
731 11 11 серебряных знаков 24 24 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Ну видно, что ранее не работали с Битриксом.
Учитывая, что Битрикс работает на компонентах, то вам нужно сначала узнать какой именно компонент используется на той странице, которая вам нужна.
Например в каталоге, это скорее всего будет bitrix:catalog , но так же есть кастомные самописы, узнать какой компонент можно зайдя на индексную страницу нужного раздела. Например вам нужно прописать метатеги у товаров.
Путь у каждого товара допустим вот такой: сайт.ру/catalog/код_товара/ В таком случае в проекте заходим в папку catalog и открываем index.php чтобы посмотреть какие компоненты тама содержатся. Их может быть несколько. В данном примере нам нужен будет bitrix:catalog. Ну а тут как повезёт. Либо разработчики сделали всё по правилам и создали шаблон сайта в папке /local/templates/ либо НЕ по правилам в папке /bitrix/templates/ в любом случае наш template.php будет находится по таким путям (а там сами смотрите как у вас реализовано):
1) Если по правилам кастомный компонент /local/components/название_пространства_к_которому_относится_компонент/название_компонента/templates/название_шаблона/template.php
2) Если по правилам кастомный компонент, но шаблон его в шаблоне сайта /local/templates/название_шаблона_сайта/components/название_пространства_к_которому_относится_компонент/название_компонента/название_шаблона/template.php
3) если кастомный НО НЕ ПО ПРАВИЛАМ, то тогда 2 верхних случая, только вместо папки local, будет папка bitrix.
4) Если стандартный компонент по правилам /local/templates/название_шаблона_сайта/components/bitrix/название_компонента/название_шаблона_компонента/template.php
5) Если стандартный компонент, НО НЕ по правилам, то тогда 4ый пункт, вместо local будет bitrix
Вот пути где могут хранится ваши template.php
Узнаёте какой шаблон сайта, через админскую панель, на index.php в нужных каталогах, узнаёте какой компонент нужен и какой шаблон. например
Это кастомный компонент, samovar — пространство , user.profile — название компонента, profile — шаблон. Стало быть по правилам путь до tempate.php будет такой:
Но вашу проблему это НЕ решит! Вам нужен даже НЕ template.php , а component_epilog.php
Потому что компоненты битрикса кешируют свои шаблоны и просто ваши значения закешируются и для разных товаров, будут одни и те же теги) component_epilog.php НЕ кешируется.
И вообще META теги можно задать в настройке элемента в админке в табе SEO, а для страниц через фронтОфис через панель управления. В компоненте установить чекбокс в параметрах, «устанавливать ключевые слова» «описание страницы» и т.д. по аналогии. Даже если это делать через код, то явно не при помощи
А через $APPLICATION->SetPageProperty(‘код свойста’,’string’);
title задаётся через $APPLICATION->SetTitle(‘string’);
Ну и при этом это не всё. Битрикс это тёмный лес, в котором можно сделать одно и тоже 100500ю способами.
Если что component_epilog.php должен быть РЯДОМ с template.php. Если его нет, то его нужно создать и первое, что в нём сделать, это добавить пролог Битрикса.