Как создать страницу в битриксе и привязать к меню
Перейти к содержимому

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

  • автор:

Страница битрикс: добавление по шаблону

Видео курс по 1С-Битрикс

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

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

Практический пример добавления страниц в 1С Битрикс

В отличие от способа добавления страницы при помощи мастера, этот способ тоже запускает мастера добавления контента, но с дополнительным функционалом. Для того что бы добавить страницу откроем в панели управления выпадающий список под кнопкой «Создать страницу», выберем из меню добавить «По шаблону». Нам отобразил битрикс два варианта добавления страницы, «Шаблон сеток страниц» и «Стандартная страница» Второй вариант стандартный его пропустим, а вот первый из выпадающего списка задействуем.

Кликнем по пункту «Шаблон сеток страниц», битрикс открывает мастера, заголовок страницы укажем «Шаблон сайта», снимаем галочку из пункта «Добавить пункт в меню», нажимаем далее.

Подробно все поля в данной форме разбирали в предыдущем видео Создание страниц на 1С Битрикс.

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

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

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

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

Такое добавления страниц хорошо использовать при специфическом ее оформлении, когда страничка отличается от общего количества.

Если добавляющих шаблонов нет

Возможно, если у Вас версия 1С Битрикс не «Малый бизнес» или «Бизнес» то данные шаблоны могут не отображаться, да и вообще пункта «По шаблону» возможно будет отсутствовать и добавить контент по шаблону в битрикс не получится.

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

Что делать, как добавить страницу в битрикс с готовым кодом, когда в меню этот функционал отсутствует?

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

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

Зачем добавлять страницу по шаблону

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

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

Вы согласитесь, каждый раз проделывать такую процедуру неудобно, удобней добавить страницу по заранее готовой заготовки, коль есть такой функционал в битрикс нужно его задействовать.

Давайте добавим шаблон, который будет, вставляет данный код автоматически.

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

Для вас покажу основные моменты добавления страниц с заготовленным кодом на примере нашего сайта.

Добавим шаблон страницы в битрикс

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

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

Имя файла пропишем (shablon.php ) можем придумать любую, но обязательно в содержании у него должны присутствовать вызов файлов header.php и footer.php .

Добавляем вызов header.php

SetTitle("Title"); ?>

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

 
Текст описание странички .

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

Создадим файл .content.php в нем будем вызывать функцию нашего шаблона.

GetMessage("shablon"), "sort"=>2); ?>

Добавим файл перевода в директории lang , в моем случае она создана, добавим раздел и сам перевод.

$MESS['new'] = "Шаблон текста";

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

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

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

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

Как добавить свои страницы

Для продаж в чате мы подготовили семь стандартных страниц — например, О компании, Контакты и Полезные ссылки.

Стандартные%20страницы.png

Вы легко можете добавить в центр продаж новые страницы — как из сайтов Битрикс24, так и свои собственные.

Страницы сайта Битрикс24

К примеру, мы планируем мероприятие и хотим сообщить об этом нашим клиентам. Для рекламы события мы подготовили лендинг на базе сайтов Битрикс24.

Лендинг.png

Теперь перейдем в раздел Центр продаж и в меню Быстрые консультации выберем пункт Добавить новую страницу — Страница Сайта Битрикс24.

страница_сайта_битрикс24.png

В левой части расположен список всех сайтов, выберем нужный сайт и страницу.

Выбор%20страницы.png

Готово! Теперь мы можем отправить клиенту эту страницу через центр продаж.

Отправить%20(2).png

Страницы со своим URL

Вы можете добавить в центр продаж и любую внешнюю страницу. Перейдем в раздел Центр продаж и в меню Быстрые консультации выберем пункт Добавить новую страницу — Страница со своим URL.

страница_со_своим_URL.png

Укажем ссылку на сайт и название страницы.

Окно%20проверки.png

Готово! Остаётся только отправить эту страницу клиенту.

Отправить.png

Другие способы добавить страницу

Ещё один способ добавить новую страницу — в окне Продажи в чате прямо во время общения с клиентом.

Редактирование МЕНЮ в 1С Битрикс

Структура сайта в 1С Битрикс / Логическая и физическая информация

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

При работе с меню в 1С Битрикс появляются вопросы почему какие-то пункты не отображаются, какие-то не подлежат изменению?

Виды меню в 1С Битрикс

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

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

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

Обо всем этом читайте далее…

Что такое меню в 1С Битрикс?

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

Также меню разделяется на основное и второстепенное. Основное меню соответствует самому верхнему уровню, второстепенное меню содержит ссылки на подразделы и документы текущего раздела.

Основной момент, который вы должны уловить, что меню в системе наследуется. То есть, если выбираем в компоненте определенный тип меню, то это меню будет отображаться, ниже на все разделы и страницы сайта, до момента пока в нем не создадим собственное меню.

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

Что такое тип меню?

Тип меню это определенные настройки в модуле управления структуры, сам тип будет использован как префикс файла с шаблоном меню, а также он по этому префиксу идентифицируется самой системой. Как пример можно рассмотреть верхнее меню. ( .top.menu.php ).

