Асинхронный rss виджет для wordpress

Как-то я уже писал про добавление rss ленты из fluxbb в wordpress. В тот раз я использовал дефолтный виджет. И когда сайт переехал на https, он, внезапно, перестал работать.

Немного покопавшись в репозитории вордпресса я не нашел ничего стоящего и решил написать асинхронный загрузчик rss лент.

Почему асинхронный?

Да потому, что глупо ждать на стороне сервера, пока скачается rss лента. А если ещё и сервер rss тормозит, то загрузка страницы может сильно затянуться.

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

RSS виджет

Добавляем стандартный текстовый виджет:

В нём мы разместим наш код. Сперва добавляем html элемент, куда мы разместим контент:

<ul id="rssfeed" data-src="url_путь_к_rss_ленте" data-count="5">
</ul>
<script>
</script>

В data-src - копируем путь к рсс ленте. В data-count - максимальное количество записей в ленте. Внутри script разместим сам js код.

Теперь нужно получить переменные и проверить их:

var rssSrc = jQuery('#rssfeed').data('src');
var rssCount = jQuery('#rssfeed').data('count') || 5;

if( rssSrc )
  loadFeed(rssSrc);

Затем пишем функцию по загрузке ленты:

function loadFeed(src) {
  jQuery.get(src, function(data) {
    alert(data);
  }
}

Сохраняемся, обновляем страницу, и если всё ок, то нам должен показаться алерт с xml объектом. Его (xml) будем парсить обычным jquery. С ним можно работать так же, как с html:

jQuery(xmldata).find("something")

Так же, чтобы не использовать дополнительные библиотеки, напишем небольшую функцию по конвертации даты к Русскому формату:

function dateFormat(date) {
  let month = date.getMonth() + 1; // месяц в js начинается с 0!
  if (month < 10)
    month = '0' + month;
  return date.getDate() + '.' + month + '.' + date.getFullYear();
}

В итоге весь виджет, вместе с html, будет выглядеть так:

<ul id="rssfeed" data-src="url_путь_к_rss_ленте" data-count="5">
</ul>
<script>
var rssSrc = jQuery('#rssfeed').data('src');
var rssCount = jQuery('#rssfeed').data('count') || 5;

if( rssSrc )
  loadFeed(rssSrc);

// functions

function dateFormat(date) {
  let month = date.getMonth() + 1;
  if (month < 10)
    month = '0' + month;
  return date.getDate() + '.' + month + '.' + date.getFullYear();
}

function loadFeed(src) {
  let widget = '';
  let counter = 0;
  jQuery.get(src, function(data) {
    jQuery(data).find("entry").each(function() {
      counter ++;
      if( counter > rssCount )
        return;
      
      let entry = jQuery(this);
      
      let postDate = new Date(jQuery(entry).find('updated').text());
      widget += '<li><a href="' + jQuery(entry).find('link').attr('href') + '">';
      widget += jQuery(entry).find('title').text();
      widget += '</a> <span class="post-date">' + dateFormat(postDate) + '</span></li>';
      
    });
    jQuery('#rssfeed').html(widget);
  })
}
</script>

Просто скопируйте, вставьте нужный урл в ul id="rssfeed" и всё должно работать.