Отображение импортируемого фида в нескольких столбцах
Недавно я работал над проектом, в котором происходил импорт отдельного 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