Ми вже розглянули ряд етапів, через які потрібно пройти, щоб створити тему WordPress з статичного HTML-файлу.
Зокрема, ми вже охопили такі теми:
- Підготовка розмітки під WordPress;
- Конвертація HTML на PHP і поділ HTML-файлу на файли шаблонів;
- Редагування стилів і завантаження теми WordPress;
- Додавання циклу в ваш індексний файл;
- Додавання мета-тегів, звернення wp_head, а також заголовка сайту та опису у файл заголовка;
- Додавання меню навігації;
- Додавання області віджетів в заголовок і бічну панель;
- Додавання області віджетів та обігу wp_footer в файл футера;
- Створення файлу шаблону для статичної сторінки;
- Створення файлу шаблону архіву.
Ваша тема вже повинна містити файл шаблону для відображення сторінок архівів, але на даний момент зображення в ній ще не відображаються так, як потрібно.
У цій статті я розповім, як встановити для вашої теми підтримку характерних зображень і як відображати і оформляти їх у шаблоні архіву.
Що вам знадобиться:
- Редактор за вашим вибором;
- Браузер для перевірки результатів;
- Встановлений на локальному або віддаленому сервері WordPress;
- Якщо ви працюєте на локальному сервері, вам потрібно MAMP , WAMP або LAMP, щоб активувати тему WordPress;
- Якщо ви працюєте віддалено, вам потрібно FTP доступ до вашого сайту, плюс права доступу адміністратора до встановленого WordPress.
Про характерних зображеннях
Характерні зображення, або мініатюри записів — це дійсно корисна функція WordPress, яка з’явилася, починаючи з версії 2.9.
Термінологія, яка використовується для цієї функції, може бути трохи заплутаним, тому я постараюся пояснити вам деякі терміни:
- Характерні зображення — або мініатюри записів — це одиночне зображення, призначуване запису через пункт «Характерне зображення» панелі редагування сторінки. При роботі з характерними зображеннями в коді зазвичай використовується термін «featured image» (наприклад, при додаванні підтримки характерних зображень до теми) або «thumbnail» (наприклад, при відображенні їх у файлах шаблонів). Тим не менш, це одне і те ж;
- Термін «мініатюра» також використовується для розмірів зображення. Таким чином, ви можете вивести будь-яке зображення, яке ви завантажуєте в WordPress, у розмірі «мініатюра». Це відноситься до всіх зображень, а не тільки до характерним. Таким чином, ви можете виводити мініатюру повідомлення у її мініатюрному, середньому, великому або оригінальному розмірі.
Все трохи заплутано, тим не менше, якщо ви використовуєте коректний код, проблем виникнути не повинно.
1. Встановлюємо у темі підтримку характерних зображень
Першим етапом є додавання підтримки характерних зображень — без цього ви не будете мати доступу до розділу «Характерне зображення» панелі редагування повідомлення.
Відкрийте файл functions.php вашої теми і додайте наступний код перед закриттям тега ?>:
function wptutsplus_theme_support() {
add_theme_support( ‘post-thumbnails’ );
}
add_action( ‘after_setup_theme’, ‘wptutsplus_theme_support’ );
Збережіть файл функцій і відкрийте панель редагування одного з ваших повідомлень. Як показано на скріншоті нижче, ви повинні перевірити, що в ній з’явилася кнопка «Характерне зображення»:
Тепер функція підтримки характерних зображень для кожного запису підключена. Вам не потрібно вручну вказувати розмір мініатюри — це робиться через код.
2. Додаємо характерні зображення в шаблон архівів
Наступним кроком є додавання коду для відображення характерних зображень на сторінках архівів. Ви можете зробити це всередині циклу.
Відкрийте файл archive.php і знайдіть наступний рядок:
Замініть її наступним кодом:
‘left’,
‘alt’ => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
) ); ?>
Цей код виконує наступне:
- Код перевіряє, чи присвоєно повідомленням характерне зображення, використовуючи if ( has_post_thumbnail() ). Якщо ні, то характерне зображення відображатися не буде;
- Далі, він поміщає зображення код посилання на запис, щоб відвідувачі могли і натиснути на зображення, і на заголовок поста, якщо вони хочуть читати запис повністю;
- І, нарешті, він відображає характерне зображення, використовуючи the_post_thumbnail(). Параметр ‘medium’ використовується, щоб вказати WordPress, що зображення виводиться в середньому розмірі, масив аргументів, включаючи клас стилю і аргумент ‘alt’ використовується, щоб задати атрибути зображення.
Збережіть файл архівів і зайдіть на одну зі сторінок архівів вашого сайту (не головну сторінку блогу, а в архів категорії або інший аналогічний).
Ось як виглядає моя сторінка архіву:
Її стилі потрібно ще трохи підправити, тому що зображення «злипаються». Відкрийте файл style.css і додайте в нього наступний код:
.archive #content article,
.blog #content article {
margin-top: 10px;
overflow: auto;
}
Зверніть увагу, що за допомогою класів .archive і .blog я позиціоную тег на головній сторінці блогу і на будь-якій сторінці архіву.
Тепер запису в архіві виводяться більш акуратно:
3. Додаємо характерні зображення в індексний файл
Тепер у вас є робочий шаблон архіву з підтримкою характерних зображень. Однак перед тим як закінчити, нам потрібно скопіювати код до файлу index.php.
Знайдіть у ньому рядок, яку ви міняли у файлі archive.phpі замініть її точно таким же кодом, що ви додали в файл архіву. Тепер збережіть файл і перевірте головну сторінку вашого блогу.
На ній теж тепер будуть відображатися характерні зображення для кожного запису.
Висновок
Характерні зображення є відмінним способом, щоб зробити сторінки архівів більш наочними та зручними для користувачів. Ви також можете додати характерні зображення в інші шаблони, наприклад, page.php.
Можливо, ви захочете встановити параметри зображень по-своєму, наприклад, з використанням великого розміру картинки замість середнього, і застосуйте інший клас. Ви також можете видалити посилання, зображення, якщо відвідувач і так вже зайшов на сторінку.
У наступній, заключній частині цієї серії я покажу вам, як завантажити тему в сховище тим WordPress.
Якщо у вас є теми, які на вашу думку досить гарні, щоб їх могли використовувати й інші люди, це відмінний спосіб внести свій внесок у розвиток співтовариства і допомогти іншим користувачам WordPress.
Переклад статті «Creating a WordPress Theme from Static HTML: Adding Featured Images» був підготовлений дружною командою проекту Сайтостроение від А до Я.