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

Когда вы начинаете изучать разработку с использованием WordPress, создание собственного тематического дизайна (theme) является важной вехой на вашем пути. Это не только позволяет вам полностью контролировать внешний вид и функциональность вашего сайта, но и представляет собой отличный способ глубже понять основную архитектуру системы 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-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.

страница доступа

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

Отличный код-редактор значительно повышает эффективность разработки. Visual Studio Code, PhpStorm и Sublime Text — все они отличные варианты. Особенно стоит отметить Visual Studio Code, который обладает большим количеством расширений для работы с WordPress и PHP, таких как PHP Intelephense, которые обеспечивают интеллектуальное дополнение кода и проверку синтаксиса.

Кроме того, рекомендуется установить плагин для разработчиков браузера, например, официальный плагин WordPress “Theme Check”, который помогает проверять, соответствует ли используемый тематический дизайн стандартам на этапе разработки. Также вы можете воспользоваться функцией “Проверка элементов” браузера для реального времени отладки кода HTML и CSS.

Понимание основной структуры темы WordPress

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

Основной файл стилей (stylesheet file)

Каждая тема для 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Когда пользователь запускает веб-приложение, оно используется для отображения страницы.

У вас есть всего два файла, но с их помощью ваша тема уже может появиться в списке тем в разделе “Внешний вид” → “Темы” в панели управления 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()Функция для регистрации места размещения блюд.

Общий хостинг InterServer

Общий хостинг $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\nmy_first_theme_setupВ функцию добавьте следующий код, чтобы включить эти функции:

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

Чтобы зарегистрировать область для размещения панельных инструментов (сайдбарных дополнений), используйте следующие шаги:register_sidebar()Функция:

Функция my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Главная боковая панель', 'my-first-theme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Добавьте виджеты здесь.', 'my-first-theme' ),
        'before_widget' => '  Функция my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Главная боковая панель', 'my-first-theme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Добавьте виджеты здесь.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>'перед заголовком '<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。

Разработка базовых стилей и реагирующего дизайна (responsive design)

Теперь откройте.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\n<head>Для некоторых элементов добавляются мета-теги видимости (viewport meta tags), чтобы обеспечить правильное масштабирование на мобильных устройствах.<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, позволяет создавать более сложные и современные дизайны тем. Постоянная практика в сочетании с ознакомлением с официальной документацией для разработчиков является лучшим способом повышения своих навыков.

Часто задаваемые вопросы

Для разработки тем обязательно необходимо использовать подтемы?

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

Как сделать так, чтобы моя тема поддерживала несколько языков?

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

Как опубликовать приложение после завершения его разработки?

Перед публикацией обязательно тщательно протестируй свой тематический файл с помощью плагина “Theme Check”, чтобы убедиться, что он соответствует всем стандартам кодирования и требованиям безопасности к тематикам для WordPress. Удалите весь отладочный код и комментарии. Затем вы можете выбрать: отправить тему в официальный каталог тем WordPress.org (что требует проверки), или упаковать ее в ZIP-файл для предоставления клиентам или распространения на своем сайте. Если вы распространяете тему самостоятельно, обязательно предоставьте четкие инструкции по установке и документацию.

Почему мои пользовательские настройки стиля исчезли после обновления веб-сайта в бэкэнде?

Вероятно, проблема возникла из-за того, что вы напрямую изменили файлы используемой родительской темы. При обновлении родительской темы через интерфейс WordPress все основные файлы заменяются на новые версии, в результате чего ваши изменения теряются. Именно поэтому для любого кастомного развития настоятельно рекомендуется использовать дочерние темы. Стили и функции дочерней темы загружаются независимо от родительской темы, поэтому даже при обновлении родительской темы ваши изменения в дочерней теме остаются нетронутыми.