Типы меню в Битрикс

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

Создаем тип меню

Вернемся на главную страницу и создадим в ней раздел с названием «DWS Меню», установим его отображение в верхнем меню сайта.

Создаем верхнее меню

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

Выбираем верхнее меню

На страничке пропишу тестовый текст (Основы управления меню в системе 1С Битрикс) и сохраняю форму.

И так, система перенаправили на вновь созданную нами страницу, и отобразился пункт в верхнем меню «DWS Меню» который мы создавали. Прогуливаясь по разделам сайта, этот пункт не изменчив и везде присутствует, это все благодаря тому что другие его разделы унаследовали.

Разбор отображения меню

Теперь давайте подробно разберемся, каким образом меню отображается.

Любое меню в 1С Битрикс строится на основе двух составляющих:

  • Файла с массивом данных « $aMenuLinks », в нем определяется состав меню, где задаем название пунктов, его ссылки, по нажатию на которые переходим по структуре сайта. Все управление массивом осуществляется через административный раздел.
  • И вторая составляющая, это компонент, который является шаблоном внешнего представления меню. Он представлен в виде PHP кода, в нем обрабатывается массив данных, выдавая на выходе готовую HTML страничку.

И давайте далее разберем более подробнее каждый из пунктов.

Статическое Меню / Массивом данных «$aMenuLinks»

Все данные по каждому типу меню хранятся в отдельном файле, имя этого файла будет содержать: точка.(тип меню).menu.php . Если открыть структуру файлов в административной части сайта, мы видим в главной директории присутствует несколько типов меню, в нашем случае « Меню типа bottom », тут их три файла которые выводят информацию для нижнего меню и « Меню типа top », в нем содержится массив для верхнего меню.

Файлы массивов меню

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

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

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

Перейдя в новый раздел DWS меню, мы видим полное отображение верхнего меню, в принципе, как и в других разделах.

Допустим, мы хотим заменить несколько пунктов меню, а возможно и некоторые из текущего списка исключить.

Можно пойти несколькими вариантами как упоминал выше, находясь в данной директории создать меню, при помощи административной панели, жмем кнопку меню, выбираем тип меню, который хотим создать, в нашем случае «Верхнее меню», по нажатию на ней появилась форма, где система предлагает заполнить название разделов и его ссылку. Тут обратите внимание, что меню создается в разделе (dws-menu). Если его создать в другом разделе оно применится к тому, в котором мы его создаем. Так же оно будет наследоваться всеми разделами, включенными в данную директорию.

Для примера давайте заполним форму тестовыми данными и сохранимся.

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

Удалив вновь созданное меню, оно приобретает прежний вид.

Следующий способ, если нам нужно продублировать это меню со всей его структурой, без повторного его создания. Для этого достаточно скопировать файл «тип меню», который находится в основной директории. В нашем случае это верхнее меню, файл называется, .top.menu.php , копируем его в наш раздел DWS меню.

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

Изменяя и редактирование данных меню разделов, по своей сущности мы редактируем файл .top.menu.php расположенный в нашем разделе. Для примера открою этот файл, при помощи административного меню отредактируем его. К примеру, раздел DWS меню поместим в самое начало при помощи данных стрелок, затем удалим пункт в мену «Форум, События, Блоги, Работа» и сохранимся.

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

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

Отредактируем его при помощи режима правки, наводим на меню, жмем «Редактировать пункты меню», изменяем ссылки, для примера удаляем пару пунктов, сохраняемся.

Как видим, меню отображается с теми пунктами, которые оставили в списке, сам файл .bottom1.menu.php изменен. Переходя в другие разделы сайты, меню отображается полным, но в нашем разделе оно будет в том виде, в котором мы его изменили.

Я думаю с этим проблем быть не должно, тут все предельно понятно.

Динамическое меню / Файл с приставкой _ext.php

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

Это происходит когда в компоненте bitrix:menu подключено динамическое меню при помощи отмеченного пункта «Подключать файлы с именами вида .тип_меню.menu_ext.php», если в компоненте мы ее убираем, меню пропадает для всех разделов, так как компонент подключен в структуре сайта.

В данном случае в качестве пунктов меню выводится название каталога «Новостей», и создаются они на основе инфоблока ID 62 «Новости». Это меню динамического типа, отличительные черты у него в том, что сам программный код вызова данного меню, расположен в файле . top.memu_ext.php с приставкой _ext .

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

Вывод меню на странице сайта

Отображения меню на страницах сайта выполняется с помощью компонента Меню (bitrix:menu).

IncludeComponent( "bitrix:menu", "", Array( "ALLOW_MULTI_SELECT" => "N", "CHILD_MENU_TYPE" => "left", "DELAY" => "N", "MAX_LEVEL" => "1", "MENU_CACHE_GET_VARS" => array(""), "MENU_CACHE_TIME" => "3600", "MENU_CACHE_TYPE" => "N", "MENU_CACHE_USE_GROUPS" => "Y", "ROOT_MENU_TYPE" => "left", "USE_EXT" => "N" ) );?>

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

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

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

