Телеграм: @camouf_ru Почта: mihail@bazarow.ru

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

Просмотров: 63592

Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, что ищут люди. Итак за последнюю неделю 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 пишет:
Добрый день.
ранее сайт был информационным. решили сделать интернет магазин. Соответственно, есть -Типы инфоблоков/Контент/Аксессуары - хочется сделать этот инфоблок Каталогом ( тип каталог). Иду редактировать инфоблок - во вкладке Инфоблок отмечаю к какому сайту относится, в вкладке свойства прописываю свойства, в вкладке Торг каталог отмечаю что является торг каталогом. Но данный инфоблок "аксессуары" как был в типе Контент, так там и остался . Что еще нужно сделать что бы он стал каталогом и отображался в публичной части сайта в меню и т.д. ? очень не хочется в ручную все переносить и создавать вновь инфоблок каталог аксессуаров Возможно ли это ?
Возможно не до конца понимаю, что вы проделали

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

По поводу меню: вот это в помощь http://camouf.ru/blog-note/722/
Дмитрий 28.01.2016
Спасибо вам за статью! Она мне очень помогла. :D

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 53465 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 773 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5604 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Звездочки в рейтинге Битрикс статей и новостей Просмотров: 18072 Стандартный вид рейтинга в новостях Битрикс, ну скажем так- не очень красив. Давайте его п... Малая корзина Битрикс, упрощенный шаблон Просмотров: 12545 Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке ... Регистрация пользователя в определенную группу сайта на Битрикс Просмотров: 22097 Достаточно часто требуется регистрировать пользователя в определенную группу, в зависимост... Открытие мобильного приложения Apache Cordova по ссылке Просмотров: 685 Достаточно часто нужно реализовывать открытие мобильного приложения по ссылке. Например: п... Создание мобильного приложения на cordova, для любого сайта. Просмотров: 14192 Если стоит задача разработки мобильного приложения для сайта, можете воспользоваться данно... Cordova, ввод в input под диктовку. Голосовой поиск в мобильном прило... Просмотров: 1264 Итак, задачка: реализовать голосовой поиск в мобильном приложении на Cordova. По сути, нам... Сниппеты типографики bootstrap, для Битрикс Просмотров: 7600 Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstra... Сортировка элементов по индексу сортировки значений типа список Просмотров: 10545 Внутри любого компонента есть заранее заложенные поля для сортировки элементов. МОжно сорт... Вывести свойство привязка к Яндекс Картам в Битрикс Просмотров: 18186 Часто бывает нужно вывести свойство привязка к Яндекс карте в детальном описании элемента... Показать пользователю накопительную скидку за все сделанные заказы, и... Просмотров: 1758 Задача: показать, текущему авторизованному, пользователю сумму всех выполненных заказов и ... Увеличение диска на готовой виртуальной машине Битрикс Просмотров: 8768 Как всем известно, на официальном сайте 1С-битрикс можно скачать готовую виртуальную машин... Умный фильтр во всплывающей панели на мобильных. Просмотров: 1449 Шаблон умного фильтра в Битриксе достаточно сложный, с точки зрения верстки и не очень кра... Как подобрать редакцию Битрикс под задачи Просмотров: 6350 Последнее время, все чаще, при общении с заказчиками, сталкиваюсь с вопросом "— К... Установка вебсервера на Apple M1 (нативный ARM стек), оптимизированны... Просмотров: 6143 Появилась задачка, установить стек MAMP (macOS, Apache, MYSQL, PHP) на рабочий ноутбук с п... Моментальная фильтрация на AJAX в умном фильтре 1С-Битрикс Просмотров: 24667 При штатной установке, интернет-магазина на 1С Битрикс, умный фильтр по товарам, показывае... Простой WEB сервер на ubuntu, для Битрикс Просмотров: 34480 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... Постраничная навигация в списке разделов Битрикс- catalog.section.lis... Просмотров: 8719 Если в магазине очень много разделов и хочется вывести их с постраничной навигацией: можно...