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

wordpress вывод постов

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

Перед тем, как мы приступим к созданию слайдера постов на для WordPress, я Вам рекомендую скачать исходники.

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

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

wordpress вывод постов

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

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

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

wordpress вывод постов

Сохраните изображение как «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></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 категории.

wordpress вывод постов

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

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

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

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

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

printf('<li></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);

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

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

wordpress вывод постов

Итог работы

wordpress вывод постов

киберсант-вебмастер

Автор: James Lao

На этом, урок по созданию слайдера постов для WordPress, окончен.

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

E-mail: contact@webformyself.com

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

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (6)

  1. spomoni

    Действительно полезный хек, хоть я особо и не фанат WP.

  2. Елена

    Ребята, Вы супер мастера своего дела! Спасибо, что помогаете нам начинающим и не только. Успехов Вам!!!

  3. Ставрополь

    Полезная вещь, спасибо. А как сделать прокрутку вправо и влево этих постов?

  4. Юлия

    Очень нравится ваш сайт. Не все могу повторить, но по крайней мере вижу в каком направлении нужно двигать, открываются новые варианты решений.

  5. Марина

    Помогите пожалуйста убрать эту карусель на моем сайте! Наблюдая в яндекс метрике через вебвизор, я вижу, что люди не наводят на окно, а щелкают на название ниже. Заранее спасибо!

    • Андрей Кудлай

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree