Як зробити слайдер популярних постів для WordPress

18

Від автора: В блогах все частіше певні посади містяться вгорі сторінки. У цьому підручнику ми збираємося показати вам, як реалізувати це в 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» і внизу в кінці файлу вставте наступний код. Все, що він виконує утримує елементи списку ліворуч і розташовує їх з рівними проміжками.

/* 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=1’);

Перша вищенаведена рядок шукає інформацію про піст, використовуючи функцію 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->ID);

У наступному рядку ми проводимо швидку перевірку, щоб дізнатися, чи насправді визначено зображення. Якщо не було, призначаємо змінну $image ДО зображення за замовчуванням. Якщо зображення визначено, використовуємо це.

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

В останньому рядку ми фактично виводимо елементи списку. Кожен елемент – це зображення, яке посилається на найпопулярніший пост.

printf(‘

‘, get_permalink($post->ID), $post->post_title, $image, $post->post_title);

Крок 5 – Створюємо популярні пости

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

Як зробити слайдер популярних постів для WordPress

Підсумок роботи

Як зробити слайдер популярних постів для WordPress

Як зробити слайдер популярних постів для WordPress

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

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.