Как создать страницу в битриксе

Как создать шаблон для сайта на 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, то, скорее всего у вас отобразится просто скелет сайта.

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

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

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

Делаем страницу «Сайт в разработке» интересной

«У вас никогда не будет второго шанса произвести первое впечатление» Собираетесь обновить сайт до новой 18-ой версии 1С-Битрикс: Управление сайтом?

Планируете регулярные доработки? Или только готовите к запуску, и пока не собираетесь пускать клиентов? Самое время задуматься о создании и оформлении страницы “Сайт в разработке” (или заглушки сайта).

Причины использования заглушки «Сайт на реконструкции»

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

• информацию о проекте;
• ознакомительный контент (фотографии ассортимента, видео и т.п.);
• таймер обратного отсчёта до полноценного открытия;
• форму обратной связи;
• ссылки на соцсети;
• промокод на первую покупку.

Стандартная страница “Сайт временно закрыт”

В Битриксе такая страница уже предусмотрена. Активация происходит через административный интерфейс в Настройки | Настройки продукта | Настройки модулей | Главный модуль. Когда доступ к публичной части закрывается, всем посетителям (кроме администраторов) будет показана ну оооочень простая и чудовищно некрасивая страница “Site under construction”.
К слову: страница, которую показывает Битрикс при возникновении критической ошибки выглядит практически идентично.
Такой минимализм — почти гарантированный способ испортить впечатление у нового покупателя. Клиент убежит на сайт конкурента и больше не вернется. В случае если вскоре планируется открытие сайта, то с такой страницей не удастся заинтересовать пользователей и разрекламировать сайт.

Почему 1С-Битрикс до сих пор не облагородил эту страницу науке не известно. Мы просили об этом много раз еще с 2011-го года.

• закрыть можно только все сайты сразу (в многосайтовости);
• доступ закрывается для всех посетителей без возможности тонкой настройки;
• для поисковиков страница отдает статус 200, что не всем может подойти.

1. создать файл site_closed.php;
2. создать обработчик события;
3. использовать готовое решение из Marketplace.

Способ 1. Создать файл Site Closed

Способ подразумевает кастомизацию стандартной заглушки, которая включается в главном модуле, кнопкой “Закрыть публичную часть сайта”.

Стандартная заглушка заменяется посредством создания файла site_closed.php в «/bitrix/php_interface/include» или «/local/php_interface/include».

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

Способ 2. Создать обработчик события

Также существует вариант создать собственную заглушку, используя событие onProlog. Этот способ удобен тем, что мы можем изменить логику показа заглушки: добавить проверку IP, групп пользователей, сайта в многосайтовости и т.п.
В этом примере с помощью обработчика события выводится заглушка по похожему сценарию, что и в первом способе. Например, здесь достаточно доработать логику, если стоит задача внести группу пользователей «Контент-менеджер» в исключения и не показывать им заглушку.

Способ 3. Установить решение из Marketplace

В Marketplace есть готовые решения для заглушки сайта. В том числе и бесплатные, например “ Продвинутая заглушка ”. Модуль позволяет контент-менеджеру быстро настроить желаемый контент для страницы: время до запуска, предварительную регистрацию пользователей, ссылки “поделиться” для соцсетей.

Выводы

Заглушка сайта — не такой важный фактор успеха проекта, как увеличение скорости работы после проведения технического аудита, удобство работы пользователя и оптимизация для поискового продвижения. Но на время обновлений, пусть это хоть 15 минут раз в неделю, это единственный способ показать посетителям, что всё в порядке, что сайт “живой”. Мы считаем, что разработка заглушки на современном, сложном сайте — правильный и закономерный шаг. Тем более что это простая задача, которую решит даже не-программист.

Вывести компонент новостей на страницу в Битрикс

Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, что ищут люди. Итак за последнюю неделю 8 раз пытались найти на сайте информацию о том как вывести компонент новостей на страницу в Битрикс.

Чтобы не усложнять эту статью, не стал вдаваться в тонкие настройки, но вот с такими базовыми параметрами, вы уже сможете начать писать новости на своем Битрикс сайте и они будут с поддержкой ЧПУ..

Итак приступим:

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

Создание инфоблока

1. Кликаем в структуре на «Типы инфоблоков» и нажимаем на зеленую кнопку «+ Добавить новый тип»

2. Откроется окно мастера создания инфоблока:

Задаем индентификатор, он должен состоять из латинских букв/цифр и знака подчеркивания. Русское название, в примере я поставил «Мой блог» и английское «My blog»- если вы действительно делаете для новостей пишите «Новости» и «news» (или как вам будет угодно)

3. Далее в дереве «Типы инфоблоков» находим наш свежесозданный инфоблок и кликаем по нему. Далее на зеленую кнопку «+ Добавить инфоблок».

4. Откроется мастер создания инфоблока. Заполняем примерно следующим образом:

• Символьный код: латинские буквы без пробелов со знаками подчеркивания
• Выбираем сайт (в случае многосайтовой структуры), если он всего один, все равно выбираем его чекбоксом
• Название инфоблока— собственно Новости (в примере Записная книжка)
• Все остальное оставляем как есть, конечно если понимаете что делаете можно настроить ЧПУ и прочие тонкие параметры, но в простом варианте заработает со всем по умолчанию.

5. Переходим на закладку «Доступ» и выбираем в параметре «Для всех пользователей»- Чтение, чтобы новости после вывода на сайт были доступны для просмотра.

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

Выводим новости на страницу в Битрикс.

Создаем новый раздел (или страницу), назовем его Новости. Не буду вдаваться в подробности, по его созданию, в крайнем случае после нажатия кнопки «Создать раздел»- запустится пошаговый мастер создания раздела, который более чем понятен. Достаточно просто заполнять поля и нажимать «Далее».

В итоге вы придете вот к такому визуальному редактору, все что вы напишите или выведете вместо фразы «Text here. » и будет отображено на сайте в этом разделе.

Удаляем «Text here. » нафиг, раскрываем слева структуру (кликая на плюсики если кто не понял)
+Контент- +Статьи и новости
И перетягиваем самый первый компонент прямо на страницу (см. картинку):

Далее два раза кликаем по иконке компонента на странице, откроется мастер настройки компонента.

Итак пишу сверху вниз как заполнить поля:

1. Шаблон компонента: выбираем .default если у вас еще нет готового шаблона для компонента новостей
2. Выводить дату элемента: оставляем если нужно выводить дату публикации новости.
3. Выводить изображение для анонса: оставляем если нужно выводить картинку в анонсе.
4. Выводить текст анонса: аналогично с текстом.
5. Отображать панель соц. закладок: если нужны кнопки лайк социальных сетей то ставим галочку.
6. Тип инфоблока: выбираем из выпадающего списка тот самый тип что создавали выше ( см. выше пункт 2 ).
7. Инфоблок— выбираем созданный ранее ( см. выше пункт 4 начала статьи ) инфоблок, в принципе он должен быть у вас всего один, но в любом случае выбираете именно тот что создавали в этом типе.
8. Количество новостей на странице: по умолчанию 20, ставите что заблогорассудится. Это колличество которое будет выводится на странице за один раз, если больше- появится постраничная навигация. Пример на моем сайте, в разделе макеты выставлено 26 новостей (да там тоже выведено через компонент статьи и новости)
9. Далее все пропускаем до пункта Включить поддержку ЧПУ (если оно вам конечно нужно), ставим чекбокс и в поле Каталог ЧПУ (относительно корня сайта): вписываем url раздела в котором выводятся новости, для примера у этого блога стоит /blog-note/ остальные поля оставляем как есть. Само собой это простая настройка для ЧПУ, более тонко вы сможете ее настроить почитав документацию. Однако работать новости итак будут.
10. Все остальное до конца, оставляем как есть и нажимаем снизу слева, зеленую кнопку сохранить. Снова увидем (без красной стрелки конечно)

Еще раз нажимаем сохранить снизу слева. Все инфоблок новостей Битрикс создан, настроен и выведен на сайт.

Повторюсь еще раз- чтобы не усложнять это обьяснение, не стал вдаваться в тонкие настройки, но вот с такими базовыми параметрами, вы уже вполне сможете начать писать новости на своем Битрикс сайте и они будут с поддержкой ЧПУ.

Сергей 10.04.2014

Здравствуйте, Михаил. Спасибо за ваши уроки, оказались очень полезными в отличие от книг издательства Битрикс, из которых понять сразу как работать с системой гораздо сложно.
У меня такой вопрос — я создал инфоблок новости, вывел его в разделе новости, но хотелось бы также вывести анонсы новостей в сайдбаре сайта, если я вывожу в шаблон компонент новостей, то при клике для детального просмотра эта новость также открывается в сайдбаре, а хотелось бы чтобы открывалась страница с детальным просмотром новости в главной области сайта а не сайдбаре.
Заранее спасибо за ответ.

Михаил Базаров 10.04.2014

Цитата
422 пишет: Видеоурок: сайт на Битрикс

Посмотрите мой видеоурок http://camouf.ru/blog-note/bx_site_created/ ответ на Ваш вопрос там есть (не вспомню в каком именно, но думаю найдете)

Ольга 07.11.2014

Спасибо большое за понятное объяснение. Все сделала, как написано.
Осталась одна проблема.
Есть инфоблок Новости, есть список новостей, он отражается на экране. Можно добавить новость, она появляется в списке новостей.
Но при попытке открыть саму новость, появляется ошибка 404. Причем, в адресной строке стоит именно тот адрес, шаблон которого задан в настройках инфоблока.
Как открыть страничку отдельной новости, подскажите пожалуйста.

