От автора: В блогах все чаще определенные посты помещаются вверху страницы. В этом учебнике мы собираемся показать вам, как реализовать это в WordPress. Мы используем тему по умолчанию, Kubrik, в качестве основной, но после модификации она должна легко приспособиться к большинству тем. Тут очень мало кода, а показ постов очень прост.
Перед тем, как мы приступим к созданию слайдера постов на для WordPress, я Вам рекомендую скачать исходники.
Чего мы добиваемся
Мы собираемся модифицировать тему 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, как здесь:
1 2 3 4 5 6 7 |
<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 вставьте следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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» и внизу в конце файла вставьте следующий код. Все, что он выполняет – удерживает элементы списка слева и располагает их с равными промежутками.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 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 для вызова элементов списка.
1 |
$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». Второй параметр определяет, из какого поста мы получаем значение.
1 |
$custom_image = get_post_custom_values('featured_image', $post->ID); |
В следующей строке мы проводим быструю проверку, чтобы узнать, было ли на самом деле определено изображение. Если не было, назначаем переменную $image URL’у изображения по умолчанию. Если изображение определено, используем это.
1 |
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg"; |
В последней строке мы фактически выводим элементы списка. Каждый элемент – это изображение, которое ссылается на популярный пост.
1 |
printf('<li></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title); |
Шаг 5 – Создаем популярные посты
Вот так! Теперь каждый раз, когда вам нужно выделить пост, установите его в категорию популярных (featured posts) и создайте пользовательское значение при помощи ключа «featured_image» и значения URL изображения. Изображения должны быть размером 233x130px.
Итог работы
Автор: James Lao
На этом, урок по созданию слайдера постов для WordPress, окончен.
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (6)