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

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

WordPress дозволяє перемикатися на різні формати записів. Ви не обов’язково повинні використовувати їх все, можна просто вибрати, які формати краще підходять вашому сайту. На даний момент список форматів включає в себе:

  • Примітки: Схожий на формат швидких приміток. Використовуйте цей формат для таких записів, як швидкі оновлення або додаткові статуси;
  • Галерея: запис, що містить галерею зображень;
  • Зображення: не галерея, а одиночне зображення;
  • Відео: запис, що містить одне або кілька відео. Кодекс WordPress також вказує на те, що URL-адресу може вказати на джерело відео, а не на вбудоване відео;
  • Аудіо: аудіо файл або список відтворення;
  • Посилання: проста посилання на зовнішній сайт;
  • Цитата: цитований блок тексту, як правило, з зазначенням автора цитати;
  • Статус: схожий на замітку, але він набагато більше, ніж просто один рядок нотатки;
  • Чат: повна стенограма чату.

Очевидно, що наведені описи відображають лише загальні принципи, ви можете адаптувати формати записів під свої потреби.

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

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

Настройка форматів записів

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

Як створюються формати записів WordPress
Приклад формату записів відео в темі Fable

У цій статті я буду використовувати тему Fable, яка вже включає в себе кілька форматів записів: галерею, цитату і відео. Для мого блогу, проте, цього не достатньо. Я хотів би додати ще кілька форматів.

Перше, що нам потрібно зробити, це створити дочірню тему від Fable, в якій задіяти тільки основний файл style.css.

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

Варто також зазначити, що за замовчуванням формати записів будуть додаватися до типу записів «Записи». Але їх можна також додати до користувацьких типів записів, для цього потрібно буде прописати додаткову рядок коду.

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

function add_post_formats() {
add_theme_support( ‘post-formats’, array( ‘gallery’, ‘quote’,’video’, ‘aside’, ‘image’, ‘link’ ) );
}
add_action( ‘after_setup_theme’, ‘add_post_formats’, 20 );

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

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

Після активації дочірньої теми, ви можете зайти в панель адміністрування WordPress і створити нову запис. Ви побачите, що в правій бічній панелі наведено список з шести форматів записів. Виберіть будь-який з них, щоб змінити формат цієї конкретної запису або просто залиште значення «Стандартний».

Перш, ніж ми продовжимо, я б рекомендував вам додати по кілька записів для кожного формату, який ви використовуєте з відповідним контентом (галереї, вбудоване відео тощо). Таким чином, ви зможете наочно побачити формати записів в дії:

Як створюються формати записів WordPress
Ви можете вибрати один з списку форматів записів у вікні редагування запису

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

Стилі форматів записів

Найпростіший спосіб почати роботу з форматами записів — це використовувати CSS для того, щоб трохи змінити стиль кожного формату. За замовчуванням, теми використовують функцію post_class, яку включають у себе усі теми від Elegant Themes.

Ця функція виводить спеціальний клас CSS для кожного запису, який означає, що запис має певний формат. Назва класу присвоюється за принципом .format-(ім’я). Таким чином, запис формату відео буде мати клас:

.format-video

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

Тема Fable, яку я використовую, вже має спеціальну структуру для записів формату цитата, згідно з якою цитований текст виділяється жирним і полягає в подвійні лапки. Але я хочу, змінити колір фону для всіх цитат, щоб виділити їх ще більше. Для цього я відкриваю файл «style.css» моєї дочірньої теми і додаю в нього наступний код:

.format-quote {
background: #FFAADD !important;
color: white;
}

Після чого для будь-якого запису, для якої був призначений формат «цитата» буде додаватися рожевий фон. А колір тексту буде змінено на білий. Нам також потрібно додати тег “!important«, щоб змінити налаштування теми.

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

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

.home .format-quote {
background: #FFAADD !important;
color: white;
}
.home .format-quote .entry-title {
display: none;
}
Як створюються формати записів WordPress

Наша завершена цитата з рожевим фоном і без заголовка

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

Одним з форматів, які я додав в тему Fable, був формат «нотатки», так що для нього в темі поки не міститься окремого стилю CSS. Для того, щоб запису формату «замітка» були більше схожі на статуси, я хочу видалити великі заголовні букви, що додаються в Fable за замовчуванням, і додати власний ефект тексту:

.home .format-aside .entry-content » > p:first-child:first-letter {
display: inline;
float: none;
margin: 0;
font-size: inherit;
}
.home .format-aside .entry-content p {
font-style: italic;
font-size: 36px;
color: #666;
text-shadow: 2px 2px #E7E1E1;
}

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

Як створюються формати записів WordPress

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

Фільтрація контенту за допомогою форматів записів

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

Більшість тим, такі, наприклад, як Fable або Divi, мають відповідні установки, з допомогою яких висновок користувацьких шаблонів здійснюється на основі формату запису. Це визначається наступним фрагментом коду, який, як правило, розміщується в основному циклі шаблонів записів (наприклад, index.php або single.php):

get_template_part( ‘content’, get_post_format() );

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