Михаил Базаров 11.11.2014

Цитата

Ольга пишет: Спасибо большое за понятное объяснение. Все сделала, как написано. Осталась одна проблема. Есть инфоблок Новости, есть список новостей, он отражается на экране. Можно добавить новость, она появляется в списке новостей. Но при попытке открыть саму новость, появляется ошибка 404. Причем, в адресной строке стоит именно тот адрес, шаблон которого задан в настройках инфоблока. Как открыть страничку отдельной новости, подскажите пожалуйста.

Проверьте настройки ЧПУ и наличие файла htaccess в корне сайта
Guest 02.06.2015

Огромное спасибо!

Guest 13.07.2015

Добрый день.
ранее сайт был информационным. решили сделать интернет магазин. Соответственно, есть -Типы инфоблоков/Контент/Аксессуары — хочется сделать этот инфоблок Каталогом ( тип каталог). Иду редактировать инфоблок — во вкладке Инфоблок отмечаю к какому сайту относится, в вкладке свойства прописываю свойства, в вкладке Торг каталог отмечаю что является торг каталогом. Но данный инфоблок «аксессуары» как был в типе Контент, так там и остался . Что еще нужно сделать что бы он стал каталогом и отображался в публичной части сайта в меню и т.д. ? очень не хочется в ручную все переносить и создавать вновь инфоблок каталог аксессуаров Возможно ли это ?

Михаил Базаров 13.07.2015

Цитата

Guest пишет: Добрый день. ранее сайт был информационным. решили сделать интернет магазин. Соответственно, есть -Типы инфоблоков/Контент/Аксессуары — хочется сделать этот инфоблок Каталогом ( тип каталог). Иду редактировать инфоблок — во вкладке Инфоблок отмечаю к какому сайту относится, в вкладке свойства прописываю свойства, в вкладке Торг каталог отмечаю что является торг каталогом. Но данный инфоблок «аксессуары» как был в типе Контент, так там и остался . Что еще нужно сделать что бы он стал каталогом и отображался в публичной части сайта в меню и т.д. ? очень не хочется в ручную все переносить и создавать вновь инфоблок каталог аксессуаров Возможно ли это ?

Возможно не до конца понимаю, что вы проделали

Нужно просто, сделать инфоблок торговым каталогом и все. Разве что в публичной части компонент новостей заменить каталогом

Дмитрий 28.01.2016

Спасибо вам за статью! Она мне очень помогла.

Создание страницы в админке

Иногда бывает нужно создать страницу в админ-панели. При этом нет необходимости создавать для страницы целый модуль.

Я обычно делаю так: в php_interface/include/ создаю файл, в котором размещаю весь функционал.

Дальше — в папке /bitrix/admin/ создаем файл с аналогичным названием, в нем — инклюдим наш файл с функционалом.

Осталось дело за малым — вывести ссылку на данный файл в меню. А в этом нам поможет обработчик события «OnBuildGlobalMenu»:

AddEventHandler("main", "OnBuildGlobalMenu", "ModifiAdminMenu"); function ModifiAdminMenu(&$adminMenu, &$moduleMenu) < $moduleMenu[] = array( "parent_menu" =>"global_menu_services", // в раздел "Сервис" "section" => "ваше название", "sort" => 100, // сортировка пункта меню - поднимем повыше "url" => "имя страницы.php?lang=".LANG, // ссылка на пункте меню - тут как раз и пишите адрес вашего файла, созданного в /bitrix/admin/ "text" => 'Текст пункта меню', "title" => 'Всплывашка для пункта меню', "icon" => "form_menu_icon", // малая иконка "page_icon" => "form_page_icon", // большая иконка "items_id" => "menu_ваше название", // идентификатор ветви "items" => array() // остальные уровни меню ); >

Ну и если вы все же делаете свой модуль, то файл со скриптом-обработчиком вы разместить уже у себя в модуле, проинклюдите уже его. А вот чтобы добавить страницу в меню для модуля, нужно при разработке собственного модуля разместить файл /bitrix/modules/НАЗВАНИЕ_МОДУЛЯ/admin/menu.php с таким примерно содержанием:

$aMenu = array( 'parent_menu' => 'global_menu_store', 'sort' => 150, 'text' => GetMessage('YOURMODULE_MENU'), 'title' => GetMessage('YOURMODULE_MENUTITLE'), 'icon' => 'sale_menu_icon_statisti', 'page_icon' => 'sale_menu_icon_statisti', 'items_id' => 'some_id', 'items' => array( array( 'text' => GetMessage('YOURMODULE_MENU_1'), 'title' => GetMessage('YOURMODULE_MENU_1'), 'url' => 'somepage.php?lang='.LANGUAGE_ID, ), ) ); return (!empty($aMenu) ? $aMenu : false);

Более подробно о работе с доп. меню можно почитать в официально документации и тут