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

Перш ніж почати писати код, вам знадобиться відповідне середовище розробки. Локальне середовище розробки дозволяє вам проводити тестування та налагодження без впливу на онлайн-сайт. Рекомендується використовувати такі інтегровані пакети, як XAMPP, MAMP або Local by Flywheel, які дозволяють одним кліком встановити Apache, MySQL/MariaDB та PHP.

Переконайтеся, що ваша версія PHP дорівнює 7.4 або вище – це мінімальна версія, рекомендована офіційними розробниками WordPress. Крім того, вам знадобиться програмний інструмент для редагування коду, такий як Visual Studio Code, Sublime Text або PHPStorm. Ці інструменти забезпечують підсвічування синтаксису та підказки під час написання коду, що значно підвищує ефективність розробки.

Створення базової структури теми для WordPress

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

У цьому папці має бути щонайменше два основні файли:style.css 和 index.php。style.css Це не просто таблиці стилів; їхнє ще важливіше призначення – надавати метаінформацію про тему, яка відображається на сторінці “Вигляд” -> “Теми” в панелі керування WordPress.

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

在 style.css У верхній частині файлу вам потрібно додати певний блок коментарів для визначення інформації про тему. Ось приклад:

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

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

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

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
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 починає пошук з найбільш конкретного файлу шаблону; якщо його не знаходить, система переходить до більш узагальненого файлу шаблону, а якщо його також немає – до найбазовішого файлу шаблону. index.php。

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

Поширені шаблонні файли та їхнє призначення

• header.phpВерхня частина веб-сайту зазвичай містить інформацію про регіон, логотип сайту та головний навігаційний меню.
• footer.phpУ нижній частині веб-сайту зазвичай розміщується інформація про авторські права, додаткові посилання тощо.
• sidebar.phpБічна панель.
• index.phpГоловний шаблон є остаточним резервним варіантом для всіх сторінок.
• single.phpВикористовується для відображення окремої статті блогу.
• page.phpВикористовується для відображення окремих сторінок (наприклад, “Про нас”, “Контакти”).
• archive.phpВикористовується для відображення списку архівів статей (за категоріями, тегами, авторами, датами публікації тощо).
• front-page.phpВикористовується для визначення головної сторінки веб-сайту (якщо встановлена статична сторінка як головна).
• home.phpВикористовується для відображення сторінки індексу блогових статей (якщо встановлена статична головна сторінка, ця шаблонка показує список останніх публікацій).
• 404.phpВикористовується для відображення сторінки з помилкою “404 Не знайдено”.
• search.phpВикористовується для відображення результатів пошуку.
• functions.phpЦе не шаблонний файл, а функціональний файл теми, який використовується для додавання нових функцій, реєстрації меню, бічних панелей тощо.

Шаблонні теги та цикли

У файлі шаблонів ви часто використовуєте так звані “теги шаблонів”. Це PHP-функції, які надає WordPress для виведення динамічного контенту. bloginfo('name') Виведіть заголовок веб-сайту.the_title() Виведіть заголовок статті.

Найважливішою концепцією є “цикл WordPress”. Це структура PHP-коду, яка використовується для перевірки того, чи є на поточній сторінці статті (або списки статей), які потрібно відобразити, та для їх циклічного виведення. Один з найбазовіших циклів виглядає наступним чином:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><p><strong>  <p><strong></h2>
    <div class="entry-content">
        <p><strong>  <p><strong>
    </div>
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Інтеграція функціоналу тем та їхнього стилю

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

Функція реєстрації тем

在 functions.php У WordPress ви можете розширювати функціонал за допомогою різних “хуків” (hooks), таких як дії-хуки (action hooks) та фільтри-хуки (filter hooks). Спочатку зазвичай потрібно оголосити про підтримку темою певних функцій. Наприклад, для додавання зображень-прев’ю до статей чи підтримки меню:

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

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

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Приєднано до WordPress. after_setup_theme На цьому „дійовому гачку“ необхідно переконатися, що він виконується у правильний момент.

Введення стилів та скриптів

Сучасні теми мають правильно включати файли зі стилізацією (CSS) та JavaScript. wp_enqueue_style() 和 wp_enqueue_script() Функції слід додавати до черги (queue), а не напряму включати їх у файли шаблонів за допомогою тегів `` чи ``. Переваги такого підходу полягають у кращому керуванні залежностями між компонентами, уникненні їх багаторазового завантаження та дотриманні рекомендацій WordPress щодо ств

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Функція `getstylesheet_uri()` вказує на шлях до вашого стилішого файлу (stylesheet). style.css Функція `get_template_directory_uri()` повертає URL поточного каталогу теми.

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

Створення макетів сторінок та компонентів-шаблонів

Стандартна веб-сторінка зазвичай складається з заголовкової частини (header), основного вмісту (body) та футера (footer). WordPress радить розділяти частини сторінки, які можна використовувати багаторазово, на окремі файли, а потім інтегрувати їх у основну шаблону за допомогою спеціальних функцій.

Розділення компонентів шаблону

Створити header.php、footer.php 和 sidebar.php…в… header.php У цьому випадку вам потрібно включити повний розділ і завершити його чітким заголовком (наприклад, тегом

). footer.php У тексті зазвичай використовуються теги `` та `>` для обмеження областей, які містять певну інформацію.

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

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

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

Зібрати повну сторінку

У шаблоні сторінки (наприклад…) index.php、single.phpУ цьому контексті ви можете використовувати наступні функції для імпорту цих компонентів:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Файл; якщо його немає, його завантажиться. template-parts/content.phpЦе значно підвищило повторну використовуваність та зручність обслуговування коду.

підсумок

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

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

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

Чи обов’язково для розробки тем для WordPress потрібно володіти мовою програмування PHP?

Так, PHP є основною мовою програмування для WordPress. Файли шаблонів тем (наприклад…) index.php、page.phpФайли конфігурації (configuration files) та функціональні файли (functionality files)functions.phpУсі ці файли є PHP-файлами. Щоб динамічно виводити та обробляти дані у WordPress, вам потрібно оволодіти основною граматикою PHP, умінням використовувати умовні оператори, цикли та функції.

Під час розробки тем що різниця між файлами `page.php` та `front-page.php`?

page.php Використовується для рендерингу окремих “сторінок” (Pages), створених у WordPress, таких як “Про нас”, “Контакти” тощо. front-page.php Це шаблон, призначений спеціально для відображення головної сторінки веб-сайту. У панелі налаштувань WordPress (“Параметри” -> “Читання”), якщо ви виберете опцію “Статична сторінка” та встановите потрібну сторінку як головну, WordPress буде використовувати саме цей шаблон для її відображення. front-page.php Щоб відобразити цю сторінку, потрібно виконати певні дії. Якщо ви не знаєте, як це зробити, будь ласка, надайте додаткові вказівки чи пояснення. front-page.php Якщо такого елемента не існує, буде використано альтернативний варіант. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

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

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

Щоб тема підтримувала багатомовність, потрібно виконати два основні кроки. По-перше, у всіх текстових рядках теми слід використовувати функції перекладу WordPress, такі як… ()、_e() 或 esc_html()І вкажіть, де вони мають знаходитися. style.css Визначене в Китаї. Text DomainНаприклад:_e( 'Hello World', 'my-first-theme' )По-друге, використовуйте інструменти на кшталт Poedit для сканування коду вашого тематичного файлу та генерації необхідних змін. .pot Це шаблонний файл, за допомогою якого перекладачі можуть створювати тексти різних мов. .po І після компіляції .mo Файли. Розмістіть мовні файли у папці теми (theme folder). /languages/ У каталозі WordPress автоматично завантажує відповідні переклади відповідно до мовних налаштувань веб-сайту.