Використання зображень при відображенні списку архіву WordPress може бути дуже потужним інструментом впливу на аудиторію. Це збільшує візуальну привабливість сторінки і сайту в цілому, і це може допомогти проілюструвати те, чому присвячений ваш сайт в цілому.
WordPress дозволяє легко працювати з характерними зображеннями, характерні зображення просто відображаються для кожного запису при виведенні цього запису через цикл.
У цій частині ви дізнаєтеся:
- як зареєструвати призначений для користувача тип запису для роботи з ним при створенні сторінки архіву;
- як скласти код циклу для коректного відображення зображень і заголовків;
- про параметри і класах, які ви повинні будете додати до зображення і заголовку, щоб зробити їх максимально доступними, а також забезпечити можливість додавання CSS. щоб задати стиль сітки зображень.
У наступній частині я розповім вам, як скласти CSS-код для відображення сітки зображень із заданими ефектами при наведенні на них покажчика миші.
Ресурси, які вам будуть потрібні для виконання завдань цієї статті
У цьому уроці використовується дочірня тема, батьківської для якої є тема Twenty Twelve. Вам потрібна буде встановлена система WordPress з активованою темою Twenty Twelve (вона задається за замовчуванням при установці WordPress).
Якщо ви не знаєте, як налаштовувати дочірню тему, дивіться інструкції з Кодексу WordPress.
Ви можете завантажити набір кодів, в тому числі файли дочірньої теми, по посиланню «Код», розташованої на початку статті.
Реєстрація користувальницького типу записи
Першим кроком є реєстрація користувача типу записів 'animal'.
У вашій дочірньої темі створіть новий файл functions.php і додайте в нього наступний код:
- 'Animal' - назва призначеного для користувача типи записів;
- $ Args - масив аргументів для призначеного для користувача типи записів.
До них відносяться аргументи підтримки, незалежно від того, чи є даний тип записів ієрархічним (в даному випадку це не так, тому він схожий на мітки), і від того чи існує для даного типу записів архів (який повинен бути створений для сторінки архіву, з якої ми будемо працювати). А також мітки, які визначаються як масив за допомогою $ labels.
Потім функція для реєстрації користувача типу записів підключається в WordPress за допомогою дій 'init'. що означає, що вона запускається при ініціалізації WordPress.
Збережіть файл functions.php.
Новий тип записів тепер буде відображатися в панелі адміністрування WordPress. як це показано на скріншоті:
Після цього, нам потрібно буде додати деякі дані. Кілька тварин з характерними зображеннями і текстом-заповнювачем для кожного. Після цього у вас з'явиться такий список:
Перед тим, як приступати до роботи з шаблоном архіву, який буде виводити список записів вашого нового типу, необхідно налаштувати постійні посилання, щоб ви могли легко отримувати доступ до сторінок вашого сайту, на яких буде відображатися архів записів нового користувальницького типу.
Збережіть зміни, внесені в налаштування постійних посилань.
На екрані з'явиться архів записів вашого користувацького типу:
Як ви можете бачити, на даний момент на сторінці виводяться характерне зображення, заголовок і весь вміст для кожної тварини. Якщо ви перейдіть вниз, то побачите, що тут перераховані всі тварини.
Наступним кроком буде створення файлу шаблону для виведення тільки зображення і заголовка для кожної тварини.
Створення файлу шаблону для архіву повідомлень користувача типу
Для коректного відображення тварин, вам потрібно створити файл шаблону спеціально для відображення архівів цього користувача типу записів.
Додавання включаються тегів і заголовка архіву
У вашій дочірньої темі створіть новий порожній файл з ім'ям archive-animal.php.
Додайте код для виклику включень - заголовка, підвалу і бічній панелі, плюс відкриваються і закриваються тегів для елементів, що відображаються на сторінці.
Ці елементи об'єднуються з іншими файлами шаблонів, що використовуються темою Twenty Twelve. і підтримують стиль батьківської теми:
Потім додайте заголовок архіву, який буде відображатися в якості заголовка сторінки. Цей код розміщується після відкриття тега
При цьому використовується функція post_type_archive_title () для виведення назви типу записів, архів якого відображається. Вона полягає в теги і
, щоб зберегти узгодженість з батьківської темою з точки зору семантики і стилю.
Додавання циклу і заповнення його вмістом
Далі, нижче заголовка архіву додайте основний код для циклу:
Тепер у вас є порожній цикл, що запускається на сторінці архіву, але він ще нічого не виводить.
Додайте всередині циклу наступний код:
Тут використовується функція the_post_thumbnail () для відображення характерного зображення для кожного запису (або кожної тварини).
Параметри у неї такі:
- 'Thumbnail' - розмір зображення, яке буде відображатися, в даному випадку - «мініатюра».
- $ Attr - масив атрибутів: клас елемента img. виведеного функцією the_post_thumbnail (). який буде використовуватися для призначення стилю; і атрибут 'alt'. який використовує strip_tags для відображення будь-якого атрибута alt. заданого при завантаженні зображення, без HTML теґи.
При цьому використовується $ wp_postmeta для отримання доступу до метаданих зображення.
Це зображення знаходиться всередині постійної посилання на запис (