Как вывести на сайт новости из RSS ленты

АвторСообщение
Machino
Разработчик
2 года назад

Для добавления RSS новостей сторонних ресурсов вы можете воспользоваться виджетом "Произвольный контент". Также понадобится немного JavaScript кода. Создание новостей будет рассмотрено на примере RSS с сайта worldoftanks.ru.

1. Создайте на любой странице виджет "Произвольный контент" и нажмите кнопку "Исходный код" в редакторе HTML:

2. В открывшемся окне создайте пустой DIV блок с идентификатором "rss":

Можете скопировать тут:

<div id="rss" class="row">Загрузка...</div>

3. Откройте "Панель управления -> Редактор HTML -> Head/Body". В поле "HTML перед </body> тегом " скопируйте следующий код:

<script>
$(function(){
var url = 'https://worldoftanks.ru/ru/rss/news/';
var rss = $('#rss');
if (!rss.length) return;
$.get('/api/rss-proxy?url=' + encodeURIComponent(url), function (data) {
rss.empty();
$($.parseXML(data)).find("item").each(function () {
var el = $(this);
var date = (new Date(el.find('pubDate').text())).toLocaleString("ru", {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric'});
rss.append('<div class="col-3 p-3"><img src="'+el.find('enclosure').attr('url')+'"><div class="h6 mt-2 mb-0">'+el.find('title').text()+'</div><div class="text-muted"><small>'+date+'</small></div><div class="mt-2">'+el.find('description').text()+'</div></div>');
});
});
});
</script>

Этот код предназначен для вывода новостей в 4 колонки с сайта worldoftanks.ru. Для других сайтов код будет отличаться.

Скриншот для наглядности:

После сохранения вы получите примерно такой результат на странице с виджетом:

Сообщение было изменено пользователем Machino 2 года назад
Machino
Разработчик
2 года назад

В примере выше я добавил в настройках виджета во вкладке Стиль немного CSS, что бы ссылки "Читать дальше, Обсудить на форуме" выглядели лучше: