Ми вже розглянули ряд етапів, через які потрібно пройти, щоб створити тему 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 і знайдіть наступний рядок:

Створюємо тему WordPress на базі статичного HTML: Додаємо характерні зображення

Замініть її наступним кодом:


‘left’,
‘alt’ => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
) ); ?>

Цей код виконує наступне:

  • Код перевіряє, чи присвоєно повідомленням характерне зображення, використовуючи if ( has_post_thumbnail() ). Якщо ні, то характерне зображення відображатися не буде;
  • Далі, він поміщає зображення код посилання на запис, щоб відвідувачі могли і натиснути на зображення, і на заголовок поста, якщо вони хочуть читати запис повністю;
  • І, нарешті, він відображає характерне зображення, використовуючи the_post_thumbnail(). Параметр ‘medium’ використовується, щоб вказати WordPress, що зображення виводиться в середньому розмірі, масив аргументів, включаючи клас стилю і аргумент ‘alt’ використовується, щоб задати атрибути зображення.

Збережіть файл архівів і зайдіть на одну зі сторінок архівів вашого сайту (не головну сторінку блогу, а в архів категорії або інший аналогічний).

Ось як виглядає моя сторінка архіву:

Створюємо тему WordPress на базі статичного HTML: Додаємо характерні зображення

Її стилі потрібно ще трохи підправити, тому що зображення «злипаються». Відкрийте файл style.css і додайте в нього наступний код:

.archive #content article,
.blog #content article {
margin-top: 10px;
overflow: auto;
}

Зверніть увагу, що за допомогою класів .archive і .blog я позиціоную тег на головній сторінці блогу і на будь-якій сторінці архіву.

Тепер запису в архіві виводяться більш акуратно:

Створюємо тему WordPress на базі статичного HTML: Додаємо характерні зображення

3. Додаємо характерні зображення в індексний файл

Тепер у вас є робочий шаблон архіву з підтримкою характерних зображень. Однак перед тим як закінчити, нам потрібно скопіювати код до файлу index.php.

Знайдіть у ньому рядок, яку ви міняли у файлі archive.phpі замініть її точно таким же кодом, що ви додали в файл архіву. Тепер збережіть файл і перевірте головну сторінку вашого блогу.

На ній теж тепер будуть відображатися характерні зображення для кожного запису.

Висновок

Характерні зображення є відмінним способом, щоб зробити сторінки архівів більш наочними та зручними для користувачів. Ви також можете додати характерні зображення в інші шаблони, наприклад, page.php.

Можливо, ви захочете встановити параметри зображень по-своєму, наприклад, з використанням великого розміру картинки замість середнього, і застосуйте інший клас. Ви також можете видалити посилання, зображення, якщо відвідувач і так вже зайшов на сторінку.

У наступній, заключній частині цієї серії я покажу вам, як завантажити тему в сховище тим WordPress.

Якщо у вас є теми, які на вашу думку досить гарні, щоб їх могли використовувати й інші люди, це відмінний спосіб внести свій внесок у розвиток співтовариства і допомогти іншим користувачам WordPress.

Переклад статті «Creating a WordPress Theme from Static HTML: Adding Featured Images» був підготовлений дружною командою проекту Сайтостроение від А до Я.