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

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

Підготовчі роботи перед розробкою

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

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

Спочатку нам потрібно встановити програмне забезпечення для локального сервера. Ви можете вибрати такі інструменти, як XAMPP, MAMP чи Local by Flywheel. Ці пакети поєднують в собі сервер Apache, базу даних MySQL та мову програмування PHP, що є необхідним для роботи системи WordPress. Наприклад, після встановлення XAMPP та запуску сервісів Apache та MySQL ваш комп’ютер стає локальним сервером.

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

Далі завантажте найновішу версію WordPress та розпакуйте її у кореневий каталог веб-сайту на вашому локальному сервері (наприклад, у каталозі, який використовується XAMPP).htdocsПотім, шляхом доступу…http://localhost/your-wordpress-folderЩоб завершити відоме процедуру встановлення, яка займає всього п’ять хвилин, вам потрібно створити базу даних, а також встановити ім’я та пароль користувача, який буде керувати веб-сайтом.

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

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

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

Підготуйте кодовий редактор та необхідні інструменти.

Відмінний кодовий редактор може значно підвищити ефективність розробки. Visual Studio Code, PhpStorm чи Sublime Text – усі вони є чудовими варіантами. Особливо Visual Studio Code, який має багато додатків для роботи з WordPress та PHP, таких як PHP Intelephense, які забезпечують інтелектуальне доповнення коду та перевірку граматики.

Крім того, рекомендується встановити додаткові інструменти для розробників браузерів, наприклад, офіційний додаток WordPress “Theme Check”, який допомагає перевіряти, чи відповідає ваш тематичний дизайн встановленим стандартам на пізніх етапах розробки. Також ви можете використовувати функцію “Перевірити елементи” („Inspect Elements“) браузера для реального часу налаштування коду HTML та CSS.

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

Найпростіша тема для WordPress потребує лише двох файлів, проте структура, яка відповідає стандартам та має повний набір функцій, складається з кількох окремих файлів, кожен з яких виконує певну роль.

Основний файл таблиці стилів

Кожен тематичний дизайн для WordPress має мати певні обов’язкові елементи.style.cssЦей файл є не лише CSS-файлом, який визначає стиль теми, але й блок коментарів у його вступній частині є своєрідним “ідентифікаційним документом” теми, що містить усю необхідну метаінформацію для розпізнавання теми WordPress. Основний блок коментарів виглядає так:

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Зокрема,Text DomainВикористовується для інтернаціоналізації; слугує для подальшого виклику функцій перекладу.__()或_e()Ідентифікатор, який використовується під час виконання певних дій.

Базові шаблонні файли

Ще одним необхідним файлом є…index.phpЦе за замовчуванням шаблон теми; він використовується, коли WordPress не знаходить інших, більш специфічних шаблонних файлів (наприклад, шаблонів, призначених для певних типів сторінок чи функцій сайту).single.php或page.phpКоли ви використовуєте React, він використовується для відображення сторінки.

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

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

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

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

Спочатку створіть…header.phpВоно містить заголовкову частину HTML-документа, таку як…<doctype>Заява,<head>Регіон (у якому слід використовувати…)wp_head()Функція включає в себе імпорт основних скриптів та стилів WordPress, а також маркери для відображення заголовкової частини веб-сайту.

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

Наостанок, створіть…functions.phpЦей файл не є обов’язковим, але він виступає своєрідним “мозком” теми. Саме тут ви можете додати функції підтримки теми, меню реєстрації та бічну панель, включити файли зі стилями та скриптами, а також визначити різноманітні користувацькі функції (кастом

Рекомендуємо до прочитання. Як розробити власний тематичний дизайн для WordPress з нуля?。

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

Після створення базових файлів ми можемо почати „оживляти“ нашу тему, надаючи їй основних функцій, необхідних для сайту.

Реалізація навігаційного меню

Сучасні веб-сайти зазвичай мають навігаційні меню. Спочатку вам потрібно…functions.phpВикористовуйте його у Китаї.register_nav_menus()Функція для реєстрації місць розташування страв.

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

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

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

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Цей код реєструє два місця розташування меню: “Головне навігаційне меню” та “Меню в футерній частині”. Потім, у тих місцях шаблону, де ви бажаєте відобразити меню (наприклад, на головній сторінці чи у футернheader.phpУ цьому випадку слід використовувати…wp_nav_menu()Функція викликає її.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );

Користувачі можуть створювати меню в розділі “Вигляд” → “Меню” на панелі керування WordPress та призначати їх для використання у головному навігаційному меню.

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

Багато тем підтримують скорочені зображення статей (візитівки) та бічні панелі з інструментами. Те саме стосується й інших функцій.functions.php的my_first_theme_setupДодайте наступний код у функцію, щоб увімкнути ці функції:

add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持

Щоб зареєструвати зону для підказок у бічній панелі, використовуйте…register_sidebar()Функція:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在这里添加小工具。', '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( 'sidebar-1' )Щоб відобразити цю область.

Інтеграція шаблонів та додавання стилів

Тепер ми з’єднаємо всі частини шаблонів та надамо їм базовий стиль, щоб веб-сайт набув візуальної форми.

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

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

<?php get_header(); ?>

<main id="main" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation(); // 文章导航
    else :
        get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
    endif;
    ?>
</main>

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

get_header(), get_sidebar(), get_footer()Функції окремо імпортують відповідні файли-шаблони.get_template_part()Це більш гнучка функція, яка спонукає вас відокремлювати блоки коду, які використовуються багаторазово (наприклад, уривки з статей), для подальшого повторного застосування.template-partsУ окремих файлах, які знаходяться у папці, наприклад…content.php。

Розробка базових стилів та реактивного дизайну

Зараз, відкрийте.style.cssПочніть надавати стиль вашій темі. Спочатку встановіть деякі глобальні стилі – модель блоків, шрифти та кольори.

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

@media (max-width: 768px) {
    .site-main {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}

Не забудьте…header.php的<head>Деякі вікно-метатеги були додані для забезпечення правильного масштабування на мобільних пристроях:<meta name="viewport" content="width=device-width, initial-scale=1">。

підсумок

Від створення об’єкта, який містить…style.css和index.phpВи почали з створення простої папки, а потім дійшли до створення повноцінного теми для WordPress, яка містить навігацію, бічну панель та реагує на різні розміри екранів. Цей процес охоплює основні концепції розробки тем для WordPress. Ви навчилися, як…functions.phpРозширення функцій теми: як використовувати систему рівнів шаблонів для організації коду, а також як перетворювати дизайн на HTML та CSS для фронтенду. Це лише початок – далі ви зможете дослідити більш складні шаблонні файли (наприклад,…)single.php, page.php, archive.phpКрім того, існують можливості для налаштування типів статей, інструменти для створення унікальних тем (тем-конструктори API), а також можливість використання фреймворків Sass та JavaScript для розробки більш складних та сучасних дизайнів тем. Постійна практика та вивчення офіційної документації для розробників є найкращим способом покращення сво

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

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

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

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

Щоб тема підтримувала багатомовність (інтернаціоналізацію), необхідно виконати два основні кроки. По-перше, переконайтеся, що…style.cssЗаголовок та…functions.phpУсі рядки, які потрібно перекласти, обгорнуті функціями перекладу WordPress, наприклад:__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )По-друге, вам знадобиться використовувати такі інструменти, як Poedit, для створення….potПерекладіть файл шаблонів, а потім створіть відповідні файли для кожної мови..po和.moФайл, і розмістіть його у відповідному розділі теми./languagesУ каталозі.

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

Перед публікацією обов’язково ретельно протестуйте свій тематичний дизайн за допомогою плагіна “Theme Check”, щоб переконатися, що він відповідає усім стандартам кодування та вимогам безпеки, передбаченим для тематичних дизайнів WordPress. Видаліть усі коди для налагодження та коментарі. Після цього ви можете вибрати один із варіантів: подати тематичний дизайн до офіційного каталогу тем WordPress.org (що потребує перевірки), або запакувати його у формат ZIP та надати клієнтам або розповсюджувати на власному веб-сайті. Якщо ви розповсюджуєте тематичний дизайн самостійно, обов’язково надайте чіткі інструкції з встановлення та відповідну документацію.

Чому мої власні стилі зникають після оновлення сайту в бекенді?

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