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

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

Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, что ищут люди. Итак за последнюю неделю 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. Все остальное до конца, оставляем как есть и нажимаем снизу слева, зеленую кнопку сохранить. Снова увидем  (без красной стрелки конечно)

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

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

Предыдущая заметка Следующая заметка

Как точно настроить SEO для страницы отфильтрованных результатов в каталоге CMS 1С-битрикс

Умный фильтр с чпу для seo— одно из преимуществ CMS Битрикс.  Благодаря ему результаты фильтра можно отображать по ЧПУ ссылкам. Это позволяет улучшить SEO, добавлять landing pages внутрь каталога, широко охватить НЧ запросы и прочее. Углубимся в эти преимущества.

Расшифровка термина ЧПУ

ЧПУ расшифровывается как Ч – человеку, П – понятные, У – url или ссылки. Это значит, что ссылка в разделе Товары / Клавиатуры будет выглядеть как /katalog/klaviaturi, а не /?s=5&ss=30. Google и яндекс лучше воспринимают такие ссылки.

Параметры инфоблока

Чтобы настроить ЧПУ, нужно выбрать URL в настройках в инфоблоке. Зайдите в Админку / Контент/ Типы инфоблоков / *Тип* / *Название*. Во вкладке «Инфоблок» заполняем поля:

• /catalog/ пишем папку из корневой директории, в которой будет расположен элемент каталога;
• #SITE_DIR# — пишем папку с сайтом;
• #ELEMENT_CODE# — пишем код из символов, переводя имя блока в транслит;
• #SECTION_CODE# — пишем код из символов, путем перевода названия раздела в транслит;

Поставьте спец-параметры в группах «Поля разделов» и «Поля» в графе «Символьный код», так #ELEMENT_CODE# и #SECTION_CODE# назначаются в авто-режиме.

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

Свойства инфоблока

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

Для облегчения работы пишем свойства транслитом. Код свойства пишем первым, потом код значения добавляем в раздел под названием «Внешний код».

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

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

Создаем свойство «фасон» и повторяем процедуру. Тип свойства «список» используем для упрощения. «fason» будет кодом свойства. Также добавим пару значений: «Сарафан будет sarafan», «Футляр будет futlar». В колонке «XML_ID» задается код с параметрами фасона, нашего свойства если активирован пункт «Список».

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

Как настроить компонент

Нужно зайти в параметры компонента. Для этого в каталоге товаров включите режим правки, нам нужен компонент bitrix:catalog. Нужно найти графу «Url раздела для умного фильтра». Сюда нужно задать шаблон для ЧПУ.  Часть /apply/ можно убрать, чтобы было короче. Остается #SECTION_CODE#/filter/#SMART_FILTER_PATH#/

• #SMART_FILTER_PATH# это созданный алгоритмом адрес, собранный на основе кодов свойств;
• /filter/ это директива для идентификации и интерпретации требуемого адреса;
• #SECTION_CODE# это код отфильтрованного раздела;

Нажимаем кнопку сохранения настроек Итог: при фильтрации с параметром «Цвет» = «Желтый», ЧПУ будет выглядеть так: /catalog/shirts/cvet-is-jeltiy/. При расширении фильтра пунктом «фасон»: /catalog/shirts/filter/cvet-is-jeltiy/fason-is-futlar/. Настройка SEO это следующий шаг.

Отстройка блока SEO, описывающего фильтр в битриксе

Так что требуется поменять для /catalog/shirts/cvet-is-jeltiy/? По минимуму нужно задать meta-description или описание, meta-keywords или ключевые слова, title или основной заголовок, h2 или заголовок первого уровня, и текст с информацией SEO. Описание будет коротко описывать раздел.

Параметры можно сохранять в HL-инфоблок и просто инфоблок. Будем работать со вторым.

Заполним инфоблок перечисленными параметрами.

Чтобы упростить работу, запишите id в постоянную переменную с именем IBLOCK_SEO. Она будет находиться внутри документа /bitrix/php_interface/init.php. Так мы упростим работу с кодом.

URL адрес обязателен. Без этого будет непонятно, к чему применить параметры SEO.

Внутрь шаблона в виде файла section.php, когда объект под названием catalog. section будет вызван, нужно вставить фрагмент с кодом.

Этот скрипт в переменную $curPage сохраняет параметры фильтра, если они есть они передаются внутрь массива с именем $arSeo. Затем после проверки назначаем нужное свойство под каждое значение.

Оформленный блок с SEO можно добавить вниз, под список с товарами, подходящими под параметры. Теперь можно задать уникальные SEO параметры для отдельных страниц. Теперь под каждый запрос низкой частоты есть отдельная страница отфильтрованных результатов с уникальным ЧПУ и названиями. На ней показаны покупателю товары по его заданной фильтрации, что повысило конверсию и улучшило факторы поведения.

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

После фильтрации по цвету получается следующее:

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

Передача ссылок поисковым роботам

Роботы поисковых систем автоматически не заметят отфильтрованные ссылки. Вручную передать их можно так: создается множественное свойство с названием «Привязка к элементам инфоблока» для разделов назначается SEO блок. Так можно вывести блок ссылок ЧПУ.

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

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

Код для поля будет UF_SEO_ITEMS, а название – Быстрые ссылки. Чтобы протестировать, добавим связи. Внутрь SEO блоков мной были добавлены параметры. Они описывают отфильтрованные страницы. Данные результаты связаны с категорией «Платья». Отредактируем один из разделов сайта. Это делается через свойства «Быстрые ссылки». В нем выберем нужные элементы блока SEO, в моем случае это «Синие платья футляр», а также «Платья синего цвета».

Требуется показать ЧПУ потенциальному покупателю. Находим для этого элемент catalog.section. В моем случае элемент в виде папки /bitrix/shablony/site-template/komponenti/1c-bitrix/katalog/component-template-name/1c-bitrix/catalog.section/.default/. Здесь внутрь файла result_modifier с расширением php нужно вставить кусок с кодом.

В итоге у нас есть блок отфильтрованных ссылок

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

Вывод и итоги проделанной работы

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