Код

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

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

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

В цій частині ви дізнаєтеся:

  • як зареєструвати користувальницький тип запису для роботи з ним при створенні сторінки архіву;
  • як скласти код циклу для коректного відображення зображень і заголовків;
  • про параметри і класах, які ви повинні будете додати до зображення і заголовка, щоб зробити їх максимально доступними, а також забезпечити можливість додавання CSS, щоб задати стиль сітки зображень.

У наступній частині я розповім вам, як скласти CSS-код для відображення сітки зображень із заданими ефектами при наведенні на них курсору миші.

Ресурси, які вам будуть потрібні для виконання завдань цієї статті

У цьому уроці використовується дочірня тема, батьківської для якої є тема Twenty Twelve. Вам потрібна буде встановлена система WordPress з активованою темою Twenty Twelve (вона задається за замовчуванням при установці WordPress).

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

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

Ви можете завантажити набір кодів, у тому числі файли дочірньої теми, по посиланню «Код», розташованої на початку статті.

Реєстрація користувальницького типу запису

Першим кроком є реєстрація користувальницького типу записів ‘animal’.
У вашій дочірньої темі створіть новий файл functions.php і додайте в нього наступний код:

__( ‘Animals’ ),
‘singular_name’ => __( ‘animal’ ),
‘add_new’ => __( ‘New animal’ ),
‘add_new_item’ => __( ‘Add New animal’ ),
‘edit_item’ => __( ‘Edit animal’ ),
‘new_item’ => __( ‘New animal’ ),
‘view_item’ => __( ‘View animal’ ),
‘search_items’ => __( ‘Search animals’ ),
‘not_found’ => __( ‘No animals Found’ ),
‘not_found_in_trash’ => __( ‘No animals found in Trash’ ),
);
$args = array(
‘labels’ => $labels,
‘has_archive’ => true,
‘public’ => true,
‘hierarchical’ => false,
‘supports’ => array(
‘title’,
‘editor’,
‘excerpt’,
‘custom-fields’,
‘thumbnail’,
‘page-attributes’
),
‘taxonomies’ => array( ‘post_tag’, ‘category’ ),
);
register_post_type( ‘тварини’, $args );
}
add_action( ‘init’, ‘wptp_create_post_type’ );
?>

Цей код реєструє користувальницький тип запису з використанням двох параметрів:

  • ‘animal’ — назва типу записів;
  • $args — масив аргументів для користувацького типу записів.

До них належать аргументи підтримки, незалежно від того, чи є цей тип записів ієрархічним (в даному випадку це не так, тому він схожий на мітки), і від того чи існує для даного типу записів архіву (який повинен бути створений для сторінки архіву, з якою ми будемо працювати). А також мітки, які визначаються як масив з допомогою $labels.

Потім функція для реєстрації користувальницького типу записів підключається в WordPress за допомогою дій ‘init’, що означає, що вона запускається при ініціалізації WordPress.

Збережіть файл functions.php.

Новий тип записів тепер буде відображатися у панелі адміністрування WordPress, як це показано на скріншоті:

Після цього, нам потрібно буде додати деякі дані. Кілька тварин з характерними зображеннями і текстом-заповнювачем для кожного. Після цього у вас з’явиться такий список:

Створення сторінки архіву на основі зображень: початок роботи

Створення списку архіву з робочими URL-адресами

Перед тим, як приступати до роботи із шаблоном архіву, який буде виводити список записів вашого нового типу, необхідно налаштувати постійні посилання, щоб ви могли легко отримувати доступ до сторінок вашого сайту, на яких буде відображатися архів записів нового типу.

У меню «Постійні посилання» потрібно змінити налаштування постійних посилань, так щоб включити «красиві постійні посилання». Для цього потрібно вибрати опцію %postname% . Це означає, що ви також зможете легко вручну змінювати URL-адреси архіву записів цього типу:

Створення сторінки архіву на основі зображень: початок роботи

