PHP, WordPress CMS

🧩 Основи тем WordPress: створюємо свою першу тему

Posted onAuthortadmin

🧩 Основи тем 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!

Залишити відповідь