Головна сторінка/Знання/WordPress/Детальна інформація про зміст.

Посібник з розробки тем WordPress для початківців: створення першої теми з нуля

Читання за 4 хвилини.
2026-03-16
2026-06-04
2,783
Я заробляю комісію, коли ви робите покупки за посиланнями нижче, без додаткових витрат для вас.

Підготовчі роботи та налаштування середовища

Перш ніж почати писати код, вам знадобиться відповідне середовище для розробки. До нього належать локальний сервер (наприклад, XAMPP, MAMP або Local by Flywheel), текстовий редактор (наприклад, VS Code чи PhpStorm), а також абсолютно нова версія WordPress. Обов’язково переконайтеся, що ваш WordPress є останньою версією, щоб мати доступ до найновіших функцій та API.

Наступним кроком є налаштування WordPress.wp-content/themesСтворіть у каталозі нову папку, назва якої має відповідати “слагу” (slug) вашої теми. Наприклад:my-first-themeЦя папка стане місцем зберігання всіх ваших файлів теми. Найбазовішими файлами WordPress-теми є лише два:index.php和style.cssСеред них,style.cssЦе не просто таблиця стилів, а й “головний файл”, який містить метадані теми. Інформація у коментарях цього файлу має вирішальне значення для того, щоб WordPress правильно ідентифікував вашу тему.

Створіть базовий…style.cssУ файлі головні коментарі мають містити наступну інформацію:

Рекомендуємо до прочитання. Створення ідеального теми для WordPress: Повний посібник з розробки від нуля до майстерності。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text DomainЦей елемент призначений для інтернаціоналізації та має відповідати назві вашої тематичної папки. Крім того, необхідно створити найпростішу версію цього елемента (найменш складну у своєму виконанні).index.phpФайл має містити лише одне речення.<?php get_header(); ?>І з одним<h1>Привіт, світ!</h1>На цьому етапі у вікні “Зовнішній вигляд” -> “Теми” в бекенді WordPress ви повинні побачити свою тему та зможете її активувати. Хоча наразі вона нічого не відображає (оскільки ми ще не створили відповідний контент для неї).header.phpЦе означає, що ви вже успішно зробили перший крок.