Збережіть зміни, внесені в налаштування постійних посилань.

Переглянути сторінки архіву

У браузері введіть URL-адресу вашого сайту з приставкою /animal, щоб вивести архів. У разі мого демо-сайту повний URL-адреса виглядає так: http://rachelmccollin.co.uk/wptutsplus-image-archive/animal/.

На екрані з’явиться архів записів вашого типу:

Створення сторінки архіву на основі зображень: початок роботи

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

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

Створення файлу шаблону для архіву повідомлень типу

Для коректного відображення тварин, вам потрібно створити файл шаблону спеціально для відображення архівів цього типу записів.

Додавання включаються тегів і заголовка архіву

У вашій дочірньої темі створити новий порожній файл з ім’ям archive-animal.php.

Додати код для дзвінка включень — заголовка, підвалу та бічній панелі, плюс відкриваються і закриваються тегів для елементів, що відображаються на сторінці.

Ці елементи об’єднуються з іншими файлами шаблонів, що використовуються темою Twenty Twelve, і підтримують стиль батьківського теми:

//leave space for the archive title
//leave space here for the loop

Потім додайте заголовок архіву, який буде відображатися в заголовку сторінки. Цей код розміщується після відкриття тега
:

При цьому використовується функція post_type_archive_title() для виводу назви типу записів, архів якого відображається. Вона полягає в теги і

щоб зберегти узгодженість з батьківського темою з точки зору семантики і стилю.

Додавання циклу і заповнення його вмістом

Далі, нижче заголовка архіву додайте код основний для циклу:

// залиште тут місце для додавання контенту, виведеного для кожного запису

Тепер у вас є порожній цикл, який виконується на сторінці архіву, але він ще нічого не виводить.
Додайте всередині циклу наступний код:

«archive-image»,
‘alt’ => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) ),
); ?>

Тут використовується функція the_post_thumbnail() для відображення зображення характерного для кожного запису (або кожної тварини).

Параметри у неї наступні:

  • ‘thumbnail’ — розмір зображення, яке буде відображатися, в даному випадку – «мініатюра».
  • $attr — масив атрибутів: клас елемента img, виведеного функцією the_post_thumbnail(), який буде використовуватися для призначення стилю; і атрибут ‘alt’, який використовує strip_tags для відображення будь-якого атрибута alt, заданого при завантаженні зображення, без HTML-тегів.

    При цьому використовується $wp_postmeta для отримання доступу до метаданих зображення.

Це зображення знаходиться всередині постійної посилання на запис ().

Тепер нам потрібно додати заголовок запису під зображенням. Для цього додайте наступний код під кодом для відображення характерного зображення, але перед закриттям тега :

Цей код додає заголовок запису (тобто ім’я тварини) усередині іншої посилання з постійною посиланням на запис, яка знову ж знаходиться усередині тега h2 з класом archive-title.

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

Тепер ваш повний файл шаблона повинен містити наступне:

«archive-image»,
‘alt’ => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) ),
); ?>

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

Крім того, у заголовку сторінки тепер значиться не ‘Archives’, а ‘Animals’, що набагато більш інформативно. Ось як сторінка архіву виглядає зараз у мене:

Створення сторінки архіву на основі зображень: початок роботи

Тепер у вас є зображення назви, але вони відображаються вертикально, і не виділяються спеціальними ефектами при наведенні курсору миші. У наступній частині цього циклу я покажу вам, як додати CSS-код, який буде робити три основні речі:

  • відображати зображення у форматі сітки;
  • приховувати назви;
  • забезпечувати висновок заголовка запису при наведенні на зображення курсору миші.

Після цього, ви отримаєте красиву сторінку архіву на основі зображень, яку можна застосовувати для будь-яких проектів, де використовуються характерні зображення записів.

Переклад статті «Creating an Image-Based Archive Page: Getting Started» був підготовлений дружною командою проекту Сайтостроение від А до Я