Отображение импортируемого фида в нескольких столбцах

Отображение импортируемого фида в нескольких столбцах

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

Сохранено из oddstyle.ru

Добавить комментарий

%d такие блоггеры, как: