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

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

Перш ніж почати писати код, дуже важливо мати стабільне та ефективне локальне середовище розробки. Це дозволяє працювати офлайн та уникати ризиків, пов’язаних з прямими операціями на онлайн-серверах. Спочатку вам потрібно встановити локальне серверне середовище, таке як XAMPP, MAMP або більш професійний інструмент Local by Flywheel. Ці інструменти налаштовують для вас Apache, MySQL та PHP – основи для роботи WordPress.

Далі вам потрібно завантажити найновіші файли ядра WordPress та встановити їх на локальний сервер. Після завершення базової інсталяції ви зможете розпочати створення вашого каталогу тем. Усі теми WordPress знаходяться… /wp-content/themes/ У каталозі. Будь ласка, створіть тут нову папку, наприклад… my-first-themeНазва цього папки є вашим ідентифікатором теми.

Ефективний тематичний дизайн для WordPress має містити щонайменше два основні файли:style.css 和 index.php。style.css Файл є не лише таблицею стилів, а й своєрідним “паспортом” теми; коментарі у вступній частині файлу містять всю метаінформацію про цю тему.

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

Інформація про заголовок файлу таблиці стилів теми

style.css На початку файлу має бути присутній певний CSS-коментар, який буде використовуватися для опису вашого тематичного дизайну для WordPress. Ця інформація відображатиметься на сторінці керування “Вигляд” -> “Теми” у системному меню WordPress.

UltaHost – хостинг для сайтів, побудованих на платформі WordPress

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

сторінка доступу

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习 WordPress 主题开发的简单定制主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Зокрема,Text Domain Цей елемент призначений для інтернаціоналізації та має відповідати назві вашої тематичної папки. index.php Це файл за замовчуванням для теми, який використовується як резервний шаблон для всіх сторінок. Спочатку він міг бути просто простою HTML-структурою, призначеною для перевірки того, чи правильно WordPress розпізнає цю тему.

Розуміння структури шаблонів та створення основних шаблонів

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

Наприклад, коли відвідується блогова стаття з ідентифікатором 5, WordPress по черзі шукає потрібні дані:single-post-5.php -> single-post.php -> single.php -> singular.php -> І нарешті – це останнє. index.phpЯкщо знайдеться відповідний файл, він буде використаний; в іншому випадку пошук буде продовжений далі.

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

single.php Це стандартна шаблонна файлова структура, призначена для відображення окремої статті блогу. У цій файлі ви будете використовувати низку вбудованих тегів та функцій WordPress для форматування та відображення змісту статті.

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

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
            <header class="entry-header">
                <h1 class="entry-title"><p><strong>  <p><strong></h1>
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                <p><strong>  <p><strong>
            </div>
            <footer class="entry-footer">
                &lt;?php the_tags(&#039;标签：&#039;, &#039;, &#039;, &#039;<br>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出上一篇、下一篇文章导航
        the_post_navigation();
    endwhile;
    ?>
</main>

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

Ця шаблонка використовує певні функції чи елементи, які були передбачені її структурою. the_post() Давайте налаштуємо параметри на глобальному рівні. $post Змінні, а потім через… the_title()、the_content() Функції виводять дані статті. Крім того, були впроваджені шаблонні компоненти.get_header(), get_sidebar(), get_footer()。

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

page.php Шаблони використовуються для відображення статичних сторінок. Їхня структура… single.php Подібні, але зазвичай не містять класифікації, тегів та інших типових метаданих статей. Ви можете створити ще більше спеціалізованих шаблонів сторінок за потреби – наприклад, шаблон для сторінки “Про нас”. page-about.php Файл, який ви надасте, WordPress автоматично застосує його до сторінок із заголовком або псевдонімом (slug), що дорівнює “about”.

Інтеграція шаблонних компонентів та навігаційного меню

Щоб зберегти модульність та повторну використовуваність коду, теми WordPress зазвичай розділяють такі елементи, як верхня частина сторінки, нижня частина сторінки, бічні панелі тощо, на окремі файли-“шаблонні компоненти”. Це робиться для зручності редагування та get_template_part() Функції дозволяють легко включати ці компоненти у різні шаблони.

hosting.com Віртуальний хостинг

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

сторінка доступу

Створення заголовкового файлу для теми

header.php Файл містить заголовкову частину HTML-документа. Візуальні елементи, які знаходяться у відповідних регіонах сайту, а також у верхній частині сайту – наприклад, логотип та головний навігаційний меню.

<!DOCTYPE html>
<html no numeric noise key 1010>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>  <p><strong>
</head>
<body no numeric noise key 1007>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <h1 class="site-title"><a href="/uk/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
            <?php
        }
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-primary',
                'menu_id'        =&gt; 'primary-menu',
                'container'      =&gt; false,
            )
        );
        ?&gt;
    </nav>
</header>

Ключові функції wp_head() Дозволяє ядру WordPress, плагінам та іншим скриптам додавати необхідний код у верхню частину сторінки (наприклад, посилання на CSS та JS-файли).wp_nav_menu() Функція призначена для виведення зареєстрованого навігаційного меню.

Розташування елементів навігаційного меню під час реєстрації

