📋 Повна шпаргалка по WordPress
Відкрили functions.php і забули, як підключити сайдбар? Так буває у кожного, хто верстає тему WordPress вручну. Під рукою потрібна одна сторінка, а не десять вкладок developer.wordpress.org.
Тут зібрані опори розробки на WordPress: 13 файлів шаблону та ієрархія їх вибору, базовий Цикл, підключні теги та параметри bloginfo(), а далі, хуки й фільтри, умовні теги, підключення скриптів, шорткоди, WP_Query, екранування даних, REST API та команди WP-CLI. Усі приклади коду робочі. Тримайте вкладку відкритою під час розробки та звіряйтеся по ходу.
💡 Швидкий огляд:
- Збережіть сторінку в закладки й тримайте відкритою в окремій вкладці під час верстання теми.
- Почніть із розділу «Анатомія теми»: створіть файли теми за списком, перш ніж писати код.
- Скопіюйте базовий Цикл WordPress в
index.phpта обв’яжіть його підключними тегами шапки, сайдбара й футера. - Підставляйте теги
bloginfo()іget_bloginfo()з таблиці прямо в шаблони, звіряючись із колонкою «Що виводить». - Перед публікацією пройдіться за правилами для
style.css: валідуйте CSS, мініфікуйте та додайте стилі друку. - Далі сторінкою, довідник: ієрархія шаблонів, хуки й фільтри, умовні теги, підключення скриптів, шорткоди,
WP_Query, екранування, REST API та WP-CLI.
Анатомія теми WordPress
Тема WordPress — це набір PHP-файлів, об’єднаних спільною логікою та підпорядкованих ієрархії шаблонів. Ключовий компонент: style.css, він відповідає за візуальне оформлення й водночас слугує ідентифікатором теми в адмінці. Але фундамент будь-якої класичної теми — це саме PHP-шаблони: кожен відповідає за свою ділянку сторінки й викликається в порядку, заданому ієрархією WordPress.
Для створення стандартної теми потрібні такі файли, тринадцять штук, і кожен закриває конкретну зону сайту:
- header.php, секція
<head>і верхня частина сторінки: метадані, заголовок сайту, підключенняstyle.css, відкривний тег<body>. - index.php, головний шаблон, точка входу. Через підключні теги збирає решту файлів у єдину сторінку. Якщо спеціалізованого шаблону немає, WordPress падає в
index.php. - sidebar.php, бічна панель: віджети, рубрики, пошук, додаткове меню.
- footer.php, футер: копірайт, посилання на соцмережі, скрипти аналітики, закривні теги
</body></html>. - page.php, шаблон для сторінок (статичний контент, «Про нас», «Контакти»).
- single.php, шаблон окремого допису блогу.
- comments.php, блок коментарів і форма їх додавання.
- 404.php, сторінка помилки 404. Якщо цього файлу немає, WordPress показує стандартне системне повідомлення, що гірше для відвідувача.
- search.php, шаблон видачі результатів пошуку.
- searchform.php, форма пошуку (у класичних темах; сучасні часто обходяться віджетом).
- archive.php, шаблон архівів: рубрики, мітки, архіви за датами.
- functions.php, функціональне серце теми: користувацькі хуки, підключення скриптів і стилів, реєстрація меню, областей для віджетів, кастомні типи записів. Усе, що додає темі функціональність, живе тут.
- style.css, єдиний НЕ-PHP файл у списку, але без нього тема не існує: саме він зберігає заголовок теми та визначає зовнішній вигляд сайту.
Можна обійтися й меншою кількістю шаблонів, наприклад, index.php + style.css уже утворюють мінімальну тему. Але для повноцінного сайту краще тримати всі тринадцять: кожен файл заточений під своє завдання, а WordPress сам вибирає потрібний за ієрархією. Типовий index.php має такий вигляд:
1 <?php get_header(); ?> 2 3 <!-- Основной контент, включая Цикл --> 4 5 <?php get_sidebar(); ?> 6 <?php get_footer(); ?>
Рухаємося далі, до найважливішого фрагмента коду, без якого не виводиться жоден запис.
Цикл WordPress
Цикл (The Loop), центральний механізм виведення контенту. Без нього вам довелося б вручну кодувати відображення кожного поста й кожної сторінки в шаблоні теми. Цикл робить рівно те, що обіцяє назва: проходить по всіх записах, які відповідають поточному запиту, і для кожного застосовує вказану вами HTML/PHP-розмітку.
Базовий синтаксис Циклу:
1 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 2 <!-- HTML-разметка и теги шаблона для каждой записи --> 3 <?php endwhile; endif; ?>
have_posts() перевіряє, чи є записи для виведення. Якщо є, the_post() ініціалізує внутрішній вказівник WordPress на поточний запис, після чого всередині Циклу стають доступні десятки тегів шаблону: the_title() для заголовка, the_content() для тексту запису, the_permalink() для посилання, the_excerpt() для цитати та багато інших.
Цикл зазвичай розміщують в index.php для виведення списку записів, але ніщо не заважає використовувати його в single.php, page.php або archive.php, логіка та сама, відрізняється лише контекст. Усередині Циклу додавайте будь-які HTML-обгортки та PHP-теги, WordPress застосує їх до кожного запису по черзі.
Практичний приклад, виведення заголовка й дати кожного запису:
1 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 2 <article> 3 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 4 <time><?php echo get_the_date(); ?></time> 5 </article> 6 <?php endwhile; endif; ?>
Тепер про те, як Цикл взаємодіє з рештою теми, через підключні теги.
Підключні теги шаблону
Підключні теги (Include Tags) — це PHP-функції, які завантажують вміст одного файлу теми в інший. Вони формують скелет типового index.php: заголовок, контент, сайдбар, футер. Чотири базові функції:
<?php get_header(); ?>, підключаєheader.php. Зазвичай перший рядок вindex.phpі будь-якому іншому шаблоні, де потрібна шапка.<?php get_sidebar(); ?>, підключаєsidebar.php. Якщо бічна панель не потрібна, просто приберіть виклик.<?php get_footer(); ?>, підключаєfooter.php. Завжди в кінці шаблону, закриває сторінку.<?php comments_template(); ?>, підключаєcomments.php. Розміщується всерединіsingle.php, після виведення контенту запису.
Усі чотири функції шукають файли в папці активної теми. Якщо файлу немає, WordPress просто нічого не виводить (крім get_header() і get_footer(), їх відсутність зламає верстку).
Наступний рівень, теги, які не просто підключають файли, а видобувають дані з бази.
Теги bloginfo
Теги bloginfo() видобувають інформацію про сайт із бази даних WordPress, ту саму, яку ви заповнюєте в Налаштування → Загальні та в профілі користувача. Функція повертає рядок і одразу виводить його на екран. Найбільш затребувані параметри:
Параметр | Що виводить |
|---|---|
| Заголовок сайту |
| URL сайту |
| Слоган (опис) сайту |
| Кодування (за замовчуванням UTF-8) |
| URL файлу |
| Версія встановленого WordPress |
| Мова сайту |
| URL RSS-стрічки (RSS 0.92) |
| URL RSS-стрічки (RSS 2.0) |
Це лише верхівка айсберга, повний список параметрів є в документації WordPress.
Get_bloginfo(), коли потрібно не вивести, а зберегти
Для випадків, коли інформацію сайту потрібно використати в коді, а не просто показати на сторінці, застосовується функція get_bloginfo():
1 <?php $info = get_bloginfo( $show, $filter ); ?>
$show, ключове слово. Підтримуються значення'name'(заголовок),'url'(адреса),'description'(слоган),'admin_email'(email адміна) та інші; повний список у документації.$filter, режим фільтрації:'raw'(значення «як є», за замовчуванням) або'display'(значення пропускається черезwptexturize(), перетворює лапки, тире, символи).
Приклад: отримуємо опис сайту й виводимо з префіксом:
1 <?php $site_description = get_bloginfo( 'description' ); ?> 2 <?php echo 'Слоган вашего сайта: ' . esc_html( $site_description ); ?>
Результат: «Слоган вашого сайту: Найкращі преміальні теми WordPress».
Окрім bloginfo, WordPress має розгалужену систему тегів шаблону: загальні теги, теги авторів, мініатюр, рубрик, посилань, усі вони працюють як усередині Циклу, так і поза ним, а комбінації дають повний контроль над виводом контенту.
Таблиця стилів теми
style.css виконує дві ролі. Перша, ідентифікаційна: заголовок на самому верху файлу повідомляє WordPress назву теми, автора, версію, ліцензію. Друга, візуальна: всі CSS-правила, що керують зовнішнім виглядом сайту. Стандартний заголовок має такий вигляд:
1 /* 2 Theme Name: Название темы 3 Theme URI: https://www.example.com/theme 4 Author: Ваше Имя 5 Author URI: https://www.example.com/ 6 Description: Адаптивная тема WordPress с поддержкой... 7 Version: 1.0 8 License: GNU General Public License v2 or later 9 License URI: http://www.gnu.org/licenses/gpl-2.0.html 10 Tags: responsive, two-columns, right-sidebar, custom-header 11 Text Domain: mythemename 12 */
Правила гарного тону під час роботи з style.css:
- Дотримуйтеся стандартів кодування CSS WordPress, єдиний стиль спрощує підтримку.
- Перевіряйте CSS на валідність через W3C-валідатор.
- Мініфікуйте CSS у продакшені, але залишайте читабельний вихідний код для розробки.
- Додайте стилі для друку (
@media print), багато читачів роздруковують статті. - Стилізуйте всі стандартні HTML-елементи, які можуть трапитися в контенті запису.
Ієрархія шаблонів WordPress
Для кожного запиту WordPress сам вирішує, який PHP-файл теми підключити — це і є ієрархія шаблонів. Правило одне: від найбільш специфічного файлу до найзагальнішого, а index.php, останній запасний варіант для будь-якої гілки. Знання порядку знімає питання «чому правка в single.php не видна на сторінці рубрики».
1 Отдельная запись → single-{post_type}-{slug}.php → single-{post_type}.php → single.php → singular.php → index.php 2 Страница → {шаблон из редактора}.php → page-{slug}.php → page-{id}.php → page.php → singular.php → index.php 3 Рубрика → category-{slug}.php → category-{id}.php → category.php → archive.php → index.php 4 Архив → archive-{post_type}.php → archive.php → index.php 5 Поиск → search.php → index.php 6 Ошибка 404 → 404.php → index.php 7 Главная → front-page.php → home.php → index.php
WordPress бере перший наявний файл зліва направо. Тому single-product.php перекриє single.php лише для записів типу product, не зачіпаючи решту.
Хуки: дії та фільтри
Хуки — це точки розширення WordPress: вони дають змогу вклинитися в роботу ядра, не редагуючи його файли. Дії (actions) виконують побічний ефект (підключити скрипт, надіслати лист), фільтри (filters) отримують значення, змінюють його і зобов’язані повернути назад. Забутий return у фільтрі, найчастіша причина порожнього контенту.
1 // Регистрация 2 add_action( 'имя_хука', 'callback', 10, 1 ); // приоритет, число аргументов 3 add_filter( 'имя_хука', 'callback', 10, 1 ); 4 5 // Вызов (в ядре или своём коде) 6 do_action( 'имя_хука', $arg ); // действие: ничего не возвращает 7 apply_filters( 'имя_хука', $value, $arg ); // фильтр: ВОЗВРАЩАЕТ значение 8 9 // Удаление (приоритет должен совпадать с тем, что был при добавлении) 10 remove_action( 'имя_хука', 'callback', 10 );
Приклад: додати абзац у кінець кожного запису:
1 add_filter( 'the_content', 'my_append_note', 20 ); 2 function my_append_note( $content ) { 3 return $content . '<p>Спасибо за чтение!</p>'; // без return контент исчезнет 4 }
Ключові хуки теми:
after_setup_theme, реєстрація підтримки можливостей (add_theme_support()), меню, розмірів мініатюр.wp_enqueue_scripts, єдино правильне місце для підключення CSS і JS фронтенду.init, рання ініціалізація: реєстрація типів записів і шорткодів.the_content, фільтрація HTML запису перед виведенням.
Менший пріоритет, раніше виконання (за замовчуванням 10). Щоб callback отримав більше одного аргументу, збільште четвертий параметр accepted_args.
Умовні теги
Умовні теги (Conditional Tags) — це функції, які повертають true або false залежно від того, яка сторінка зараз відкрита. На них будують логіку «тут показуємо сайдбар, а на 404, ні».
1 is_home() // блоговая лента записей 2 is_front_page() // главная страница сайта 3 is_single() // отдельная запись 4 is_page() // отдельная страница 5 is_singular() // любая одиночная запись/страница/CPT 6 is_archive() // любой архив 7 is_category() // архив рубрики 8 is_search() // страница результатов поиска 9 is_404() // страница ошибки 404 10 is_user_logged_in() // пользователь авторизован 11 is_admin() // запрос идёт в админке (НЕ «пользователь администратор»)
Головна пастка: запитові умовні теги (is_single, is_page, is_home та інші) працюють лише після того, як сформовано основний запит, тобто всередині файлів шаблону та Циклу або починаючи з хука template_redirect. Виклик на початку functions.php або на init, занадто рано: WordPress видасть _doing_it_wrong() і поверне невірний результат. Винятки, is_admin() і is_user_logged_in(), вони не залежать від запиту й доступні раніше. І пам’ятайте: is_admin() перевіряє контекст (адмінка проти фронтенду), а не роль; для ролі використовуйте current_user_can( 'manage_options' ).
Підключення скриптів і стилів
Спокуса прописати <link> і <script> прямо в header.php велика, але це помилка: ви втрачаєте керування залежностями, версіонування для скидання кешу, стратегії defer/async і захист від подвійного завантаження (два плагіни легко підключать jQuery двічі). Правильний шлях, черга WordPress на хуку wp_enqueue_scripts.
1 add_action( 'wp_enqueue_scripts', 'my_theme_assets' ); 2 function my_theme_assets() { 3 // Стиль темы с версией из заголовка style.css 4 wp_enqueue_style( 5 'my-theme', 6 get_stylesheet_uri(), 7 array(), 8 wp_get_theme()->get( 'Version' ) 9 ); 10 11 // Скрипт с зависимостью и современным синтаксисом (WP 6.3+) 12 wp_enqueue_script( 13 'my-app', 14 get_theme_file_uri( 'assets/js/app.js' ), 15 array( 'jquery' ), // зависимости 16 '1.0.0', // версия → сброс кеша 17 array( 18 'in_footer' => true, 19 'strategy' => 'defer', 20 ) 21 ); 22 }
Починаючи з WordPress 6.3, останній параметр wp_enqueue_script() — це масив $args (in_footer, strategy), хоча стара форма з булевим true для підвалу, як і раніше, працює. Для фронтенду використовуйте wp_enqueue_scripts, для адмінки, admin_enqueue_scripts, для сторінки входу, login_enqueue_scripts.
Шорткоди
Шорткоди перетворюють короткий запис у квадратних дужках на довільний HTML, зручно для кнопок, галерей і форм усередині контенту. Обробник зобов’язаний повернути рядок, а не виводити його через echo, інакше результат «вистрибне» на початок сторінки.
1 add_shortcode( 'btn', 'my_button_shortcode' ); 2 function my_button_shortcode( $atts, $content = null, $tag = '' ) { 3 $a = shortcode_atts( 4 array( 'url' => '#', 'label' => 'Кнопка' ), 5 $atts, 6 $tag 7 ); 8 return sprintf( 9 '<a class="btn" href="%s">%s</a>', 10 esc_url( $a['url'] ), // экранируем на выводе 11 esc_html( $a['label'] ) 12 ); 13 } 14 // Использование в записи: [btn url="https://example.com" label="Купить"]
shortcode_atts() накладає атрибути користувача поверх значень за замовчуванням. Якщо потрібно виконати шорткоди всередині рядка або шаблону, обгорніть її в do_shortcode(), але для виклику власної функції кличте її напряму, без посередника.
WP_Query та кастомні запити
WP_Query — це клас для будь-яких вибірок записів: останні новини в сайдбарі, добірка за рубрикою, стрічка кастомного типу. Після свого циклу обов’язково викликайте wp_reset_postdata(), інакше теги шаблону далі по сторінці отримають не той запис.
1 $q = new WP_Query( array( 2 'post_type' => 'post', 3 'posts_per_page' => 5, 4 'category_name' => 'news', 5 'orderby' => 'date', 6 'order' => 'DESC', 7 ) ); 8 9 if ( $q->have_posts() ) { 10 while ( $q->have_posts() ) { 11 $q->the_post(); 12 the_title( '<h3>', '</h3>' ); 13 } 14 wp_reset_postdata(); // вернуть глобальный $post 15 }
Щоб змінити основний запит сторінки (наприклад, кількість записів на головній), не використовуйте застарілий query_posts(), він генерує зайвий запит до бази даних і ламає пагінацію. Правильно, хук pre_get_posts, який змінює запит до його виконання:
1 add_action( 'pre_get_posts', 'my_main_query' ); 2 function my_main_query( $query ) { 3 if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) { 4 $query->set( 'posts_per_page', 12 ); 5 } 6 }
Безпека: екранування та санітизація
Золоте правило WordPress: санітизуємо на вході, екрануємо на виводі, перевіряємо всюди. Будь-які дані від користувача очищуємо перед збереженням у базу та екрануємо перед виводом у HTML, навіть якщо вони вже були очищені.
1 // Экранирование НА ВЫВОДЕ 2 echo esc_html( $text ); // текст внутри тега 3 echo esc_attr( $value ); // значение атрибута 4 echo esc_url( $href ); // ссылки href/src 5 echo wp_kses_post( $rich_html ); // безопасный набор HTML для контента 6 7 // Санитизация НА ВХОДЕ (перед записью в БД) 8 $clean = sanitize_text_field( $_POST['name'] ); 9 $email = sanitize_email( $_POST['email'] ); 10 $num = absint( $_POST['count'] );
Форми та дії захищаємо nonce, одноразовим токеном проти CSRF:
1 // В форме: 2 wp_nonce_field( 'my_save_action', 'my_nonce' ); 3 4 // При обработке: 5 if ( ! isset( $_POST['my_nonce'] ) || 6 ! wp_verify_nonce( $_POST['my_nonce'], 'my_save_action' ) ) { 7 return; // запрос отклонён 8 }
На практиці більшість уразливостей тем і плагінів — це саме пропущене екранування виводу. Візьміть за звичку: жодна змінна не потрапляє в HTML без esc_*.
REST API WordPress
REST API віддає дані сайту у форматі JSON, його використовують мобільні застосунки, headless-фронтенди та інтеграції. Базова адреса, /wp-json/wp/v2/.
1 GET /wp-json/wp/v2/posts // записи 2 GET /wp-json/wp/v2/pages // страницы 3 GET /wp-json/wp/v2/media // медиафайлы 4 GET /wp-json/wp/v2/users // пользователи 5 GET /wp-json/wp/v2/posts/123 // одна запись 6 GET /wp-json/wp/v2/posts?per_page=5&search=тема&_embed
Власний маршрут реєструють на хуку rest_api_init. Параметр permission_callback обов’язковий, без нього WordPress видасть попередження; для публічного читання ставте '__return_true'.
1 add_action( 'rest_api_init', function () { 2 register_rest_route( 'myplugin/v1', '/items/(?P<id>\d+)', array( 3 'methods' => 'GET', 4 'callback' => 'my_get_item', 5 'permission_callback' => '__return_true', 6 ) ); 7 } );
WP-CLI: команди під рукою
WP-CLI керує сайтом із термінала, швидше й надійніше, ніж клацати в адмінці, особливо під час обслуговування кількох сайтів. Найуживаніше:
1 wp core update # обновить ядро WordPress 2 wp core version # какая версия установлена 3 wp plugin install akismet --activate # установить и сразу включить плагин 4 wp plugin list # список плагинов со статусом и версией 5 wp theme activate twentytwentyfive # сменить активную тему 6 wp db export backup.sql # дамп базы в файл 7 wp search-replace 'old.com' 'new.com' --dry-run # сначала всегда сухой прогон 8 wp user create bob [email protected] --role=editor # создать пользователя 9 wp cache flush # сбросить объектный кеш
wp search-replace розуміє серіалізовані дані, тому безпечно змінює домен під час переїзду сайту, на відміну від прямого SQL-запиту, який ламає серіалізацію. Перед будь-якою небезпечною операцією робіть wp db export.
Класичні та блокові теми у 2026 році
До середини 2026 року (актуальна версія, WordPress 7.0 «Armstrong», рекомендований PHP 8.3+) класичні PHP-теми й надалі повністю підтримуються та залишаються наймасовішим типом. Але весь новий ядровий тулінг розвиває блокові теми та повне редагування сайту (Full Site Editing): theme.json замість частини налаштувань functions.php, HTML-шаблони замість PHP. Цикл, bloginfo(), умовні теги та хуки актуальні й у гібридних темах, і в будь-яких PHP-фрагментах усередині FSE-теми, тож ця шпаргалка не втрачає цінності. Практичний шлях у 2026-му, класична основа плюс точкова підтримка блоків там, де вона справді потрібна.
⁉️🤔 Часті запитання
Чи обов’язково створювати всі 13 файлів для теми?
Ні, мінімальна робоча тема — це
index.php+style.css. Але для повноцінного сайту краще тримати повний набір: кожен файл дає WordPress можливість обрати оптимальний шаблон. Наприклад, безsingle.phpзапис відрендериться черезindex.phpі втратить блок коментарів.
Чим get_bloginfo() відрізняється від bloginfo()?
bloginfo() одразу виводить значення на екран (echo). get_bloginfo() повертає рядок у змінну, її можна обробити, доповнити або використати всередині іншого виразу до фактичного виведення.
Де розміщувати Цикл, якщо на сторінці кілька типів контенту?
Цикл можна запускати багаторазово. Типовий сценарій: один Цикл для основного списку записів, другий, для віджета «останні новини» в сайдбарі. Перед другим Циклом скидайте вказівник через wp_reset_postdata(), інакше наступний код на сторінці отримає некоректний контекст запису.
Чи працює ця шпаргалка для блокових тем (FSE)?
Частково. Блокові теми (Full Site Editing) використовують
theme.jsonзамістьfunctions.phpдля багатьох налаштувань і шаблони в HTML, а не PHP. Але Цикл,bloginfo()і підключні теги залишаються актуальними для гібридних тем і будь-яких PHP-шаблонів усередині FSE-теми.
Що робити, якщо functions.php стає занадто великим?
Розбийте логіку на окремі файли та підключайте їх із
functions.phpчерезrequire_onceабоinclude. Наприклад:require_once get_template_directory() . '/inc/custom-post-types.php';. Це покращує читабельність і спрощує супровід, правило гарного тону для будь-якої теми з більш ніж 20-30 хуками.
Чим дія (action) відрізняється від фільтра (filter)?
Дія виконує побічний ефект і нічого не повертає (підключити скрипт, надіслати лист). Фільтр отримує значення, змінює його і зобов’язаний повернути, забутий
returnу фільтрі обнулить контент. Реєструються вони однаково:add_action()іadd_filter().
Чому is_single() не працює у functions.php?
Запитні умовні теги доступні лише після формування основного запиту, тобто у файлах шаблону або починаючи з хука
template_redirect. На початкуfunctions.phpзапит іще не готовий, тому WordPress видасть_doing_it_wrong(). Без прив’язки до запиту працюють лишеis_admin()таis_user_logged_in().
Що тримати під рукою під час розробки на WordPress
Ця шпаргалка, каркас, з якого починається розробка на WordPress. Файли теми та ієрархія шаблонів, Цикл, підключні теги й bloginfo() збирають тему, а хуки та фільтри, умовні теги, підключення скриптів, шорткоди, WP_Query, екранування, REST API і WP-CLI закривають переважну більшість рутинних завдань. Решта, практика й документація.
Для поглибленого вивчення посібник із розробки тем на developer.wordpress.org, перша адреса. Там само лежить довідник із тегів шаблону із сотнями функцій на всі випадки життя. Якщо ви проходите шлях від HTML-верстки до готової теми, почніть із покрокового посібника зі створення теми WordPress з HTML, де Цикл і теги розібрані в бойовому контексті, від верстки до робочої теми.
Беріть цю шпаргалку в закладки й тримайте під рукою під час розробки.
Який тег або хук ви шукаєте найчастіше? Напишіть у коментарях, із яким завданням на WordPress ви зіткнулися, і поділіться своїм кейсом, живий обмін досвідом вартий десятка офіційних посібників.
Професійна команда авторів та редакторів, що спеціалізуються на створенні якісного контенту.