Как сделать слайдер популярных постов для 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 и hr вставьте следующий код:

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

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

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

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

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

Первая вышеприведенная строка ищет информацию о посте, используя функцию 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». Второй параметр определяет, из какого поста мы получаем значение.

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

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

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

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

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

Итог работы

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

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

Автор: James Lao

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

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

E-mail: contact@webformyself.com

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

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

Метки: , ,

Похожие статьи:

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

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