Отображение импортируемого фида в нескольких столбцах
Недавно я работал над проектом, в котором происходил импорт отдельного RSS фида и вывод его на экран в нескольких столбцах. Элементы фида на одних страницах отображались в двух столбцах, на других – группами по три и более. Эта техника основана на использовании встроенной в WordPress функциональности fetch_feed, которая позволяет спарсить внешние каналы и вывести их на экран в нескольких столбцах.
Техника обладает высокой гибкостью: вы можете вывести на экран любое количество столбцов и фидов с понравившегося вам ресурса в произвольном месте вашего шаблона. К примеру, структура фидов могла бы быть следующей:
- 10 элементов фида, разбитых по двум столбцам (5 строк)
- 30 элементов фида, разбитых по трем столбцам (10 строк)
- 30 элементов фида, разбитых по пяти столбцам (6 строк)
Ключом к отображению одинакового числа записей в каждом столбце является кратность общего количества элементов фида к общему числу столбцов. Перед тем как приступить к созданию разбитых по столбцам фидов, давайте для начала настроим fetch_feed().
Настройка fetch_feed()
Чтобы вывести на экран фид в нескольких столбцах, нам понадобится использовать функцию fetch_feed, которую необходимо поместить в любой из шаблонов:
<?php include_once(ABSPATH . WPINC . '/feed.php');
if(function_exists('fetch_feed')) {
$feed = fetch_feed('http://example.com/feed/'); // feed URL
if (!is_wp_error($feed)) : $feed->init();
$feed->set_output_encoding('UTF-8'); // set encoding
$feed->handle_content_type(); // ensure encoding
$feed->set_cache_duration(21600); // six hours in seconds
$limit = $feed->get_item_quantity(10); // get 10 feed items
$items = $feed->get_items(0, $limit); // set array
endif;
} ?>
Здесь нам потребуется изменить три вещи:
- feed URL – вместо http://example.com/feed/ введите путь к своему фиду
- cache duration – срок работы кэша (по умолчанию стоит шесть часов, задается в секундах)
- number of feed items – число элементов фида, должно быть кратно числу столбцов.
К примеру, если мы получили 10 элементов фида, то мы можем задать вывод 1, 2, 5 или 10 столбцов. Чтобы распределить фид равномерно по трем столбцам, число элементов фида должно быть кратно трем: 3, 6, 9, 12 и т.д. С этим все понятно, двигаемся дальше.
Настройка array_slice()
Как только fetch_feed() будет настроен, мы сможем вести работу с массивом $items, содержащим контент фида. Чтобы вывести на экран элементы фида в нескольких столбцах, нам понадобится полезная PHP-функция array_slice(), которая позволяет извлечь часть массива с фидами. Функция принимает три параметра: входной массив, смещение и длину:
array_slice($array, $offset, $length);
С помощью массива $items, сгенерированного функцией fetch_feed(), мы вычисляем две другие array_slice переменные в зависимости от общего числа столбцов и элементов фида. Допустим, мы хотим вывести на экран два столбца, в каждом из которых будет пять элементов фида. PHP-код для нашего случая будет выглядеть следующим образом:
// display first five feed items
$blocks = array_slice($items, 0, 5); // grab first five items from the array
foreach ($blocks as $block) {
echo $block->get_title();
echo $block->get_description();
}
// display next five feed items
$blocks = array_slice($items, 5, 10); // grab next five items from the array
foreach ($blocks as $block) {
echo $block->get_title();
echo $block->get_description();
}
Аналогично, чтобы вывести на экран 30 элементов фида в трех столбцах по 10 в каждом, мы создали бы три цикла foreach, используя следующие значения array_slice:
$blocks = array_slice($items, 0, 10); // first column $blocks = array_slice($items, 10, 20); // second column $blocks = array_slice($items, 20, 30); // third column
Как вы можете видеть, для отображения внешних фидов в нескольких столбцах необходима настройка array_slice с корректными значениями параметров $offset и $length.
Отображение элементов фида
В предыдущем разделе мы использовали следующую конструкцию для вывода на экран элементов фида в каждом столбце:
echo $block->get_title(); echo $block->get_description();
Указанный фрагмент кода позволяет вывести на экран заголовок и описание для каждого элемента фида. Отображение фида на этом не ограничивается. Вот более продуманный пример, демонстрирующий, как различные элементы фида могут быть включены в разметку:
<div class="feed-item">
<h1><a href="<?php echo $block->get_permalink(); ?>"><?php echo $block->get_title(); ?></a></h1>
<p>
<?php echo $block->get_date("l, F jS, Y"); ?>
<?php echo substr($block->get_description(), 0, 200); // limit to 200 characters ?>
<a href="<?php echo $block->get_permalink(); ?>">Continue reading</a>
</p>
</div>
Для каждого элемента фида в цикле этот фрагмент выведет на экран следующее:
- Заголовок элемента фида, связанный с URL записи
- Контент элемента фида, урезанный до 200 символов
- Ссылку “Continue reading” (“Читать далее”), связанную с URL записи
- Каждый элемент канала обернут в <div class=”feed-item”>
Это далеко не все возможности работы с импортированными фидами: расширенную информацию можно получить из документации к SimplePie.
Соединяем все вместе
Итак, для вывода на экран контента внешнего фида в нескольких столбцах нам понадобится следующий код:
<?php include_once(ABSPATH . WPINC . '/feed.php');
if(function_exists('fetch_feed')) {
$feed = fetch_feed('http://example.com/feed/');
if (!is_wp_error($feed)) : $feed->init();
$feed->set_output_encoding('UTF-8'); // set encoding
$feed->handle_content_type(); // ensure encoding
$feed->set_cache_duration(21600); // six hours in seconds
$limit = $feed->get_item_quantity(10); // get 10 feed items
$items = $feed->get_items(0, $limit); // set array
endif;
}
if ($limit == 0) {
echo '<p>RSS Feed currently unavailable.</p>';
} else {
// display first five feed items
$blocks = array_slice($items, 0, 5);
foreach ($blocks as $block) { ?>
<div class="feed-item column-one">
<h1><a href="<?php echo $block->get_permalink(); ?>"><?php echo $block->get_title(); ?></a></h1>
<p>
<?php echo $block->get_date("l, F jS, Y"); ?>
<?php echo substr($block->get_description(), 0, 200); ?>
<a href="<?php echo $block->get_permalink(); ?>">Continue reading</a>
</p>
</div>
<?php } ?>
// display next five feed items
$blocks = array_slice($items, 5, 10);
foreach ($blocks as $block) { ?>
<div class="feed-item column-two">
<h1><a href="<?php echo $block->get_permalink(); ?>"><?php echo $block->get_title(); ?></a></h1>
<p>
<?php echo $block->get_date("l, F jS, Y"); ?>
<?php echo substr($block->get_description(), 0, 200); ?>
<a href="<?php echo $block->get_permalink(); ?>">Continue reading</a>
</p>
</div>
<?php }
} ?>
Здесь задан вывод двух столбцов, в каждом из которых расположено пять элементов фида. С помощью информации, приведенной в статье, вы можете настроить этот код таким образом, чтобы он удовлетворял вашим требованиям. Вы можете выводить на экран любое число элементов фида в произвольном количестве столбцов. Расположить код можно в любом шаблоне. Лучше всего вынести его за пределы цикла с записями.
Заметьте, что мы также выполняем проверку, доступен ли фид, перед его выводом на экран. Для этого после установки fetch_feed() мы добавляем следующую PHP логику:
if ($limit == 0) {
echo '<p>RSS Feed currently unavailable.</p>';
} else {
// display first five feed items
// display next five feed items
}
Этот фрагмент кода позволяет уберечься от добавления пустой разметки в том случае, если фид недоступен.
http://digwp.com/2011/09/feed-display-multiple-columns