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

Розробка теми для WordPress – це не лише процес вивчення мов програмування PHP, HTML, CSS та JavaScript, а й чудовий спосіб зрозуміти основну архітектуру системи. На відміну від використання підтем чи інструментів для створення сторінок, створення теми з нуля дає вам повний контроль над веб-сайтом та можливість створити унікальний дизайн та функціонал. Цей посібник проведе вас крок за кроком через весь процес розробки професійної теми для WordPress.

Розробна середовище та підготовчі кроки

Перш ніж почати писати перший рядок коду, дуже важливо створити ефективне локальне середовище розробки. Це дозволить вам проводити тестування та налагодження без впливу на роботу веб-сайту в реальному часі.

Налаштування локального середовища розробки

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

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

Планування структури тематичних файлів

Стандартна тема для WordPress починається з папки, яка має містити певні основні файли. Спочатку, у каталозі встановлення WordPress у вас має бути…wp-content/themesУ цьому папці створіть новий папірець, наприклад…my-custom-themeУ цьому папці вам необхідно створити принаймні два файли:

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

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

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

1. style.cssЦе таблиця стилів теми; коментарі у заголовку файлу містять всю метаінформацію про тему, яка є ключовою для розпізнавання теми WordPress.
2. index.phpЦе основний шаблон теми – це шаблон, який використовується за замовчуванням на всіх сторінках у разі необхідності повернення до попереднього вигляду сторінки.

Структура базового тематичного файлу виглядає наступним чином:

my-custom-theme/
├── style.css          // 主题样式与信息
├── index.php          // 主模板文件
├── functions.php      // 主题功能文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
└── assets/            // 静态资源目录
    ├── css/
    ├── js/
    └── images/

Основні шаблонні файли та інформація про тему

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

Визначення стилів тем та метаданих

style.cssБлок коментарів у верхній частині файлу є своєрідним “паспортом” теми. WordPress використовує цю інформацію для її відображення у своєму внутрішньому інтерфейсі. Ось найпростіший приклад:

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

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始构建的专业WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Зокрема,Text DomainВикористовується для інтернаціоналізації; має збігатися з ім’ям вашої тематичної папки.

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

index.phpЦе найважливіший файл у вашій темі; коли немає більш конкретного шаблону, який би підійшов, саме цей файл буде використаний. Один з найпростіших варіантів реалізації…index.phpМоже містити виклики до інших частин шаблону.

header.php和footer.phpЦі файли використовуються для зберігання спільного верхнього та нижнього блоків вмісту усіх сторінок.index.phpУ цьому випадку ви можете їх ввести наступним чином:

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

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

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

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环内容
        endwhile;
    else :
        // 没有找到内容
    endif;
    ?>
</main>

<?php get_footer(); ?>

функціяget_header()和get_footer()Буде автоматично завантажено шаблонний файл з тим самим ім’ям.

Функції теми та їх інтеграція з основними компонентами системи

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

Імпорт скриптів та таблиць стилів

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

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

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

// 引入自定义CSS
    wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Функція реєстрації тем підтримується.

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

function my_theme_setup() {
    // 让主题支持翻译
    load_theme_textdomain( 'my-custom-theme', get_template_directory() . '/languages' );

// 自动添加<title>标签
    add_theme_support( 'title-tag' );

// 启用文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Рівні шаблонів та розширені шаблони

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

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

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

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

Створення шаблонів для окремих статей та сторінок

single.phpВикористовується для відображення окремої статті блогу.page.phpВикористовується для відображення окремих сторінок. Ви можете створювати їх на основі…index.phpСтворіть їх та додайте більш детальні метадані, такі як дата публікації статті, автор та категорія.

Створення архівних та пошукових сторінок

archive.phpВикористовується для відображення списків архівів за категоріями, тегами, авторами чи датами.search.phpВони використовуються для відображення результатів пошуку. У цих шаблонах ви можете використовувати умовні теги, такі як…is_category()或is_search()Давайте детальніше налаштуємо вміст.

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

WordPress дозволяє створювати власні шаблони, які можна використовувати на будь-яких сторінках. Для цього достатньо додати певний блок коментарів на початку файлу шаблону. Наприклад, щоб створити шаблон під назвою…template-fullwidth.phpДокументи:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */
get_header();
?>
<!-- 你的全宽页面HTML结构 -->
<?php
get_footer();

Після створення сторінки ви зможете вибрати шаблон “Повнокольорова сторінка” у розділі “Властивості сторінки” в бекенді WordPress під час її редагування.

підсумок

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

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

Щоб розробляти теми для WordPress, необхідно володіти такими мовами програмування:

Щоб розробити повнофункціональний тематичний дизайн для WordPress, вам потрібно володіти HTML та CSS для створення структури та стилістичного оформлення сторінок, PHP для обробки логіки та взаємодії з основною частиною системи WordPress, а також базовими знаннями JavaScript для реалізації ефектів взаємодії з користувачем на стороні клієнта. Основне розуміння MySQL також допоможе ефективно отримувати та обробляти дані.

Яка функція файлу functions.php у рамках теми (theme)?

functions.phpФайли є основою функціоналу теми. Вони використовуються для додавання чи зміни функцій теми: реєстрації навігаційного меню, бічних панелей (зони інструментів), завантаження файлів CSS та JavaScript, визначення підтримуваних функцій теми (наприклад, мініатюр статей, користувацького логотипу), а також для оголошення різних користувацьких функцій та копілок (hook-функцій). Ці файли автоматично завантажуються під час ініціалізації теми.

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

Щоб тема підтримувала багатомовність, потрібно виконати два основні кроки: по-перше, у всіх місцях коду, де потрібно перекласти текст, слід використовувати функції перекладу WordPress.__()或_e()І вказати, що це має бути зроблено у…style.cssПо-перше, необхідно визначити відповідний текстовий домен (Text Domain). По-друге, використовуючи інструменти на кшталт Poedit, необхідно сканувати файли тем (theme files) для генерації потрібних даних..potПерекладіть файл шаблонів, а потім створіть відповідні файли для кожної мови..po和.moЗкомпілюйте файли та зберігайте їх у папці, призначеній для теми./languages/У каталозі.

У чому різниця між власними шаблонами сторінок та звичайними шаблонами сторінок (page.php)?

Звичайна шаблонна сторінкаpage.phpЦе шаблон, який використовується на всіх сторінках за замовчуванням. А власний шаблон сторінки – це спеціальний файл-шаблон, який визначається за допомогою блоків коментарів у верхній частині файлу та може бути вибраний користувачем під час редагування окремої сторінки. Власні шаблони надають більшої гнучкості, дозволяючи створювати абсолютно різні верстки для сторінок певного призначення (наприклад, форм для зв’язку, сторінок з повним розміром екрана, альбомів робіт)page.phpАбо створіть кілька файлів сторінок.