Get_template_part підтягує шаблон із спеціального PHP-файл, який може бути змінений на основі формату записів. Так що якщо ви хочете створити спеціальний шаблон для формату нотаток, вам потрібно всього лише створити файл content-aside.php і відредагувати в ньому вміст циклу.

Наприклад, тип записів «Галерея» в темі Fable, розміщує зображення по сітці з підтримкою вбудованих спливаючих вікон FancyBox. Це робиться у файлі «content-gallery.php«.

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

Наприклад, на самому початку я додав в тему Fable формат «посилання». Мої записи-посилання дуже прості і містять тільки назва і одне посилання:

Як створюються формати записів WordPress

Приклад запису-посилання

Що мені дійсно хотілося зробити, це витягнути цей URL і зв’язати заголовки на головній сторінці безпосередньо з зовнішніми ресурсами, замість того, щоб користувачу для переходу на цю сторінку потрібно було спочатку відкрити одиночну запис на моєму сайті. Але це вже виходить за рамки CSS і вимагає від нас використання шаблону.

Підготовка стилів

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

Як створюються формати записів WordPress

Перше, що нам потрібно зробити, це створити в дочірній темі папку з зображеннями, а потім зберегти в ній наведене вище зображення посилання під ім’ям «link.png«. Далі, ми додамо невеликий фрагмент CSS-коду, який забезпечить, щоб наш контент виглядав унікальним:

.home .format-link {
background: #eee !important;
}
.home .format-link .entry-title h2 {
color: #6ba7a5;
}
.home .format-link .entry-title h2:before {
display: inline-block;
content: «»;
background: url(images/link.png);
width: 75px;
height: 56px;
}
.home .format-link .entry-title p {
text-align: center;
}

За допомогою цього коду ми редагуємо кольору фону і тексту для записів-посилань. Потім ми з допомогою псевдо-селектора :before додаємо іконку посилання перед заголовком запису. Якщо вам ще не зовсім зрозуміло, що робить цей код, не хвилюйтеся — ми повернемось до нього трохи пізніше.

Додавання до ссылке функції захоплення

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

Відкрийте файл «functions.php» дочірньої теми і додайте в нього наступний код:

function get_my_url() {
if ( ! preg_match( ‘/]*?href=[‘»](.+?)[‘»]/is’, get_the_content(), $matches ) )
return false;
return esc_url_raw( $matches[1] );
}

Все, що робить ця функція, це переглядає вміст запису і шукає тег a href=. Потім вона витягує з нього URL-адресу та повертає його нам. Ми використовуємо це на наступному етапі.

Настроювання шаблону посилання

Далі, нам потрібно створити шаблон формату записів «посилання». Для цього ми повинні створити в папці дочірньої теми файл з іменем «content-link.php«.

Він буде обслуговувати всі записи формату «Посилання» і буде використовуватися для виведення їх вмісту замість файлу за замовчуванням. В даний момент цей шаблон порожній, він ще нічого не робить. Давайте додамо в нього код:


This is an external link and will take you to a newpage.

У цьому коді відбувається багато речей, так що давайте розберемо її детально:

Це основний код, який задає HTML-структури. Ми додаємо функцію post_class, щоб отримати власні класи (у тому числі .format-link), а також контейнер і заголовок елементів.

Вони беруться безпосередньо з шаблону за замовчуванням, яким в даному випадку є файл «content.php» з кореневої папки теми. Ви можете відредагувати цю частину, щоб вона відповідала вашій темі:

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

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


This is an external link and will take you to a newpage.

Ось де відбувається справжня магія. Ми використовуємо функцію get_my_url, яку створили раніше, щоб зберегти першу посилання з запису в змінній $myLink. Потім через тег h2 ми виводимо цю посилання в елементі а.

Таким чином, замість посилання на запис формат «Посилання» буде вести за першою зовнішньою посиланням запису (у нашому випадку http://elegantthemes.com).

Далі ми просто додаємо заголовок в якості тексту нашої посилання. Ви пам’ятаєте, що ми додали значок посилання в CSS-код, і він буде автоматично додаватися перед кожним заголовком. Нарешті, ми додаємо текст, який повідомляє нашим користувачам про те, що вони перенаправляються по зовнішньому посиланню:

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

Ось ми і закінчили зі зміною записів формату «Посилання«, які виводяться на нашому сайті:

Як створюються формати записів WordPress

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

Постійні посилання

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

Цей код створює посилання на список записів формату «замітка». Змінивши в цьому коді назва формату, ви можете поставити посилання на список записів іншого формату. Це може бути корисно для меню навігації або групування записів. Якщо на вашому блозі широко застосовуються формати записів, то це може сприяти покращенню системи організації контенту.

Висновок

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

Теми Elegant Themes підтримують деякі типи форматів записів, і ви можете досліджувати практично будь-який з них, щоб отримати уявлення про те, як все це працює. Кращий спосіб розібратися в цьому — це просто зануритися у вивчення даного питання!

Переклад статті «How To Create WordPress Post Formats» був підготовлений дружною командою проекту Сайтостроение від А до Я.