Навігаційний меню потрібно спочатку “зареєструвати” у відповідному розділі теми, після чого користувачі зможуть налаштувати його у розділі “Вигляд” -> “Меню” в бекенді. Це зазвичай робиться у налаштуваннях самої тем functions.php Завдання було виконано у файлі.

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

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus(
        array(
            'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
            'menu-footer'  => esc_html__( '页脚导航', 'my-first-theme' ),
        )
    );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Функція зареєструвала два місця для розміщення страв. Гаразд. add_theme_support() Ми увімкнули такі функції, як можливість використання власного логотипу та заголовкових тегів – це стандартна практика у розробці сучасних тем для WordPress.

Розширення можливостей та стилів тем (Themes)

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

Міжсерверний віртуальний хостинг

Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.

сторінка доступу

Безпечно впроваджуйте стилі та скрипти.

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

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-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Цей підхід забезпечує правильні залежності між компонентами та запобігає їхньому багаторазовому завантаженню. Функція… get_stylesheet_uri() Повернутися до головної сторінки style.css URL, а не… get_template_directory_uri() URL до каталогу тем.

Створення зони для підказок бічної панелі

Розділ з додатковими інструментами (Sidebar) дозволяє користувачам самостійно налаштовувати вміст за допомогою перетягування елементів зі заднього плану. Реєстрація нового розділу з додатковими інструментами також відбувається там же. functions.php Виконано у середині.

function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
            'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
            'after_widget'  =&gt; '</section>',
            'before_title'  =&gt; '<h2 class="widget-title">',
            'after_title'   =&gt; '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Після реєстрації ви зможете sidebar.php Використовується у компонентах шаблонів. dynamic_sidebar( 'sidebar-1' ) Функція використовується для виведення інформації з цієї області.

підсумок

Цей посібник систематично описує основні етапи розробки тем для WordPress. Від налаштування локального середовища розробки та створення базових файлів теми, до розуміння та використання потужної системи шаблонів WordPress, а також інтеграції компонентів шаблонів, налаштування навігаційних меню та розділів для додаткових функцій, і нарешті – публікації готової теми на сайті. functions.php Ви безпечно розширили функціонал вашого тематичного дизайну. Дотримуючись цих кроків, ви успішно створили власний тематичний дизайн із чіткою структурою, повним набором функцій та відповідністю стандартам кодування WordPress. Це створило міцну основу для подальшого розроблення більш складних та функціонально збагачених тем. Пам’ятайте, що розробка тематичних дизайнів – це процес постійного навчання; постійна практика та вивчення офіційної документації є ключовими факторами для покращення ваших навичок.

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

Що таке ієрархія шаблонів WordPress?
Рівні шаблонів у WordPress – це набір правил, які визначають, який файл шаблону використовувати для різних типів сторінок. Це послідовність пошуку, що йде від конкретних до більш узагальнених варіантів. Наприклад, для певної статті WordPress спочатку шукає шаблон, який відповідає ID цієї статті або її типу. Якщо такого шаблону немає, система поступово переходить до більш узагальнених варіантів шаблонів, поки не знайде підходящий варіант. index.phpРозуміння взаємозв’язків між елементами є надзвичайно важливим для створення структурованих та логічно організованих тем.

Чому обов’язково використовувати функцію `wp_enqueue_style` для завантаження стилів?

Використовуйте wp_enqueue_style() 和 wp_enqueue_script() Це стандартизований спосіб завантаження ресурсів, рекомендований офіційним сайтом WordPress. Він правильно обробляє залежності між ресурсами (наприклад, забезпечує завантаження jQuery перед виконанням власних скриптів), запобігає їхньому багаторазовому завантаженню та добре сумісний з плагінами кешування, підтемами та іншими компонентами екосистеми WordPress. Можна використовувати цей спосіб безпосередньо у файлах шаблонів. 或 Використання тегів є неприйнятною практикою.

У чому різниця між файлом functions.php та плагіном?

functions.php Файли є частиною теми; їх функції активуються під час активації цієї теми та вимикаються під час її зміни. Вони використовуються переважно для додавання елементів, які тісно пов’язані з візуальним виглядом та функціоналом теми. Функції, які надаються плагінами, зазвичай є незалежними від теми – їх можна продовжувати використовувати навіть після зміни теми. Як правило, якщо певна функція сильно залежить від стилю чи макету теми, її к functions.phpЯкщо це універсальна функція, то краще реалізувати її у вигляді плагіна.

Як зробити так, щоб мій сайт підтримував кілька мов (інтернаціоналізацію)?

Щоб тема підтримувала багатомовність, тобто була інтернаціоналізована (i18n), необхідно виконати кілька основних кроків: по-перше, style.css Заголовок та все інше… load_theme_textdomain() Під час виклику все було правильно налаштовано. Text DomainДалі, functions.php Виклик у середині… load_theme_textdomain() Функція для вказівки каталогу мовних файлів. Нарешті, і найважливіше – у всіх PHP-шаблонах теми… functions.php У всіх рядках, призначених для користувачів, слід використовувати функції перекладу WordPress для їх обробки. Наприклад: esc_html__( ‘文本’, ‘my-first-theme’ ) 或 _e( ‘文本’, ‘my-first-theme’ )Після завершення роботи можна використовувати такі інструменти, як Poedit, для генерації потрібного результату. .pot Шаблонний файл, призначений для того, щоб перекладачі могли створювати тексти різних мов. .po 和 .mo Документи.