Что бы вставить меню, нам нужен код компонента, который его вызывает. Для этого откроем страницу на редактирование, затем, выберу из служебных компонентов «navigation», «Меню», перетаскиваю его в форму, в настройках оставляю все по умолчанию, жмем сохранить.

Открываю форму в режиме кода, вырезаю данный компонент, и закрываю окно.

«Основы управления меню в системе 1С Битрикс.»

IncludeComponent( "bitrix:menu", "", Array( "ALLOW_MULTI_SELECT" => "N", "CHILD_MENU_TYPE" => "left", "DELAY" => "N", "MAX_LEVEL" => "1", "MENU_CACHE_GET_VARS" => array(""), "MENU_CACHE_TIME" => "3600", "MENU_CACHE_TYPE" => "N", "MENU_CACHE_USE_GROUPS" => "Y", "ROOT_MENU_TYPE" => "left", "USE_EXT" => "N" ) );?>

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

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

Переходим в визуальную часть, у нас появилась такая иконка, символизирующая, что есть компонент. По заданию меню нужно отобразить только в нашем разделе, для этого переходим в «DWS меню», и тут можно создать его несколькими способами:

  • Через административное меню, выбираем тип «Правое меню», затем прописываем их название, ссылки, куда пользователь по нажатию будет переходить и сохраняемся.
  • Второй способ через режим правки, наводим на иконку, далее, «Создать меню в текущем разделе», заполняем названия и ссылки, сохраняемся.

Видим, что меню отобразилось, создался системой файл .right.menu.php с приставкой .right в нашем разделе, открыв его на редактирование, в массивах расположены все наши пункты, которые до этого с вами формировали. Для примера давайте поменяем его содержание, и сохранимся. Разделы меню поменялись, а при переходе по другим разделам меню, «Правое меню» скрывается. То, что изначально хотели добиться.

Как видите, на самом деле в Битриксе меню довольно просто формируется и управляется, не нужно обладать знаниями программирования что бы добавить меню того или иного содержания, достаточно просто еще раз внимательно прочитать статью.

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

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

Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter

Создание раздела для отображения в меню

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

20.jpg

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

21.jpg

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

Из выпадающего списка выбираем тип меню, в которое вставится пункт. В данном случае тип меню – верхнее.

22.jpg

Нажимаем «Далее» и прописываем основные свойства раздела.

  • Описание раздела
  • Заголовок окна браузера
  • Ключевые слова
  • Продвигаемые слова.

23.jpg

Нажимаем «Готово» и переходим к редактированию страницы. В правом меню выпадающего окна выбираем Контент → Новости (этот компонент выбирается при создании текстового раздела).

24.jpg

Затем зажимаем компонент «Новости» (он выделен цветом) левой кнопкой мыши и переносим в контентную часть страницы. Появится всплывающее окно редактирования параметров компонента.

Значения параметров можно скопировать у раздела с аналогичными настройками. Для этого откройте нужную страницу сайта в новой вкладке, включите режим правки и в появившейся панели настроек нажмите кнопку в виде шестерёнки.

25.jpg

Открывшееся окно с параметрами и будет примером, на который мы будем ориентироваться, редактируя нужный нам компонент.

Редактирование параметров компонента

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

Переходим к основным параметрам. Выбираем тип инфоблока (в той директории, в которой его создавали, в нашем случае – Контент).

В выпадающем списке выбираем наш инфоблок – курсы.

26.jpg

Активируем параметр «Показывать фильтр».

27.jpg

Переходим к настройке отображения элементов в определенном порядке. Из выпадаюшего списка выбираем необходимые значения для:

  • первой сортировки;
  • направления первой сортировки (по возрастанию или по убыванию);
  • второй сортировки;
  • направление второй сортировки (по возрастанию или по убыванию).

28.jpg

Установлены автоматические настройки сброса кеша. Рекомендуется уменьшить время кеширования.

29.jpg

Дополнительные настройки

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

30.jpg

Настройки списка

В настройках списка и поле «Поля» выбираем необходимые значения для отображения элемента в списке. При выборе 2-х и более элементов нужно выделить необходимые значения при нажатой клавише Ctrl.

31.jpg

Настройки детального просмотра

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

32.jpg

33.jpg

  1. В поле «Свойства» нужно выделить свойства, которые мы заранее прикрепили в свойствах инфоблока. Нажимаем клавишу Ctrl и делаем множественный выбор, не отпуская клавишу.
  2. Если нужно прикрепить дополнительные свойства, нужно узнать код свойств из Рабочий стол→Контент→Инфоблоки→Типы инфоблоков и прописать этот код в дополнительных текстовых полях.
  3. Активируем показ ссылок на соцсети.

Нажимаем сохранить параметры, попадаем в окно «Добавление (Редактирование)» страницы и сохраняем изменения страницы.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *