З нуля: повний керівництво з розробки тем для WordPress та основні технології.

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

Кожен тематичний дизайн для WordPress є окремим продуктом, який знаходиться у відповідному магазині програмного забезпечення чи на веб-сайті, що спеціалізується на продажу тем для WordPress./wp-content/themes/Фолдери у каталозі. Для найбазовішої функціональної теми потрібно лише два файли:style.css和index.phpСеред них,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
License: GPL v2 or later
Text Domain: my-first-theme
*/

Ця інформація з’явиться у списку “Вигляд > Теми” у бекенді WordPress.index.phpЦе основний шаблон теми, який використовується як стандартний варіант у разі відсутності більш детальних шаблонів. З розвитком проекту ви поступово замінюватимете або доповнюватимете його більш специфічними шаблонами.

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

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

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

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

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

Правила найменування основних шаблонних файлів

Ієрархія шаблонів в WordPress дотримується принципу “від спеціальних до загальних”. Наприклад, під час відвідування блогової статті з ідентифікатором 123, система WordPress шукає потрібні дані у наступному порядку:single-post-123.php、single-post.php、single.phpІ на завершенняsingular.phpЦей метод буде використаний лише у випадку, якщо всі інші варіанти вже відсутні.index.php。

До поширених основних шаблонних файлів належать:
- front-page.phpВикористовується для налаштування головної сторінки веб-сайту.
- home.phpСторінка індексу блогових статей.
- single.phpОдна стаття блогу або одна стаття у власному типі контенту.
- page.phpОдносторінковий сайт.
- archive.phpУніверсальний шаблон для різних архівних сторінок (категорії, теги, автори тощо).
- category.phpСторінка певної категорії.
- 404.phpСторінка з помилкою 404.
- header.php、footer.php、sidebar.phpЗазвичай це фрагменти локальних шаблонів.

Поширені функції для виклику локальних шаблонів

Щоб зберегти модульність та зручність обслуговування коду, WordPress надає кілька ключових функцій для завантаження локальних шаблонних файлів. Найважливішою з них є…get_header()、get_footer()和get_sidebar()Вони використовуються для вставки відповідних елементів коду.header.php、footer.php和sidebar.php。

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

Ще одна надзвичайно важлива функція є…get_template_part()Воно дозволяє вам більш гнучким чином використовувати будь-які фрагменти шаблонів. Наприклад, у циклі блогових статей ви можете захотіти вставити спеціальний шаблон для відображення змісту статті.

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>

Цей код буде виконувати пошук з використанням пріоритетних критеріїв.template-parts/content-post.php(Припускаємо, що тип статті є…)postЯкщо не знайдеться, тоді виконається завантаження.template-parts/content.php。

Використання основних функцій та механізмів керування через хаки (hooks)

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

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

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

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

Основні функції для отримання та виведення контенту

У файлі шаблонів ви часто використовуєте низку функцій для отримання та відображення динамічного контенту. Наприклад,the_title()Використовується для виведення заголовка поточної статті або сторінки.the_content()Отже, основний вміст після форматування виглядає так. Це відповідає функції, яка виконує пряме виведення даних.get_Функції, що знаходяться на початку…get_the_title()Вони повертають дані, які ви можете подальше обробляти у вашому коді.

Цикл публікацій у блозі є основною частиною шаблонів WordPress, і його стандартна структура коду виглядає наступним чином:

<!-- 在这里输出文章内容 -->
        <h2><p><strong>  <p><strong></h2>
        <div><p><strong>  <p><strong></div>
    <?php endwhile; ?>
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>Немає жодного контенту.</p>
<?php endif; ?>

Розширення функціоналу за допомогою хуків (hooks)

Хаки поділяються на два типи: “дії” (actions) та “фільтри” (filters). Хаки типу „дії“ дозволяють вам вставляти власний код під час виникнення певних подій. Наприклад, це може бути виконання певної функції або обробка даних у момент,wp_headУ функціях-“хвостках” (hooks) можна виводити додаткові метатеги. Для цього використовуються відповідні механізми та інструменти.add_action()Функція, яка дозволяє монтувати власні функції.

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

Наприклад, у темі…functions.phpДодайте підтримку посилань на фіди (Feed links) до файлу:

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

Фільтрові хаки дозволяють вам модифікувати дані. Наприклад, їх можна використовувати для…excerpt_lengthФільтри дозволяють змінювати довжину анотацій до статей.

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

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

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

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

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

Оголошуємо про підтримку функції визначення теми.

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

Поширені описи функцій включають:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

Інтеграція власних стилів та скриптів

Сучасна тема повинна правильно керувати своїми таблицями CSS-стилів та JavaScript-скриптами, щоб забезпечити їхнє завантаження за потреби, уникнути конфліктів між ними та дотримуватися найкращих практик оптимізації продуктивності фронтенд-частини сайту.

