Как создать шаблон сайта для 1с битрикс

Шаблоны в Битрикс. Создание, изменение и удаление

После установки системы управления сайтом 1С-Битрикс необходимо выполнить настройку системы. Первым делом — настроить дизайн сайта. Для этого нужно сделать шаблон дизайна и назначить его на все страницы или определённую папку. Разберём подробнее.

Шаблон — это дизайн обрамления страниц сайта. Один шаблон может использоваться для отображения множества страниц. Можно провести грубую аналогию: если картина — это страница сайта, то рамка картины — это её шаблон.

Шаблон сайта на Битриксе

Войдите в панель администрирования. В боковом меню выберите пункт «Настройки». Затем кликните на подпункт «Настройки продукта», затем на «Шаблоны сайтов»: Откроется страница, на которой будут перечислены все шаблоны сайтов, которые есть в системе: Если необходимо добавить новый шаблон, то кликните на зелёную кнопку «Добавить шаблон». Если нужно изменить или удалить существующий шаблон, то кликните на кнопку опций, сбоку строки шаблона: На открывшейся странице изменения шаблона необходимо указать ID (только латинские символы без пробелов), название и небольшое описание шаблона. Рассмотрим подробнее строение шаблона битрикса, которое находится внутри блока под названием «Внешний вид шаблона сайта (рабочую область заменить #WORK_AREA#)«. В этом поле стоит подобный шаблон:

      #WORK_AREA# 

Пример начинается со строчки с PHP кодом. Этот код не даёт поисковым сетям считывать файл шаблона и считать его за отдельную страницу. То есть перейдя по ссылке — адресу шаблона на вашем сайте, нельзя будет увидеть его содержимое.

В шаблоне можно использовать PHP код. В реальных проектах к этому часто прибегают для отображения/скрытия элементов шаблона в зависимости от раздела сайта.

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

При сохранении шаблона битрикса происходит следующее: код, который был записан в поле «Внешний вид шаблона. » будет разделён на две части. Разделителем будет фраза #WORK_AREA#. Первая часть называется хидером (шапкой) сайта и записывается в файл, который находится по адресу /bitrix/templates/id_шаблона/header.php . Вторая часть, которая стояла после фразы #WORK_AREA#, называется футером (подвалом) сайта, будет сохранена в файл /bitrix/templates/id_шаблона/footer.php . Вы можете самостоятельно исправлять содержимое этих файлов не используя административную панель битрикса, делая это через sFTP.

Рекомендуем ознакомиться со статьями. описывающими редакторы файлов на сервере: «Средство разработки: Notepad++» или «Средство разработки: Atom»

Установить шаблон для страницы

После создания или изменения шаблона, необходимо установить его для страниц сайта. Можно поставить шаблон для определённой страницы, для всех страниц в папке или даже для параметра в адресе.

Для задания страницам сайта шаблона зайдите в панель администрирования, кликните на пункт «Настройки» в боковом меню. Затем кликните на пункт «Настройки продукта», потому на «Сайты». Кликните на пункт «Список сайтов»: Откроется страница, на которой будут перечислены все сайты, которые есть в системе: Если необходимо добавить новый сайт, то кликните на зелёную кнопку «Добавить сайт». Если нужно изменить или удалить существующий сайт, то кликните на кнопку опций, сбоку строки нужного сайта: Прокрутите страницу в самый низ и найдите блок «Шаблон сайта». В этом блоке необходимо выбрать условия применения шаблонов к страницам сайта: Если выбрать опцию [без условия], то выбранный шаблон будет показываться на всех страницах сайта.

Обратите внимание, что этот список применяемых шаблонов работает по такому принципу: условия будут проверяться на «истину», и будет показан первый шаблон и того условия, которое вернёт истину. Поэтому для изменения приоритетов есть поле «Сорт.». Условия проверяются по возрастанию значения этого поля.

Создание сайта на шаблоне «1C-Битрикс»

Не все готовы тратить большое количество времени и ресурсов на создание сайта с индивидуальным функционалом. Порой нужно простое и быстрое решение для закрытия типовых задач. В такой ситуации поможет создание сайта на шаблоне 1-С Битрикс. Расскажем о плюсах и минусах этого подхода.

1. Что такое шаблон сайта на 1С-Битрикс?

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

На сегодняшний день в маркетплейсе 1С-битрикс представлены шаблоны, которые подходят под различные типы сайтов:

• Корпоративные;
• Онлайн-магазины;
• Лендинги;
• Порталы.

Автоматизируем рабочие процессы
Создадим функционал, заботливо настроенный нашими разработчиками вручную

2. Процесс разработки сайта на шаблоне «1С-Битрикс»

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

1. Определяются цели и потребности заказчика, проводится анализ бизнес-процессов, связанных с сайтом;

2. Из маркетплейса специалисты подбирают несколько удачных решений, согласовывают с клиентом и покупают наиболее подходящий вариант;

3. Прописывается ТЗ, где фиксируются все моменты по цветовой палитре, размещения блоков, дополнительного функционала и многое другое;

4. Создается новая структура и внедряется функционал;

5. Все тестируется, заполняется контентом клиента и выходит на хостинг.

Ваш сайт готов и нацелен на высокий результат!

3. Преимущества сайта на шаблоне «1С-Битрикс»

Компромиссом между использованием ограниченного функционала конструктора и заказом индивидуальной дорогостоящей разработки может быть создание сайта на шаблоне 1С-Битрикс». Выделим основные плюсы разработки сайта на этой системе.

• Оперативный запуск. За небольшой промежуток времени можно выпустить полноценный сайт и начать привлекать первую аудиторию. При этом вам не нужно разрабатывать концепцию сайта с нуля. Отлично подойдет для простого интернет-магазина, когда можно обойтись только базовым набором функций; ;
• Можно попробовать перед покупкой. Сомневаетесь, прежде чем приобрести шаблон? Тогда вы можете опробовать и протестировать сайт в демоверсии;
• Простая интеграция с «1С». У этих продуктов один разработчик, поэтому интегрировать их будет проще простого;
• Адаптивный дизайн. Все элементы шаблонов полностью адаптированы под разрешение экранов мобильных устройств;
• Прост и удобен в управлении. Интерфейс запоминает основные предпочтения пользователя, благодаря чему тратится меньше времени на управление содержимым;
• Универсальность. Шаблоны универсальны и подойдут под любой проект с типовыми задачами.

4. Недостатки сайта на шаблоне «1С-Битрикс»

• Проблемы с доработкой. Процесс сложный и обычно агентства за него не берутся, потому что будет легче и дешевле создать новый сайт. В рамках купленного функционала все будет хорошо, да, но доработать или добавить что-то свое будет сложно
• Сайт такой же, как у всех. Если какой-нибудь макет особо популярен, то количество созданных на нем сайтов может насчитывать несколько тысяч;
• Сложно изменить дизайн. Спустя время вам в любом случае захочется подкорректировать готовый продукт. Но здесь могут возникнуть сложности, потому что скрипт шаблона очень негативно реагирует на изменения и не любит вмешательств;

5. Так что же выбрать?

Разработка сайта на шаблоне 1С-Битрикс может стать хорошим вариантом, если нужно создать сайт быстро и просто. Это универсальный инструмент без излишеств, который эффективно справится с базовыми задачами. Если поджимают сроки, а задача стоит простая, то это подходящее решение.

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

Читайте также

Готовые шаблоны сайтов или индивидуальные решения: что подойдёт в вашем случае?

Известный американский графический дизайнер Милтон Глейзер сказал: «Существует три ответа на результат от дизайна: «Да!», «Нет.», «НИЧЕГО СЕБЕ!». Последний – то, к чему стоит стремиться».

26 сент. 2021

Разница между разработкой сайта на CMS и с помощью конструктора

Разработка сайта – это сложный и кропотливый процесс, который требует от разработчика комплексного индивидуального подхода. Не последнюю роль в нём играет выбор между тем, что будет лучше для заказчика: сделать сайт через конструктор или на CMS.

Как создать шаблон для сайта на 1С-Битрикс

В этой статье мы с вами рассмотрим все особенности создания шаблона для Битрикса с нуля. Не важно, есть у вас готовая верстка, или вы просто перфекционист, которому только дай что-нибудь написать самому без посредников ��

Какие файлы нужны для создания шаблона

Внешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 1С-Битрикс путь к шаблону лежит через папку bitrix, в которой есть папка templates и уже в ней список всех наших шаблонов.

Путь к шаблонам: /bitrix/templates/

Создать шаблон можно 3 способами:

1. можно скопировать готовый шаблон и на его основе изменять под себя
2. можно создать через админку пустой шаблон
3. можно создать пустую папку и постепенно заполнять ее файлами и папками

Как вы поняли 3-ий вариант самый хардкорный �� . Зайдем в админку, Администрирование > Настройки > Настройки продукта > Сайты > Шаблоны сайтов > Добавить шаблон.
ссылка относительно сайта: /bitrix/admin/template_admin.php?lang=ru

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

      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 (без слеша в конце, обратите внимание). И поэтому, когда вы будете подключать свои скрипты или включаемые области, для папки нужно писать:

и уж точно НЕ НУЖНО ПИСАТЬ:

Зачем нам динамический путь к шаблону спросите вы?

1. нам не нужно запоминать имена всех шаблона и помнить в каком именно мы сейчас шаблоне работаем
2. если мы поменяем имя шаблона, нам не нужно будет искать в файле это имя и исправлять на новое
3. легко запомнить

Думаю, тут сплошные плюсы. Ну хорошо, это что касается 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, то, скорее всего у вас отобразится просто скелет сайта.

Екатерина :
Где узнать про шаблоны битрикс это

Залишити відповідь Скасувати відповідь

Щоб відправити коментар вам необхідно авторизуватись.

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

В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине cms, более функциональный аналог блокнота и хороший файловый менеджер (не проводник:)

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

Итак, приступим к самому главному.

Этап первый — неинтересный

Тут предполагается долгое, вдумчивое ознакомление с мануалами (качать с dev.1c-bitrix.ru) и успешное прохождение курса «Интеграция». После изучения часть вопросов у Вас должна отпасть.

Теперь перейдем к практике.

Этап второй — создаем файлы

Файловую составляющую будем делать ручками — так быстрее и удобнее. Шаблоны хранятся в директории /bitrix/templates/, тут надо создать каталог для своего творения, например test. Внутри него размещаем:
— каталог images — для картинок шаблона (которые не зависят от просматриваемой страницы), незачем их хранить в публичной части
— каталог include_areas — для включаемых файлов
— каталог page_templates — для образцов включаемых областей
— файл header.php — часть шаблона ДО контента
— файл footer.php — часть шаблона ПОСЛЕ контента
— файл description.php — название и описание шаблона
— файл .styles.php — описания стилей для визуального редактора страниц
— файл template_styles.css — стили шаблона
— файл styles.css — стили для контента и включаемых областей

Этап третий — заполняем файлы

Картинки сразу пихаем в images, все стили css в template_styles.css, потом из него выберем необходимый минимум в styles.css. Я всегда стараюсь стили шаблона помещать в template_styles, потому что он подключается последним и случайное переопределение не сломает каркас сайта.

В исходной верстке нужно выделить область для контента и разрезать верстку на 3 части — до него, сам контент, и после него. Для наглядности приведу рисунок

По пунктам:
— в header.php включается 1 часть, за исключением содержимого между тегами и (оставить можно подключение различных скриптов). После обязательно добавить
ShowPanel();?>
— вместо удаленных в секции head метатегов, заголовка, подключений css файлов размещаем вызовы функций битрикс, которые будут динамически формировать эти данные

ShowHead()?> 

— в footer.php целиком записываем 3ю часть
— ко всем относительным путям добавляем /bitrix/templates// Например, было

Таким образом мы не привязываем пути к конкретному имени шаблона, оно будет подставляться автоматически (что позволит копировать шаблоны без дополнительных трудностей)

После описанных манипуляций должно получиться нечто похожее на
header.php

ShowHead()?> ShowPanel();?>