Как сделать «карусель» популярных постов для WordPress.

От автора: В блогах все чаще определенные посты помещаются вверху страницы. В этом учебнике мы собираемся показать вам, как реализовать это в WordPress. Мы используем тему по умолчанию, Kubrik, в качестве основной, но после модификации она должна легко приспособиться к большинству тем. Тут очень мало кода, а показ постов очень прост.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую скачать исходники.

Чего мы добиваемся

Мы собираемся модифицировать тему Kubrik, предварительно укомплектованную в WordPress, чтобы показывать вверху страницы посты. Это учебное пособие было протестировано только на WordPress 2.5.x, но должно, кроме того, работать в комплектах 2.3.x. Предположим, что вы используете 2.5.x или выше. К концу учебника у вас получится что-то вроде этого:

Шаг 1 – Создаем изображения по умолчанию

До того, как что-либо делать, обратитесь к папке тем своей установки WordPress (wp-content/themes/) и сделайте резервное копирование папки «default». Мы будем редактировать тему Kubrik. Резервное копирование нужно на случай, если вы захотите вернуться к оригинальной, не измененной теме.

Сначала мы собираемся сделать изображение по умолчанию в событии, для которого не определено ни одного изображения популярного поста. Давайте для учебника сделаем его легко и просто. Откройте свой любимый редактор изображений и создайте прямоугольник размером 233x130px с закругленными углами радиусом 10px. Я сделал фоном радиальный градиент цветами от белого до серого и вставил вверху текст. Вот что получилось:

Сохраните изображение как «no-featured-image.jpg» в папке «images» внутри папки «default».

Шаг 2 – Добавляем код PHP

Теперь о коде. Откройте файл «header.php» внутри папки «default». В конце этого файла увидите блок div и тег hr, как здесь:

<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

Между окончанием тега div и hr вставьте следующий код:

<div id="featured">
	<ul id="carousel">
		<?php
		$featured_posts = get_posts('numberposts=3&category=1');

		foreach( $featured_posts as $post ) {
			$custom_image = get_post_custom_values('featured_image', $post->ID);
			$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
			printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
		}
		?>
	</ul>
	<div class="clear"></div>
</div>

Этот код выведет три изображения в неупорядоченном списке. Каждое изображение – это ссылка на популярный пост. Поговорим о том, как сформировать код после добавления CSS.

Шаг 3 – Назначаем стили с помощью CSS

Далее нам нужно добавить немного стилей CSS. Откройте файл «style.css» и внизу в конце файла вставьте следующий код. Все, что он выполняет – удерживает элементы списка слева и располагает их с равными промежутками.

/* Featured Post Carousel */

#featured {
	padding: 10px 10px 0 20px;
	}

#carousel {
	list-style: none;
	margin: 0;
	padding: 0;
	}

#carousel li {
	float: left;
	padding: 0;
	margin-right: 10px;
	}

Шаг 4 – Осмысливаем код

Давайте посмотрим, что делает добавленный код. Внутри контейнера div (id=»featured») у нас находится неупорядоченный список и немного кода PHP для вызова элементов списка.

$featured_posts = get_posts('numberposts=3&category=<strong>1</strong>');

Первая вышеприведенная строка ищет информацию о посте, используя функцию get_posts() и назначает данные поста переменной $featured_posts. Функция get_posts() исключает единичный параметр в виде строки запроса, идентичной той, которую можно видеть в конце URL (без исходного знака вопроса). Первый параметр – «numberposts», который мы в своем учебном пособии установили на 3. Этот параметр определяет, сколько популярных постов мы будем показывать. Второй параметр – «category», установленный нами на 1. Значение параметра «category» должно быть ID категории, которую вы используете для своих постов. ID категории можно найти, пройдя на страницу управления категориями и проведя мышью над названием категории. Панель статуса покажет ссылку. Последнее число – это ID категории.

Следующая строка – это цикл foreach, который будет двигаться по кругу через посты, найденные нами путем использования функции get_posts(). Первая строка внутри цикла foreach отыскивает URL изображения при помощи функции get_post_custom_values() и сохраняет URL в переменную $custom_image. Первый параметр определяет ключ используемого нами пользовательского значения, «featured_image». Второй параметр определяет, из какого поста мы получаем значение.

$custom_image = get_post_custom_values('featured_image', $post->ID);

В следующей строке мы проводим быструю проверку, чтобы узнать, было ли на самом деле определено изображение. Если не было, назначаем переменную $image URL’у изображения по умолчанию. Если изображение определено, используем это.

$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";

В последней строке мы фактически выводим элементы списка. Каждый элемент – это изображение, которое ссылается на популярный пост.

printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);

Шаг 5 – Создаем популярные посты

Вот так! Теперь каждый раз, когда вам нужно выделить пост, установите его в категорию популярных (featured posts) и создайте пользовательское значение при помощи ключа «featured_image» и значения URL изображения. Изображения должны быть размером 233x130px.

Итог работы

Автор: James Lao

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Проект webformyself.com – Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Подписаться

Поделиться

Метки: wordpress, wordpress вывод постов, карусель постов