Основи тем WordPress: створюємо свою першу тему
WordPress дозволяє повністю змінювати вигляд сайту за допомогою тем. Саме тема визначає, як виглядають сторінки, пости, меню та інші елементи. Якщо ти хочеш створити унікальний дизайн — варто заглянути під капот теми.
⸻
Що таке тема WordPress і як вона працює?
Тема WordPress — це набір файлів (PHP, CSS, JS), які відповідають за вигляд сайту, але не впливають на його контент (пости, сторінки, коментарі). Тема “вдягає” контент, що зберігається в базі даних, у той дизайн, який бачить користувач.
У WordPress існує два типи тем:
• Батьківська (Parent Theme) — повноцінна тема з усіма необхідними файлами.
• Дочірня (Child Theme) — успадковує все від батьківської теми, дозволяючи змінювати лише окремі частини (рекомендується для кастомізації готових тем).
⸻
Основна структура теми
Мінімальний набір файлів для простої теми:
• style.css — основний файл стилів, який також містить мета-інформацію про тему.
• index.php — головний шаблон, з якого все починається.
• functions.php — файл для підключення скриптів, стилів, створення функцій, реєстрації меню, віджетів тощо.
style.css (навіть якщо немає стилів — цей файл обов’язковий):
/* Theme Name: My First Theme Author: Taras Shkodenko Version: 1.0 */ body { font-family : sans-serif ; background : #f5f5f5 ; color : #333 ; } |
index.php (найпростіший шаблон):
<!DOCTYPE html> <html> <head> <meta charset= "<?php bloginfo('charset'); ?>" > <title><?php bloginfo( 'name' ); ?></title> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <p><?php bloginfo( 'description' ); ?></p> <?php if (have_posts()) : while (have_posts()) : the_post(); echo '<h2>' . get_the_title() . '</h2>' ; the_content(); endwhile ; else : echo '<p>No content found</p>' ; endif ; ?> <?php wp_footer(); ?> </body> </html> |
functions.php (підключення стилів теми):
<?php function my_theme_enqueue_styles() { wp_enqueue_style( 'my-theme-style' , get_stylesheet_uri()); } add_action( 'wp_enqueue_scripts' , 'my_theme_enqueue_styles' ); |
⸻
Як створити тему з нуля?
1. Створи папку в wp-content/themes/ з унікальною назвою, наприклад: my-first-theme
2. Додай туди файли: style.css, index.php, functions.php
3. Перейди до Appearance > Themes (Зовнішній вигляд > Теми) і активуй свою тему
⸻
Поради новачкам
• Почни з дочірньої теми, якщо хочеш змінювати вже існуючу
• Активно використовуй Template Hierarchy
• Додай screenshot.png в корінь теми — буде приємніше бачити її в адмінці
⸻
Bonus: Підключення Google Fonts
Хочеш використати нестандартний шрифт? Додай у functions.php:
function my_theme_load_fonts() { wp_enqueue_style( 'google-fonts' , 'https://fonts.googleapis.com/css2?family=Roboto&display=swap' , false); } add_action( 'wp_enqueue_scripts' , 'my_theme_load_fonts' ); |
А потім в style.css:
body { font-family : 'Roboto' , sans-serif ; } |
⸻
Завантажити файли теми у форматі zip.
У наступному пості ми поговоримо про кастомізацію шаблонів (single.php, page.php, archive.php) і створення кастомних шаблонів під окремі сторінки.
Пиши в коментарях, якщо хочеш приклад більш складної структури теми або пояснення кастомного header/footer!