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

Підготовчі роботи та налаштування середовища

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

Існує багато варіантів для налаштування локального середовища розробки. Ви можете використовувати такі інтегровані пакети, як XAMPP, MAMP чи Local by Flywheel – вони дозволяють швидко встановити на ваш комп’ютер сервери Apache, MySQL та PHP. Для отримання більш близького до реальних умов роботи середовища можна розглянути використання контейнерів Docker. Крім того, майже всі сучасні процеси розробки тем починаються з базового редактора коду, наприклад VS Code, у поєднанні з необхідними додатками для підвищення ефективності програмування.

Стандартна та зрозуміла структура каталогу тем є основою для забезпечення здатності проекту до підтримки та розвитку. У WordPress…wp-content/themesУ каталозі створіть папку, названу на честь вашої теми. Наприклад:my-modern-themeУ цьому папці ви повинні створити два основні файли:style.css和index.phpСеред них,style.cssЦе не лише таблиці стилів, а й метадані, які відображають тему веб-сайту. Решта файлів та каталогів, наприклад, ті, що використовуються для зберігання скриптів JavaScript, також відіграють важливу роль у функціонуванні сайту./jsМісце для зберігання шаблонних компонентів/template-partsДля зберігання шаблонів сторінок…/page-templatesІнші елементи системи можна поступово створювати під час процесу розробки.

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

Інформація про заголовок таблиці стилів теми

тематичнийstyle.cssВ заголовковому файлі теми обов’язково має бути рядок коментаря у стандартному форматі, який інформує систему WordPress про вашу тему. Ця інформація є надзвичайно важливою, адже вона визначає назву теми, автора, опис, версію тощо.

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

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

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

/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-modern-theme
*/

З нихText DomainЦей елемент призначений для інтернаціоналізації та використовується як область для тексту для подальших функцій перекладу. Після введення необхідної інформації ваш тематичний дизайн з’явиться у списку тем у панелі керування WordPress (“Вигляд” -> “Теми”).

Імпортувати файли з основними функціями

Хочаindex.php和style.cssЦього достатньо, щоб тему можна було розпізнати, але повноцінна тема має містити ще й інші елементи.functions.phpФайл. Цей файл призначений не для безпосереднього виведення контенту, а виконує функцію “функціонального двигуна” теми – він використовується для додавання підтримки теми, реєстраційного меню, бічної панелі, а також для імпорту стилів та скриптів

Створіть файл у кореневому каталозі теми.functions.phpФайл. На початковому етапі ми можемо додати до нього підтримку деяких базових функцій. Ви можете це зробити…add_theme_support()Функції використовуються для оголошення можливостей, підтримуваних певною темою – наприклад, можливості створення скорочених зображень статей (Featured Image), використання власного логотипу, а також використання HTML5-маркерів тощо.

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

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

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

Найбазовішим файлом шаблону є…index.phpЦе є базовим шаблоном для повернення до початкового вигляду всіх сторінок. Однак для більш детального контролю над виглядом сторінок нам слід створити більш специфічні шаблони. Наприклад, шаблон, який використовуватиметься для відображенняhome.php或index.phpВикористовується для відображення окремої статті.single.phpВикористовується для відображення статичних сторінок.page.phpА також для відображення категорій статей, тегів тощо на архівних сторінках.archive.phpКрім того,header.php和footer.phpВикористовується для розділення коду, що знаходиться у верхній (головній) та нижній (нижній) частині веб-сайту.get_header()和get_footer()Функції викликаються у різних шаблонах, що дозволяє повторно використовувати код.

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

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <p><strong>  <p><strong>
</head>
<body no numeric noise key 1005>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/uk/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Реалізація циклічного перегляду статей

Циклічне оновлення статей є основним механізмом генерації динамічного контенту в WordPress.index.php、single.phpУ таких шаблонах ми використовуємо…if ( have_posts() ) : while ( have_posts() ) : the_post();Переглянемо та відобразимо кожну статтю.

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

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

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

<div id="primary" class="content-area">
    <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>
</div>

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

Реалізація респонсивного дизайну та стилізації

Сучасні веб-дизайни мають бути реактивними, щоб забезпечувати хороший користувацький досвід на екранах різних розмірів – від мобільних пристроїв до настільних комп’ютерів. Цього досягається за допомогою CSS-запитів до медіа (media queries), моделі гнучких блоків (Flexbox) та мережевого розташування елементів (CSS Grid).

По-перше,functions.phpВикористовувати правильно…wp_enqueue_style()Функція додає ваш основний стилістичний файл до черги обробки. Обов’язково переконайтеся, що під час виклику цієї функції враховуються стилі, які є частиною стандартної комплектації WordPress.dashicons。

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

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

CSS-стратегія, орієнтована на мобільні пристрої

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

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Обробка реактивних зображень (реагуючих на різні розміри екрана)

