Коли ти починаєш розбиратися зі структурою теми WordPress, логічно виникає питання: з якого файлу стартувати? Багато хто думає, що з index.php або functions.php, але насправді все починається зі style.css. І це не випадково.

Саме файл style.css дозволяє WordPress розпізнати тему. Без нього система просто не “побачить” твій шаблон в адмінпанелі. Тому у процесі Створення тем WordPress цей файл відіграє ключову роль — навіть якщо ти плануєш підключати стилі зовсім іншим способом.

Чому style.css такий важливий

У верхній частині style.css розміщується спеціальний коментар із метаданими теми. Це не звичайний коментар для розробника — це службова інформація, яку зчитує WordPress.

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

Інакше кажучи, style.css — це своєрідний “паспорт” твоєї теми.

Структура заголовка у style.css

Ось приклад заповнення верхньої частини файлу:

/* Theme Name: My Custom Theme
Theme URI: https://example.com
Description: Короткий опис теми
Author: Твоє ім'я
Author URI: https://example.com/about
Template: parent-theme-slug
Version: 1.0
Ліцензія або розширений опис за потреби */

Що означає кожен параметр

  • Theme Name — назва теми, яка відображається в адмінпанелі.
  • Theme URI — посилання на сторінку теми (необов’язково).
  • Description — короткий опис функціональності.
  • Author — твоє ім’я або назва студії.
  • Author URI — посилання на сайт автора.
  • Template — використовується, якщо це дочірня тема.
  • Version — номер версії (бажано вказувати).

Насправді для роботи достатньо лише Theme Name. Але якщо ти займаєшся професійною Веб-розробкою, краще одразу звикати до повного й акуратного оформлення.

Чи обов’язково заповнювати всі поля?

Ні. WordPress не вимагає повного набору параметрів. Мінімум — це назва теми. Проте якщо ти створюєш тему для клієнта або плануєш її поширювати, краще додати опис, версію й дані автора.

Це дисциплінує, допомагає в майбутньому при оновленнях і виглядає професійно.

Де розміщувати файл style.css

Файл повинен лежати в корені папки теми. Якщо він буде в іншій директорії — WordPress його не знайде. Це стандарт, якого потрібно дотримуватися.

У контексті Front-end розробки важливо розуміти: навіть якщо ти організовуєш стилі через SCSS або збираєш їх за допомогою збирача, фінальний style.css у корені теми все одно має існувати.

Скріншот теми — важлива деталь

Щоб твоя тема виглядала акуратно в адмінпанелі, потрібно додати файл screenshot.png.

Вимоги прості:

  • формат — PNG;
  • розмір — 880×660 пікселів;
  • назва — screenshot.png;
  • розташування — у корені папки теми.

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

Типові помилки

  • Файл названо неправильно (наприклад, styles.css замість style.css).
  • Коментар із метаданими розміщений не на початку файлу.
  • Помилка в синтаксисі коментаря (відсутній символ * або /).
  • Файл лежить не в корені теми.

Здавалося б, дрібниці. Але саме через такі помилки новачки часто думають, що тема “не працює”.

Як перевірити результат

Після створення style.css зайди в адмінпанель WordPress у розділ “Зовнішній вигляд → Теми”. Якщо все зроблено правильно, твоя тема з’явиться в списку з назвою та описом.

Додай screenshot.png — і побачиш повноцінну картку теми з прев’ю. Маленький крок, але він дає відчуття завершеності 🎯

Підсумок

Файл style.css — це точка входу у створення теми WordPress. Він не лише відповідає за стилі, а й дозволяє системі ідентифікувати шаблон. Додай правильний заголовок, розмісти файл у корені та не забудь про screenshot.png. Після цього твоя тема офіційно “існує” у WordPress.

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