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

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

Плагіни-гриди на кшталт Essential Grid справляються з візуалом, але додають зайвий CSS і JS. На невеликих проєктах це непомітно, а на сайті з парою десятків тисяч відвідувачів кожен кілобайт на рахунку. Штатний механізм архівів WordPress дає ту саму функціональність без навантаження на фронтенд, і налаштовується за 10 хвилин.

💡 Швидкий огляд:

• Створюємо кастомний тип записів через CPT UI і одразу вмикаємо підтримку архіву в налаштуваннях
• За потреби пишемо кастомний шаблон для точного контролю верстки
• Налаштовуємо SEO-метадані через Yoast SEO: title, description і og:image для сторінки архіву
• За потреби вимикаємо сайдбар і додаємо Open Graph-розмітку

1. Створення кастомного типу записів

Найпростіший і найнадійніший спосіб зареєструвати CPT без жодного рядка коду, плагін Custom Post Type UI. Він встановлений більш ніж на мільйон сайтів і підтримується з 2010 року, а інтерфейс інтуїтивно зрозумілий: поля форми один в один відповідають аргументам функції register_post_type().

Після встановлення плагіна перейдіть у CPT UI → Add/Edit Post Types. Заповніть мінімум:

• Post Type Slug, латиницею, без пробілів (наприклад portfolio)
• Plural Label, «Портфоліо»
• Singular Label, «Робота»

Інші налаштування можна залишити за замовчуванням, дефолтні значення покривають переважну більшість типових сценаріїв. Натисніть Add Post Type, і новий тип з'явиться в адмінці окремим пунктом меню.

2. Налаштування сторінки архіву

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

Перейдіть у CPT UI → Edit Post Types, оберіть створений тип зі списку:

Прокрутіть до секції Settings і заповніть два ключові поля:

• Has Archive, встановіть True. Це і є вимикач сторінки архіву.
• Custom Rewrite Slug, slug, за яким архів буде доступний. Зазвичай збігається з post type slug (наприклад portfolio).

Збережіть зміни і перейдіть за адресою http://ВАШ_САЙТ/portfolio. Ви побачите список усіх записів цього типу, оформлений стандартним шаблоном archive.php активної теми:

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

3. Кастомний шаблон archive-{posttype}.php

WordPress використовує чітку ієрархію шаблонів. Коли відвідувач заходить на сторінку архіву CPT, ядро шукає файли в порядку:

• archive-{posttype}.php
• archive.php
• index.php

Це означає, що достатньо створити файл з ім'ям archive-portfolio.php (де portfolio, ваш post type slug), і WordPress сам підхопить його.

Порядок дій:

Скопіюйте вміст archive.php вашої теми в новий файл archive-portfolio.php. Потім змінюйте верстку під завдання: приховайте дату, якщо вона не потрібна для портфоліо; виведіть мініатюру в іншому розмірі; замініть стандартний the_excerpt() на the_content().

1
<?php
2
/* Template for Portfolio archive — overrides archive.php */
3
 
4
if ( have_posts() ) {
5
    while ( have_posts() ) {
6
        the_post();
7
        // Your custom markup here
8
        the_post_thumbnail( 'medium' );
9
        the_title( '<h3>', '</h3>' );
10
        the_excerpt();
11
    }
12
}

Якщо ви працюєте з FSE-темою (Block Theme), шаблон архіву створюється в редакторі сайту: Appearance → Editor → Templates → Add New Template → Archive: Portfolio. Без PHP, суто блоками, але логіка та сама: своя верстка для конкретного CPT.

4. SEO-оптимізація сторінки архіву

Сторінка архіву — це не просто службовий URL. Пошукові системи індексують її, і вона цілком може приводити трафік за комерційними запитами на кшталт «портфоліо вебстудії» або «команда агентства».

Якщо у вас встановлений Yoast SEO, метадані для архівів CPT налаштовуються в одному місці:

Відкрийте Yoast SEO → Settings → Content Types, знайдіть свій Custom Post Type і розгорніть секцію. Встановіть шаблони для title і meta description:

Рекомендовані шаблони:

• Title: %%pt_plural%% %%page%%, %%sitename%%
• Meta description: %%pt_plural%%, примеры работ, кейсы и проекты. %%sitename%%

Змінні %%pt_plural%% і %%pt_single%% Yoast підставляє автоматично з налаштувань CPT. Не забудьте вимкнути noindex для сторінки архіву, якщо він увімкнений за замовчуванням, галочка Show in search results має бути активна.

5. Open Graph-розмітка і сайдбар

Щоб під час поширення посилання на сторінку архіву в соцмережах підтягувалася картинка, додайте og:image через хук wp_head. Код вставляється в functions.php активної теми або через плагін Code Snippets:

1
add_action( 'wp_head', 'cpt_archive_og_image' );
2
function cpt_archive_og_image() {
3
    if ( is_post_type_archive( 'portfolio' ) ) {
4
        echo '<meta property="og:image" content="' .
5
            get_template_directory_uri() . '/images/portfolio-og.jpg' . '" />';
6
    }
7
}

Умова is_post_type_archive() спрацьовує лише на сторінці архіву вказаного CPT, тож на інші сторінки розмітка не вплине. Зображення покладіть у папку теми або завантажте через медіатеку і пропишіть прямий URL.

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

У блокових темах перемкніть шаблон на Full Width у налаштуваннях сторінки архіву. У класичних, пошукайте Page Attributes → Template → Full Width у кастомайзері або метабоксі редагування.

📺 Відео: весь процес за 8 хвилин

Короткий показ англійською, створення CPT, увімкнення архіву і кастомний шаблон від першого кліка до готової сторінки:

⁉️🤔 Часті питання

Чому сторінка архіву віддає 404 після створення CPT?

Найімовірніше, ви не увімкнули параметр Has Archive. Перейдіть у CPT UI → Edit Post Types, знайдіть свій тип, встановіть Has Archive в True і вкажіть Custom Rewrite Slug. Після збереження обов'язково зайдіть у Settings → Permalinks і натисніть «Save Changes», це скине кеш правил перезапису.

Чи можна обійтися без плагіна CPT UI?

Так, кастомні типи записів реєструються в functions.php через функцію register_post_type(). Код на 15-20 рядків, для розробника це справа пари хвилин. Плагін просто дає візуальний інтерфейс і рятує від помилок в аргументах.

Як вивести записи CPT на головній сторінці?

Додайте 'has_archive' => true в аргументи register_post_type(), а щоб записи потрапляли в загальний потік, встановіть 'public' => true і 'exclude_from_search' => false. Для точкового виведення використовуйте WP_Query з аргументом 'post_type' => 'portfolio'.

Чим archive-{posttype}.php відрізняється від taxonomy-{taxonomy}.php?

Перший відповідає за сторінку з УСІМА записами CPT, другий, за фільтрацію за конкретним терміном таксономії (наприклад, «Тип проєкту: лендинг»). Обидва працюють за ієрархією шаблонів, але спрацьовують на різних URL.

Чи обов'язково створювати кастомний шаблон?

Ні. Якщо вас влаштовує стандартний archive.php, просто увімкніть Has Archive і користуйтеся. Кастомний шаблон потрібен, коли потрібна унікальна верстка: інші розміри мініатюр, відсутність дат, грід замість списку.

Що робити, якщо стандартний шаблон не влаштовує?

Сторінка архіву для кастомних записів, штука, яку ви налаштовуєте один раз і забуваєте. CPT UI плюс пара рядків у functions.php закривають питання повністю: жодних плагінів-комбайнів, жодного зайвого коду на фронтенді.

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