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

Розуміти основну структуру тем WordPress.

Перш ніж почати писати код, необхідно зрозуміти основи будь-якої теми для WordPress: файлів-шаблонів та таблиць стилів. WordPress відображає різні частини веб-сайту, викликаючи певні файли, які дотримуються стандартизованих правил найменування. Мінімалізована тема потребує лише двох файлів:index.php(Основні шаблонні файли) іstyle.css(Основні таблиці стилів та файли з інформацією про теми), але для створення функціонального веб-сайту нам потрібно ще більше.

style.cssФайл містить не лише правила CSS, але й блок коментарів у своєму заголовку, який визначає метадані теми – її назву, автора, опис та версію. Саме так WordPress розпізнає теми. Наприклад, основний блок коментарів у заголовку виглядає так:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Окрім основних файлів, типова структура теми також включає:header.php(Станув, похитав головою);footer.php(Внизу сторінки сайту)sidebar.php(Бічна панель) Іfunctions.php(Файли функцій тематичних модулів). Зрозуміти, як інтегрувати ці файли за допомогою тегів шаблонів (наприклад…)get_header(), get_footer()Модульне поєднання елементів є ключовим фактором ефективного розроблення програмного забезпечення.

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

Створення тематичних файлів та каталогів

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

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

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

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

Створити файл основного таблиці стилів

Як вже підкреслювалося раніше,style.cssЦе необхідно. Створіть цей файл у папці з темами та заповніть всю необхідну інформацію про тему. Після цього ви зможете почати писати базовий CSS-код для визначення вигляду веб-сайту. Щоб уникнути впливу стандартних налаштувань браузерів, зазвичай починають із скидання налаштувань стилів (resetting styles).

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

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

Далі створітьindex.phpЦе за замовчуванням найважливіший шаблонний файл. Його початкова структура має включати виклики до частини голови (header), циклу для відображення контенту (content) та частини нижнього рядка (footer). Шаблонні теги – це вбудовані функції WordPress, які використовуються для вставки динамічного контенту.
Мінімалістичнийindex.phpПочаткова версія може виглядати так:

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

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

Розбирання шаблону: верхня частина, нижня частина та бічна панель

Для повторного використання коду та його читабельності теми WordPress зазвичай розділяють універсальні частини сторінок на окремі файли.

Реалізація шаблону головної частини сайту

Створитиheader.phpЦей файл містить заголовкову частину (header) HTML-документа.到Частина сайту, відповідальна за активацію певних елементів із позначками (тегів), а також навігаційна зона вгорі сторінки. Ключові теги шаблону включають…bloginfo()Використовується для отримання інформації про сайт, а також…wp_head()Хук (hook) – це механізм, який дозволяє плагінам та темам частково вставляти код у вже існуючий код додатку.
Основнийheader.phpПриклад:

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <p><strong>  <p><strong>
</head>
<body no numeric noise key 1005>
<?php wp_body_open(); ?>
<header class="site-header">
    <div class="site-branding">
        <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>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Реалізація шаблону нижньої частини сайту

Створитиfooter.phpВоно містить усі елементи, які знаходяться після кінця основної зони вмісту, наприклад, інформацію про авторські права у футерні, а також дуже важливі дані.wp_footer()Виклики через „хвилі“ (hooks) є необхідними для нормальної роботи багатьох плагінів (наприклад, для аналізу коду).

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<p><strong>Цей текст повинен бути перекладений на українську мову.</strong></p>
</body>
</html>

Покращення функцій тем та можливостей їх налаштування

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

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

在functions.phpУ цьому випадку ви можете використовувати…add_theme_support()Функції використовуються для оголошення можливостей, які підтримує певна тема. Наприклад, наявність можливості увімкнення скорочених зображень статей (відповідних іконок) та налаштування власного логотипу є стандартними функці

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

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

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

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Включити до таблиці стилів та скриптів

Правильний спосіб завантаження стилів та скриптів – це використання відповідних механізмів, які передбачені системою.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');

підсумок

Від створення папки для тем…style.cssВід початку до створення.index.phpРозкомпонуватиheader.php和footer.phpІнші шаблонні файли, а потім – процес їх використання.functions.phpФайли, які додаються до вашої теми, містять ключові функції та ресурси, що становлять основу для розробки WordPress-тем. Кожен крок цього процесу підкреслює концепцію ієрархії шаблонів WordPress та найкращі практики їх використання – зокрема правильне застосування шаблонних тегів та хуків (hooks). Опанувавши ці основи, ви отримаєте міцну підставу для налаштування та розширення будь-яких функцій теми, щоб вона відповідала потребам різних проектів.

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

Скільки файлів потрібно щонайменше для теми WordPress типу ###?
Щоб тема WordPress могла функціонувати, їй потрібно щонайменше два файли:index.php和style.cssСеред них,style.cssБлок коментарів на початку файлу має бути присутнім та містити правильну інформацію про тему; це обов’язкова умова для розпізнавання теми WordPress.

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

Як додати до мого тематичного сайту розділ із невеликими додатковими інструментами чи функціями?

Вам потрібно пройти через…functions.phpФайл для реєстрації плагіна у зоні плагінів (бічній панелі). Використовуйте його для налаштування плагіна.register_sidebar()Функція, а також її параметри (назва, ID та опис) мають бути вказані попередньо. Після цього ви зможете використовувати цю функцію у відповідних шаблонних файлах (наприклад…).sidebar.phpВикористовується у (…)dynamic_sidebar()Функція використовується для її виклику.

Чому мій власний навігаційний меню не відображається?

Це зазвичай тому, що не було виконано певних дій (або не було встановлено необхідних умов).functions.phpПравильно зареєструйте адресу вашого ресторану. Будь ласка, переконайтеся, що ви використали правильну інформацію.register_nav_menus()Функція призначена для реєстрації положення страви (наприклад, ‘primary’), а також…header.phpВиклик у середині…wp_nav_menu()Коли…‘theme_location’Значення параметрів точно збігаються з тими, що були встановлені під час реєстрації. Наостанок, необхідно у налаштуваннях WordPress (“Вигляд > Меню”) призначити певне меню для використання в цьому місці.

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

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

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Функції призначені для модульного організації коду, що дозволяє повторно використовувати певні частини програми. Вони особливо корисні під час виведення контенту різних форматів у циклах статей. Наприклад, ви можете створити функцію, яка будеcontent.phpФайл використовується для визначення універсальної HTML-структури кожної статті, а потім…index.phpВикористовується у цикліget_template_part(‘content’)Використовуйте цей механізм для виклику потрібних функцій. Це підвищує повторну використовуваність коду та його легкість обслуговування, а також дозволяє створювати більш професійні шаблони.content-page.phpЦе стало можливим.