WordPress надає потужну підтримку реагуючих зображень. Використовуйте її для створення сайтів, які чудово виглядають на різних пристроях та дисплеях.the_post_thumbnail()Функція передає відповідні параметри розмірів, і WordPress автоматично генерує відповідний вихідний код.srcset和sizesАтрибута `

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

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

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

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

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

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

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

Реєстрація навігаційного меню

在functions.phpВикористовуйте його у Китаї.register_nav_menus()Функція дозволяє визначити, які позиції меню підтримує ваш тематичний дизайн. Після цього користувачі можуть призначити меню для цих позицій у розділі “Вигляд” -> “Меню” в системі керування.

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

Створення області віджетів

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

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-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_modern_theme_widgets_init' );

Після реєстрації, у файлі-шаблоні (наприклад…)sidebar.phpВикористовується у (…)dynamic_sidebar( 'sidebar-1' )Достатньо викликати функцію, щоб відобразити цю область.

Інтегрована API для кастомізаторів

Конфігуратор WordPress дозволяє користувачам налаштовувати параметри теми у реальному часі, під час перегляду її вигляду. Ви можете додати прості налаштування за допомогою API конфігуратора – наприклад, вибір кольорів чи завантаження логотипу. Для цього необхідно скористатися відповідн$wp_customize->add_setting()和$wp_customize->add_control()Метод.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

А потім уheader.phpУ цьому випадку можна скористатися наступним способом:get_theme_mod( 'header_textcolor' )Отримайте це значення та застосуйте його за допомогою вбудованих стилів (inline styles) чи інших способів.

підсумок

Розробка сучасного респонсивного теми для WordPress з нуля є систематичним процесом, який вимагає від розробника не лише досвіду роботи з PHP та основними API WordPress, а й відмінного знання HTML5, CSS3 (особливо технологій Flexbox, Grid та медіакверів), а також JavaScript. Весь процес ґрунтується на принципах модульності та зручності обслуговування: починаючи з налаштування середовища розробки та визначення параметрів теми, розробник поступово створює PHP-файли, які дотримуються певної ієрархії та виконують основні функції сайту (наприклад, показ статей). Далі, за допомогою стратегії дизайну, орієнтованої на мобільні пристрої, та технологій респонсивних зображень, гарантується відмінна якість відображення сайту на всіх пристроях. Нарешті, за допомогою потужних API WordPress додаються навігаційні меню, розділи для додаткових функцій та інструменти для налаштувань, що надає користувачам можливості для індивідуального кастомізування сайту. Дотримуючись цих кроків, ви зможете створити професійну, ефективну та легку у обслуговуванні тему для WordPress.

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

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

Щоб розробити повноцінний тематичний дизайн для WordPress, необхідно оволодіти низкою ключових технологій. По-перше, це PHP – адже сам WordPress написаний на цій мові, і всі шаблони та логіка функцій залежать від неї. Далі йдуть HTML5 та CSS3, які використовуються для створення структури та стилю сторінок; особливо важливими є CSS-запити для реагівної верстки та сучасні моделі розташування елементів (наприклад, Flexbox та Grid). Також важливо мати базові знання JavaScript для реалізації інтерактивних функцій. Нарешті, вам потрібно детально зрозуміти основні концепції WordPress, такі як ієрархія шаблонів, цикли обробки статей, хаки (Hooks) та фільтри (Filters).

Яка функція поля `Text Domain` у файлі `style.css`?

Text DomainЦе ключовий ідентифікатор для інтернаціоналізації та локалізації теми. Його функція – створити унікальний простір імен для всіх перекладних рядків у вашій темі. У коді, коли ви використовуєте такі елементи…__('Hello World', 'my-modern-theme')或_e('Read More', 'my-modern-theme')У такій функції перекладу другим параметром є текстове поле. Це забезпечує, що інструменти для перекладу (наприклад, Poedit) правильно ідентифікують та вилучають рядки, які належать до вашої теми, що дозволяє створити якісний переклад..po和.moПерекладайте файли так, щоб ваша тематика могла бути легко перекладена на будь-яку мову.

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

Щоб тема підтримувала скорочені версії статей (так звані фішки), вам потрібно налаштувати відповідні параметри у налаштуваннях теми.functions.phpДодайте до файлу відповідне повідомлення про підтримку відповідної теми. Використовуйте цей формат для опису того, які функції чи особливості програми пов’язані з цією темою.add_theme_support()Функція, і передати її параметри.'post-thumbnails'Параметри. Ви можете увімкнути їх для всіх типів статей або вказати, щоб вони діяли лише для певних типів статей (наприклад, для новин, оглядів тощо).post和pageУвімкніть цю функцію на відповідному рівні.

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Після додавання підтримки на сторінці редагування статей з’явиться вікно для введення метаданих “Особлива зображення” („Featured Image“), де користувачі зможуть завантажити або вибрати зображення. У шаблоні це використовується таким чином…has_post_thumbnail()Перевірте, чи є мініатюри, і використовуйте їх.the_post_thumbnail()Функція для її відображення.

Чому рекомендується використовувати функцію get_template_part?

get_template_part()Функції є однією з найкращих практик у розробці тем для WordPress для повторного використання коду та модульності. Вони використовуються переважно для розділення поширеного шаблонного коду (наприклад, HTML-структури для відображення контенту статей) на окремі файли-компоненти. Це має кілька значних переваг: насамперед, це покращує читабельність та зручність обслуговування коду. Основний файл шаблону (наприклад,index.phpСтруктура стала набагато більш простою та зрозумілою; крім того, була покращена гнучкість системи – тепер можна завантажувати різні файли компонентів залежно від умов (наприклад, типу статті).get_template_part( 'template-parts/content', 'page' )Буде здійснено пріоритетне завантаження.content-page.phpНаостанок, це полегшує оновлення підтем: для зміни логіки відображення батьківської теми підтемі достатньо надати файл з тим самим ім’ям.