Безпечне реєстрування та завантаження ресурсів

Абсолютно не варто використовувати дані безпосередньо у файлі шаблону.<link>或<script>Використовуйте теги для жорсткого кодування ресурсів. Правильний підхід — використовуватиwp_enqueue_scriptsАкційні хаки, у поєднанні з…wp_enqueue_style()和wp_enqueue_script()Функція.

在functions.phpУ цьому випадку вам потрібно визначити функцію для обробки чергування запитів на отримання ресурсів.

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

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

Додати підтримку стилів до редактора Гутенберга

З поширенням блокових редакторів стало надзвичайно важливим додати підтримку фронтенд-стилів до бекенд-редакторів, щоб забезпечити досвід редагування типу “видиш, що отримаєш”. Для цього можна використовувати…add_theme_support( ‘editor-styles’ )Також необхідно додати до черги таблицю стилів редактора.

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

підсумок

Розробка тем для WordPress починається з розуміння базової структури файлів, а потім поступово переходить до роботи з шаблонами, основними функціями системи, системою хуків (hooks) та менеджментом ресурсів. Ключовим елементом є практика – починаючи з найпростіших прикладів, ви поступово опановуєте всі аспектиstyle.css和index.phpПочніть, а потім створіть.header.php和footer.phpВиконайте модульне розділення коду. Потім, використовуючи ієрархію шаблонів, створіть спеціальні шаблони для різних типів сторінок.single.php或page.php…в…functions.phpУ цьому випадку використовуються гачки та інші елементи для з’єднання частин.add_theme_supportДодавайте функції безпечним способом та завжди перевіряйте їх на належність до вимог проекту.wp_enqueue_scriptsЦей розділ присвячений керуванню стилями та скриптами в WordPress. Дотримуючись цих основних принципів та кроків, ви зможете створити професійний, ефективний та легкий у обслуговуванні тематичний дизайн для вашого сайту.

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

Щоб створити тему для WordPress, необхідно мати щонайменше наступні файли:

З технічної точки зору, тема, яку WordPress визнає та активує, має щонайменше два файли:style.css和index.php。style.cssУ коментарях до заголовкового файлу має бути вказана правильна тематична метаінформація, наприклад:Theme NameА отindex.phpЯк найбазовіший шаблонний файл, він використовується для рендерингу всіх сторінок.

Як створити власний шаблон сторінки для мого тематичного проекту?

Створення власних шаблонів сторінок дуже просте. Вам потрібно лише зробити це у будь-якому файлі шаблону (зазвичай…)page.phpДодайте блок специфічних PHP-коментарів на початку коду. Наприклад, щоб створити шаблон “повнокольорової сторінки”, можна створити новий файл під назвою…template-full-width.phpФайл, і на початку файлу напишіть:/* Template Name: 全宽页面 */Після збереження змін, під час редагування сторінки в бекенді WordPress ви зможете побачити опцію “Повнокадрова сторінка” у випадаючому списку “Шаблони” під розділом “Властивості сторінки” та вибрати її.

Чому потрібно використовувати функцію `add_action` у файлі `functions.php` для додавання нових функцій?

Безпосередньо в…functions.phpПисання функційного коду в неправильний момент може призвести до виникнення помилок або до того, що функції не будуть виконуватися належним чином. Для уникнення цього слід ретельно планувати процес розробки та контролювати час виконання коду.add_action()或add_filter()Прикріплення вашої функції до певного хука (hook) WordPress дозволяє гарантувати, що код виконуватиметься у правильний та безпечний момент. Наприклад, це може бути корисно для обробки даних після завершення завантаження сторінки чи перед відображенням віafter_setup_themeХаки використовуються для ініціалізації теми.wp_enqueue_scriptsХаки (hooks) використовуються для завантаження ресурсів. Це одна з найкращих практик архітектури з плагінами WordPress, яка підвищує модульність та сумісність коду.

Як зробити так, щоб моя тема підтримувала багатомовний переклад?

Щоб тема підтримувала кілька мов, необхідно виконати кілька кроків. По-перше,style.cssВикористовуйте цей код у відповідних частинах коду та у всіх шаблонних файлах.__()、_e()Використовуйте функції перекладу для обробки всіх текстових рядків, які потребують перекладу. Потім,functions.phpВикористовуйте його у Китаї.load_theme_textdomain()Функція призначена для завантаження файлів з перекладами. На завершення, за допомогою інструментів на кшталт Poedit, з вихідного коду вилучаються потрібні рядки для подальшого використання у процесі перекладу..potФайл, і прошу перекладача створити відповідний переклад на цю мову (наприклад:zh_CN.po和.moПереклад файлів потрібно розмістити у відповідному каталозі теми (theme directory)./languages/Це можна зробити прямо у папці.

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

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