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

Підготовка середовища та основні поняття

Перш ніж почати писати код, вам знадобиться підходяще середовище для локального розробки. Рекомендується використовувати інтегровані пакети програмного забезпечення для локальних серверів, такі як Local by Flywheel, XAMPP або MAMP. У вашому локальному сайті файли ядра WordPress мають бути встановлені.

Будь-який тематичний дизайн для WordPress має містити два найосновніші файли:style.css 和 index.php。style.css Це не просто таблиця стилів, а й своєрідний “паспорт” теми, який передає інформацію про тему WordPress за допомогою спеціального заголовка файлу (Theme Header). Крім того,index.php Це файл за замовчуванням для теми; він відповідає за обробку всіх запитів до сторінок, для яких не вказано спеціальний шаблон.

Типова тема у структурі каталогу дотримується чітких ієрархічних принципів. Основний шаблон файл зазвичай знаходиться безпосередньо у кореневому каталозі теми, а ресурси типу CSS, JavaScript та зображення розміщуються в відповідних підкаталогах. /css、/js 和 /images У таких підкаталогах. Для більш складних тем ви також можете знайти додаткові матеріали. /template-parts Каталог призначений для зберігання повторно використовуваних фрагментів шаблонів./inc Каталог призначений для зберігання файлів, які покращують функціональність програми.

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

Зрозуміти ієрархію шаблонів у WordPress.

WordPress використовує інтелектуальну систему під назвою “Ієрархія шаблонів” (Template Hierarchy), яка визначає, який файл шаблону слід використовувати на певній сторінці. Ця система є основною логікою розробки тем (templates).

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

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

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

Наприклад, коли користувач відвідує головну сторінку блогу, WordPress спочатку перевіряє, чи існує файл під назвою… front-page.php Файл… Якщо його немає, програма продовжить пошук. home.phpЯкщо цього все одно не станеться, система у кінцевому підсумку повернеться до використання параметрів за замовчуванням. index.phpДля окремої статті порядок пошуку в WordPress наступний:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

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

Заява про інформацію теми

style.css На початку файлу має бути рядок з коментарями у форматі CSS, який містить заголовкову інформацію для визначення метаданих теми. Ось приклад мінімізованого варіанту:

/*
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” використовується для інтернаціоналізації та є ідентифікатором, який обов’язково потрібно вказати під час наступних викликів функцій перекладу. Цей заголовок файлу є єдиним критерієм, за яким WordPress розпізнає та активує ваш тематичний дизайн.

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

Створення основного шаблонного файлу

Давайте почнемо з найважливішого файлу шаблонів. Спочатку… index.php Створіть базову структуру у відповідному коді. Стандартний файл шаблону має містити виклики до розділів, що відповідають за заголовок сторінки, основний вміст, бічну панель та футер.

Базові шаблонні файли зазвичай містять наступні виклики основних функцій WordPress:get_header()、get_footer()、get_sidebar() І я теж. get_template_part()Ці функції завантажують відповідні шаблонні файли, що дозволяє модульній структуризації сторінок.

Створити шаблон заголовкової частини (header template)

header.php Файл містить вміст, який відображається у верхній частині кожної сторінки. Він обов’язково має містити принаймні оголошення типу документа відповідно до стандарту HTML5. <!DOCTYPE html>、<head> Розділи та основний контент сторінки починаються з відповідних маркерів. <body> 及 <header> Теги.

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

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

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

在 <head> У цьому регіоні надзвичайно важливо використовувати… wp_head() Хук. Цей хук дозволяє ядру WordPress, плагінам та вашому власному тематику вставляти необхідний код у верхню частину сторінки (header), наприклад, посилання на стилішні таблиці, мета-теги та скрипти. Ось приклад простої шаблонної таблиці для верхньої частини сторінки:

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/uk/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

body_class() Функція виводить низку CSS-класів, які залежать від типу поточної сторінки, що значно полегшує керування стилемами.

Створення основного циклу та відображення контенту

WordPress використовує так званий “основний цикл” (The Loop) для перебору та відображення списку статей, які були знайдені в результаті запиту. Цей цикл є найважливішою частиною шаблонних файлів та зазвичай знаходиться у файлі `index.php`. index.php、single.php 或 archive.php Так.

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

Типова структура головного циклу виглядає наступним чином:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/uk/</?php the_permalink(); ?>"><p><strong>  <p><strong></a></h2>
            <div class="entry-content">
                <p><strong>  <p><strong>
            </div>
        </article>
    <p></p>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

Усередині циклу ви можете використовувати низку шаблонних тегів, які починаються з “the_”. the_title()、the_content()、the_excerpt() 和 the_post_thumbnail()Оскільки ви не надали конкретного тексту для перекладу, я не можу виконати ваше запитання. Будь ласка, надайте текст, який потрібно перекласти, і я з радістю допоможу.

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

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

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

Додавання стилів та функцій

Візуальне представлення теми контролюється за допомогою CSS. Крім того… style.css Крім написання стилів у коді, існує більш професійний спосіб – через functions.php Файли використовуються для формування черги завантаження таблиць стилів та скриптів, щоб забезпечити правильні залежності між ними та правильний порядок їхнього завантаження.

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

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

Вам слід використовувати… wp_enqueue_style() 和 wp_enqueue_script() Функції для додавання ресурсів. Ці функції слід під’єднати (монтувати) до відповідних системних компонентів чи модулів. wp_enqueue_scripts Цей механізм реалізований за допомогою спеціальних „хрестиків“ (hooks). Перевага такого підходу полягає у тому, що WordPress може централізовано керувати ресурсами, що запобігає їхньому багаторазовому завантаженню та конфліктам залеж

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Меню реєстрації та бічна панель

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

Використовуйте register_nav_menus() Функція для реєстрації місць розташування страв:

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

Потім, header.php У цьому випадку ви можете використовувати… wp_nav_menu() Функція для відображення головного меню.

Використовуйте register_sidebar() Функція для реєстрації зони додаткових інструментів (пристроїв/функцій):

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', '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() Функція для виклику цієї області.

Тестування та публікація тем

Після завершення розробки необхідно провести всебічні тести. Це включає перевірку вигляду теми у різних браузерах (Chrome, Firefox, Safari, Edge) та на пристроях різних розмірів (настільні комп’ютери, планшети, смартфони). Переконайтеся, що всі посилання працюють коректно, форми функціонують належним чином, а меню правильно відображаються на маленьких екранах.

Увімкніть режим налагодження.

Під час розробки дуже рекомендується увімкнути режим налагодження WordPress. Це допоможе вам швидко виявляти помилки, попередження та інші повідомлення, пов’язані з PHP. wp-config.php У файлі знайдіть та змініть наступні рядки:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

Включити WP_DEBUG_LOG Помилкові повідомлення можна записувати до файлів журналів, щоб уникнути прямого розкриття конфіденційної інформації відвідувачам веб-сайту.

Перевірка стандартів теми

Перед публікацією чи впровадженням у використання ваш тематичний дизайн має максимально відповідати Стандартам розробки тем для WordPress. Це включає, але не обмежується наступним: переконатися, що всі дані, які відображаються на сторінці, були належним чином ескаполіровані (т esc_html()、esc_url() Функції типу wait() тощо); усій перекладному тексту слід використовувати стандартні назви та конструкції мови. __() 或 _e() Функції були обгорнуті у відповідні оболонки (класи чи модулі), а в основному коді не міститься жодних жорстко закодованих URL-адрес.

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

Підготовка до публікації

Після завершення розробки, тестування та перевірки теми ви можете вибрати один із варіантів її публікації: розмістити її у офіційному каталозі тем WordPress.org або запакувати для використання особистими користувачами чи клієнтами. Пакет для публікації має містити лише необхідні папки та файли теми, а всі файли, пов’язані з системою контролю версій .gitКрім того, необхідно забезпечити належну налаштування інструментів розробки та створення файлів резервних копій. style.css Тематична інформація у тексті є повною та точною; також підготовлений чіткий зображення (файл). screenshot.pngРозмір 1200×900 пікселів використовується як зображення для представлення теми (тематичний скріншот).

підсумок

Від моменту створення… style.css 和 index.php Починаючи з основної папки, ми розбираємося зі структурою шаблонів, створюємо ключові файли шаблонів, використовуємо основний цикл для відображення контенту, а потім… functions.php Додавання стилів, скриптів та функцій, а також проведення ретельних тестів та перевірок на стандартизацію – ось повний процес створення базової теми для WordPress. Цей процес не лише дає вам готову до використання тему, але й, що ще важливіше, допомагає глибоко зрозуміти архітектуру тем для WordPress. Виходячи з цього початкового рівня, ви зможете досліджувати більш складні функції тем, такі як налаштування типів статей, API для кастомізації тем, підтримка блокового редактора (Gutenberg) тощо, і поступово стати професійним розробником тем для WordPress.

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

Як мінімум, яких файлів потрібно для створення теми для WordPress?

Тема, яку може визнати та активувати WordPress, має мінімум два файли:style.css 和 index.phpСеред них,style.css Обов’язково має бути включено правильну заголовкову анотацію з інформацією про тему.

Чому мої власні стилі не вступили в дію?

Зазвичай це спричинено недостатнім рівнем пріоритету CSS-селекторів або неправильним завантаженням таблиці стилів. Спочатку перевірте інструменти розробника браузера, щоб переконатися, що файл таблиці стилів був успішно завантажений та що ваші CSS-правила не перекриваються іншими правилами з вищим пріоритетом. Крім того, переконайтеся, що ви використовуєте правильні методи для налаштування стилів. functions.php у китайській мові wp_enqueue_style() Використовуйте функції для завантаження стилів, замість того щоб прямо писати їх у HTML. <link> Теги.

Як додати власний шаблон сторінки до теми?

Створіть новий PHP-файл, наприклад: `new_file.php`. page-fullwidth.phpНа самому початку цього файлу додайте наступний PHP-коментар, щоб вказати назву шаблону:<?php /* Template Name: 全宽页面 */ ?>Потім ви зможете написати код у цьому файлі, який відрізнятиметься від шаблону сторінки за замовчуванням. page.php Ми розглянемо макет та код цієї нової шаблонки. Під час створення чи редагування сторінки ви зможете вибрати цю шаблонку у модулі “Властивості сторінки”.

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

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

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

Вам потрібно виконати дві речі: підготувати та завантажити файли з перекладами. По-перше, у всьому коді, де використовуються стрінги для користувачів (наприклад… ('Read More', 'my-first-theme')Усі ці елементи мають використовувати такі засоби (або інструменти, чи технології), як… () 或 _e() Таку функцію перекладу необхідно обгорнути у відповідну оболонку, при цьому другий параметр (область для введення тексту) має бути правильно інтегрований з основною логікою програми. style.css Спочатку переконайтеся, що вказаний “Text Domain” у документах збігається з тим, який використовується на вашому сайті. Потім використовуйте інструменти на кшталт Poedit для створення необхідних файлів. .pot Шаблонний файл, а також відповідний переклад цього терміну. .po 和 .mo Файл. Нарешті, functions.php Використовуйте його у Китаї. load_theme_textdomain() Функція для завантаження файлів з перекладами.