UltaHost – хостинг для сайтів, побудованих на платформі WordPress
Гарантія повернення грошей протягом 30 днів, необмежена пропускна здатність мережі та доступ до баз даних, безкоштовний захист від DDoS-атак; знижка 50% при покупці на термін 3 роки (варіанти об’ємів трафіку: 4 ТБ/5
Лоґотип UltaHost. сторінка доступу

Розуміння основних файлів шаблонів та ієрархії шаблонів

WordPress використовує інтелектуальну систему, яка називається “ієрархією шаблонів”, щоб визначити, який файл шаблону слід використати для відображення вмісту за певним запитом до сторінки. Розуміння цієї ієрархії є ключовим для розробки тем. Система починає пошук з найбільш конкретного файлу шаблону; якщо його немає, вона переходить до більш універсального файлу.

Найбазовіші шаблонні файли включають:
* index.phpОстаточний шаблон для використання у випадках, коли не можна знайти більш специфічний шаблон для обробки запитів. Усі запити будуть оброблятися за допомогою цього шаблону.
* header.phpЯкий містить документ<head>Частина веб-сайту та область заголовка сторінки.get_header()Інтродукція функцій.
* footer.phpМістить область футера веб-сайту.get_footer()Інтродукція функцій.
* sidebar.phpМістить компонент бічної панелі.get_sidebar()Інтродукція функцій.
* functions.phpЦе не шаблонний файл, а “бібліотека функцій” вашого тематичного розширення, яка призначена для додавання нових функцій, реєстрації меню, підказок та інших елементів інтерфейсу.

Для різних типів сторінок існують більш детальні шаблони:
Окрема стаття: порядок пошуку —single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
Статичні сторінки: порядок пошуку такий:custom-template.php(Користувацький шаблон) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
Список статей (головна сторінка блогу, сторінка категорій тощо): порядок пошуку такий:home.php(Використовується на сторінці списку блогових статей) -> front-page.php(Використовується для встановлення статичної сторінки як головної) -> index.php。

Створення шаблонів для верхньої та нижньої частин сторінки

Спочатку створіть…header.phpВоно має починатися з…<!DOCTYPE html>Почніть з виконання основних операцій, включаючи виклики ключових функцій WordPress.wp_head()。

Рекомендуємо до прочитання. Зробіть власну розкішну тему WordPress: повний курс від дизайну до розробки та оптимізації.。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <p><strong>  <p><strong>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/uk/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

Так само, створіть…footer.phpІ переконайтеся, що виклик відбувається правильно.wp_footer()Функція.

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <p><strong>Цей текст повинен бути перекладений на українську мову.</strong></p>
</body>
</html>

Тепер ви можете оновити своє…index.phpВикористовуйте ці шаблонні елементи.

<?php get_header(); ?>

<main>
    <h1>Привіт, світ! Це головний модуль програми.</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

<p><strong>Якщо ви хочете перекласти цей текст на українську мову, будь ласка, зробіть це нижче.</strong></p>

Розширення функціоналу теми за допомогою файлу functions.php

functions.phpФайли є “мозком” вашої теми для WordPress. Саме тут ви додаєте нові функції, реєструєте компоненти ядра WordPress (наприклад, меню та блоки для додаткових інструментів), а також включаєте файли зі стилами та скриптами.

hosting.com Віртуальний хостинг
Висока продуктивність завдяки процесорам AMD EPYC, SSD-накопичувачам NVMe і технології LiteSpeed, цілодобова експертна підтримка, розширені заходи безпеки, включаючи SSL, грубу силу, захист від шкідливих програм і DDoS, економія до 73%.
ЛОГОТИП hosting.com сторінка доступу

Додати підтримку тем та навігаційний меню для реєстрації

Спочатку давайте увімкнемо деякі базові функції теми. Використовуйте…add_theme_support()Функція використовується для оголошення можливостей, які підтримується певною темою.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Далі необхідно зареєструвати позицію для навігаційного меню. Це дозволяє користувачам налаштовувати меню у розділі “Вигляд” -> “Меню” в бекенді та використовувати це налаштування у шаблонах.wp_nav_menu()Функція викликає її.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Включити до таблиці стилів та скриптів

Правильний спосіб завантаження стилів та скриптів – це через…wp_enqueue_style()和wp_enqueue_script()Функції, які прив'язуються до них.wp_enqueue_scriptsНа гаку.

Рекомендуємо до прочитання. Повний аналіз розробки тем для WordPress: практичний посібник від початківців до досвідчених фахівців。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Створення циклів та шаблонів вмісту

“Цикл” – це структура PHP-коду в WordPress, яка використовується для отримання та відображення статей з бази даних. Вона є основою майже всіх шаблонних файлів.

Зрозуміти структуру головного циклу

Вищезгадане…index.phpУ прикладі ми вже побачили базовий цикл. Розглянемо його детальніше:

Міжсерверний віртуальний хостинг
Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.
ЛОГОТИП InterServer сторінка доступу 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/uk/</?php the_permalink(); ?>"><p><strong>  <p><strong></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>

Створення шаблону для однієї статті

Тепер давайте створимо шаблон, призначений спеціально для відображення окремої статті.single.phpВоно детальніше, ніж цикл на сторінці зі списком.

<?php get_header(); ?>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1><p><strong>  <p><strong></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

<p><strong>Якщо ви хочете перекласти цей текст на українську мову, будь ласка, зробіть це нижче.</strong></p>

підсумок

За допомогою цього посібника ви завершили основний етап створення базової теми для WordPress з нуля. Ми почали з налаштування середовища розробки та створення базових файлів, а потім поступово детальніше ознайомилися з системою шаблонів WordPress – це камінь сполучення при створенні гнучких тем. Ви навчилися, як створювати компоненти, які можна повторно використовувати у різних частинах теми.header.php和footer.phpШаблонні компоненти, а також за допомогою потужних інструментів…functions.phpФайл додав підтримку ключових функцій для вашої теми, таких як навігаційний меню та завантаження стилів. На завершення ми дослідили механізм “циклів” у WordPress та створили шаблони для відображення списку статей та окремих статей.

Це лише початок. Далі ви зможете створювати ще більше спеціалізованих шаблонів (наприклад…).page.php, archive.phpРозділ для реєстрації додаткових інструментів має включати можливість додавання власних типів статей та систем класифікації, а також підтримку більш розширених функцій респонсивного дизайну та взаємодії з JavaScript. Пам’ятайте, що ознайомлення з офіційною документацією для розробників та постійна практи

Часті запитання

Що робити, якщо після активації мого тематичного пакета на сайті з’являється порожній екран (білий екран)?

Зазвичай це спричинено фатальною помилкою PHP. Спочатку перевірте свій код, щоб знайти та виправити проблемні місця.functions.phpЧи містить файл граматичні помилки, наприклад, відсутність крапок з комою чи дужок? Відкрийте файл у WordPress…WP_DEBUGРежим допоможе вам побачити конкретну інформацію про помилки.wp-config.phpУ файлі буде…define('WP_DEBUG', false);Змініть це на:define('WP_DEBUG', true);。

Як додати функцію власного логотипа до мого тематичного дизайну (теми)?

У вашомуfunctions.phpДля файлівadd_theme_supportДеякі частини тексту можна доповнити новим рядком.add_theme_support('custom-logo');Ви також можете передати масив параметрів для визначення розміру логотипа та його можливостей щодо зміни висоти. Після цього користувач зможе завантажити логотип у розділі “Вигляд” -> “Налаштування” -> “Ідентичність сайту” та використовувати його у шаблоні.the_custom_logo();Функція викликає її.

Чому меню навігації, яке я зареєстрував, не відображається у бекенді?

Будь ласка, перевірте наступні пункти: По-перше, переконайтеся, що ваш реєстраційний код є дійсним та актуальним.functions.phpВ ньому, і він вже був правильно під’єднаний (монтуваний).initХук або…after_setup_themeНа гачку. По-друге, переконайтеся, що ви правильно визначили всі необхідні параметри.theme_location(Наприклад,'primary'Під час виклику…wp_nav_menu()Це повністю відповідає вимогам. По-третє, після створення меню необхідно на вкладці “Зовнішній вигляд” -> “Меню” -> “Керування розташуванням” в бекенді призначити певне меню для зареєстрованого вами місця.

Як створити зону для маленьких інструментів (бічну панель)?

По-перше,functions.phpВикористовуйте його у Китаї.register_sidebar()Функція дозволяє зареєструвати новий елемент інтерфейсу (наприклад, панель інструментів). Для цього необхідно надати масив параметрів, які визначають ID, назву, опис тощо цього елемента. Потім цей елемент буде відображатися у шаблонному файлі, деsidebar.phpУ цьому документі використовується…dynamic_sidebar()Функція приймає ID-ідентифікатор цього маленького інструменту для його виклику. Нарешті,index.php或single.phpУ таких шаблонах використовується…<?php get_sidebar(); ?>Введіть шаблон бічної панелі.

Наступний крок, що робити далі?

Якщо ви створюєте або оптимізуєте веб-сайт на платформі WordPress, наступним кроком буде продовжити читання про оптимізацію продуктивності, налаштування плагінів і кастомізацію теми.

Для подальшого читання та практичних знань

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

Цитата: Теги: