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

Подготовка среды и основные концепции

Прежде чем начинать писать код, вам понадобится подходящая среда для локального развития. Рекомендуется использовать интегрированные пакеты программного обеспечения для локального хостинга, такие как Local by Flywheel, XAMPP или MAMP. В вашей локальной среде должны быть установлены основные файлы системы управления контентом WordPress.

Любая тема для WordPress должна включать два основных файла:style.css и index.php。style.css Это не просто таблица стилей, а своего рода “идентификационный документ” темы, который сообщает WordPress о характеристиках темы с помощью специальной заголовочной части файла (Theme Header).index.php Это файл-шаблон по умолчанию для данной темы; он отвечает за обработку всех запросов к страницам, для которых не был указан специальный шаблон.

Типичная тема в структуре каталога следует четкой иерархии. Основной шаблон файлов обычно находится непосредственно в корневом каталоге темы, в то время как файлы CSS, JavaScript и изображения хранятся в отдельных папках. /css、/js и /images В таких подкаталогах. Что касается более сложных тем, то вы, возможно, увидите и дополнительные материалы. /template-parts Каталог предназначен для хранения повторно используемых фрагментов шаблонов./inc Каталог предназначен для хранения файлов, содержащих дополнительные функциональные улучшения.

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

Понимание иерархии шаблонов в WordPress

WordPress использует интеллектуальную систему под названием “Иерархия шаблонов” (Template Hierarchy), которая определяет, какой шаблон должен использоваться на конкретной странице. Эта система является основой логики разработки тем (тематических настроек сайта).

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.

Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.

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

Например, когда пользователь заходит на главную страницу блога, WordPress сначала проверяет, существует ли файл с именем… front-page.php Файл… Если его нет, программа продолжит поиск. home.phpЕсли ничего не изменится, система в конечном итоге вернется к использованию параметров по умолчанию. index.phpДля отдельной статьи порядок поиска в WordPress следующий:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Понимание и правильное использование структуры шаблонов позволяет создавать высоко настроенные верстки и внешний вид для различных типов страниц (статей в блоге, статических страниц, архивов по категориям, результатов поиска и т. д.) без необходимости написания сложной логики условных операций.

Заявление с информацией о теме.

style.css В начале файла обязательно должна содержаться блок информации в формате CSS-комментария, который используется для определения метаданных темы. Ниже приведен минимизированный пример:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是我的第一个 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

В данном файле термин “Text Domain” используется для обеспечения поддержки международной локализации (иностранных языков); этот идентификатор обязательно должен быть использован при последующем вызове функций перевода. Заголовок файла является единственным критерием, по которому WordPress распознает и активирует ваш тематический дизайн (theme).

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

Создание основного шаблонного файла

Давайте начнем с самого важного файла-шаблона. Сначала… index.php В этом тексте описывается процесс создания базовой структуры для веб-страницы. Стандартный шаблон должен включать элементы, отвечающие за формирование заголовка страницы (header), основного контента (main content), боковой панели (sidebar) и футера (footer).

Файлы базовых шаблонов обычно содержат следующие вызовы ключевых функций WordPress:get_header()、get_footer()、get_sidebar() слишком get_template_part()Эти функции загружают соответствующие шаблонные файлы, что позволяет модульнизировать структуру страницы.

Создать шаблон заголовка (header template)

header.php Файл содержит элементы, которые отображаются в верхней части каждой страницы. Он должен включать, по меньшей мере, объявление о типе документа в формате HTML5. <!DOCTYPE html>、<head> Разделы и основной текст страницы начинаются с определённых маркеров или элементов интерфейса. <body> 及 <header> Теги.

hosting.com Общий хостинг

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

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

В <head> В данном регионе крайне важно использовать… wp_head() Хук (hook). Этот механизм позволяет ядру WordPress, плагинам, а также вашему собственному тематическому файлу вставлять необходимый код в верхнюю часть страницы (header). К такому коду могут относиться ссылки на стилевые таблицы, мета-теги и скрипты. Вот пример простого шаблона для верхней части страницы:

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1003>

<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

body_class() Функция возвращает список CSS-классов, соответствующих типу текущей страницы, что значительно облегчает работу с настройками стилей.

Создание основного цикла и отображения контента

В WordPress для перебора и отображения списка найденных статей используется так называемый “основной цикл” (The Loop). Этот цикл является ключевой частью шаблонных файлов и обычно находится в конце этих файлов. index.php、single.php или archive.php Средний.

Рекомендуемое чтение Освоение разработки тем для WordPress: Полное руководство по созданию и использованию с нуля。

Типичная структура главного цикла выглядит следующим образом:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/ru/</?php the_permalink(); ?>"></a></h2>
            <div class="entry-content">
                
            </div>
        </article>
    

    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

Внутри цикла вы можете использовать ряд шаблонных тегов, начинающихся с “the_”. the_title()、the_content()、the_excerpt() и the_post_thumbnail()Для отображения различных частей статьи необходимо предоставить её полный текст. Пожалуйста, введите полный текст статьи, и я помогу вам разделить его на отдельные части.

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

Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.

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

Добавление стилей и функций

Визуальное представление темы контролируется с помощью CSS. Кроме того… style.css Помимо написания стилей непосредственно в коде, более профессиональным подходом является использование специальных инструментов и средств, предназначенных для управления стилями. functions.php Файлы используются для формирования очереди загрузки таблиц стилей и скриптов, чтобы обеспечить соблюдение правильных зависимостей между ними и правильный порядок их загрузки.

functions.php Этот файл является “расширением функционала” вашей темы. Он не является шаблоном, а PHP-файлом, который автоматически загружается при инициализации темы. В нем определяются функции, классы, хуки (hooks) и фильтры (filters).

Правильное включение стилей и скриптов

Вам следует использовать… wp_enqueue_style() и wp_enqueue_script() Существуют функции для добавления ресурсов. Эти функции должны быть подключены (монтированы) к соответствующим системным компонентам или инструментам. wp_enqueue_scripts Эта функция реализована с использованием специальных “хуков” (hooks). Преимущество такого подхода заключается в том, что WordPress может централизованно управлять ресурсами, предотвращая их многократную загрузку и конфликты между различными зависимостями (dependencies).

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Меню регистрации и боковая панель

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

пользоваться register_nav_menus() Функция для регистрации места размещения блюд:

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Затем, в header.php В этом случае вы можете использовать… wp_nav_menu() Функция для отображения главного меню.

пользоваться register_sidebar() Функция для регистрации инструментов (приложений) в специальной области на экране:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', 'my-first-theme' ),
        'before_widget' =&gt; '<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() Функция предназначена для вызова данной области (региона).

Тестирование тем и их публикация

После завершения разработки необходимо провести полный тестирование. Это включает проверку визуального отображения темы в различных браузерах (Chrome, Firefox, Safari, Edge) и на устройствах разных размеров (настольные компьютеры, планшеты, смартфоны). Убедитесь, что все ссылки работают корректно, формы функционируют как предполагается, и меню правильно отображаются на маленьких экранах.

Включить режим отладки

В процессе разработки настоятельно рекомендуется включить режим отладки WordPress. Это позволит вам быстро обнаруживать ошибки, предупреждения и сообщения, связанные с работой PHP-скриптов. wp-config.php В файле найдите и измените следующие строки:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

открывает WP_DEBUG_LOG Ошибка может быть записана в файл журнала (лога), что позволяет избежать прямого раскрытия чувствительной информации посетителям сайта.

Проверка стандартов тематики

Перед публикацией или внедрением вашего тематического дизайна для WordPress он должен максимально соответствовать Стандартам разработки тематик для WordPress. К этим стандартам относится, но не ограничивается следующим: необходимо обеспечить, чтобы все данные, отображаемые на странице, были должным образом экранированы (то есть подвергнуты соответствующей обработке для предотвращения ошибок при отображении). Для этого использ esc_html()、esc_url() (Функции типа wait(), и т. д.) Все тексты, подлежащие переводу, используются в исходном коде. __() или _e() Функции обертываются в специальные оболочки (классы или модули), и в основном коде не содержится никаких жестко заданных URL-адресов.

Вы можете использовать официальный плагин “Theme Check” для автоматизированной проверки соответствия стандартам вашего тематического дизайна. Он сканирует ваш код и выявляет потенциальные проблемы, уязвимости в безопасности или несоответствия требованиям стандартов.

Готов к публикации.

После завершения разработки, тестирования и проверки темы вы можете решить опубликовать её в официальном каталоге тем WordPress.org или упаковать для использования лично или клиентами. Пакет для публикации должен включать только необходимые папки и файлы темы; все файлы, связанные с системой контроля версий (например, файлы, созданные с помощью инструментов контроля версий), следует удалить. .gitКроме того, необходимо убедиться, что настроения инструментов разработки и файлы резервных копий соответствуют требованиям проекта. style.css Тематическая информация в тексте полностью соответствует действительности и является точной; кроме того, подготовлено четкое изображение (файл). screenshot.pngРазмер изображения (1200×900 пикселей) используется в качестве миниатюры для темы.

резюме

С момента создания контента, содержащего… style.css и index.php Начиная с основной папки проекта, вы постепенно осваиваете структуру шаблонов, создаете ключевые файлы шаблонов, используете главный цикл для отображения контента и далее продолжаете развивать свои навыки в этой области. functions.php Добавление стилей, скриптов и функций, а затем проведение тщательных тестов и проверок на соответствие стандартам – вот и весь процесс создания базовой темы для WordPress. Этот процесс не только позволяет получить готовую к использованию тему, но и, что более важно, помогает глубоко понять архитектуру тем для WordPress. Исходя из этого знания, вы сможете изучать более сложные функции тем: пользовательские типы статей, API для настройки тем, поддержку блочного редактора (Gutenberg) и т. д., постепенно становясь профессиональным разработчиком тем для WordPress.

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

Как минимум, сколько файлов должно содержаться в теме для WordPress?

Тема, которая может быть распознана и активирована WordPress, должна содержать по меньшей мере два файла:style.css и index.phpСреди них,style.css В заголовочных комментариях информации о теме обязательно должна быть указана правильная тематическая информация.

Почему мои пользовательские стили не вступили в силу?

Обычно это происходит из-за недостаточной приоритетности CSS-селекторов или неправильной загрузки таблицы стилей. Во-первых, проверь инструменты разработчика браузера, чтобы убедиться, что файл таблицы стилей был успешно загружен и что ваши CSS-правила не перекрываются другими правилами с более высокой приоритетностью. Во-вторых, убедитесь, что вы используете правильный способ включения таблицы стилей в код страницы. functions.php В китайском языке wp_enqueue_style() Для загрузки стилей используются специальные функции, а не прямые указания в HTML-коде. <link> Теги.

Как добавить пользовательский шаблон страницы для определённой темы?

Создайте новый PHP-файл, например, под названием `new_file.php`. page-fullwidth.phpВ самом верхнем разделе этого файла добавьте следующий PHP-комментарий для указания имени шаблона:<?php /* Template Name: 全宽页面 */ ?>Затем вы можете написать содержимое этого файла, отличающееся от содержимого шаблона страницы по умолчанию. page.php Макет и код этого шаблона позволяют легко организовать структуру страницы. При создании или редактировании страницы вы можете выбрать этот новый шаблон в разделе “Свойства страницы”.

В чем разница между файлом functions.php и плагинами?

functions.php Это часть текущей темы, и её функции тесно связаны с особенностями этой темы. Если вы смените тему, эти функции могут измениться или перестать работать корректно.functions.php Код, находящийся внутри темы, больше не будет работать. Функции, предоставляемые плагинами, независимы от используемой темы; они активируются автоматически при установке плагина и сохраняются независимо от изменений в теме. Обычно функции, тесно связанные с визуальным оформлением сайта, размещаются внутри темы, в то время как универсальные, независимые функции лучше реализовывать в виде плагинов.

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

Вам необходимо выполнить два задания: подготовить и загрузить файлы с переводами. Во-первых, в коде все строки, предназначенные для пользователей (например… ('Read More', 'my-first-theme')Все должны использовать такие инструменты или методы… () или _e() Такую функцию перевода необходимо обернуть в соответствующий контейнер (класс или объект), при этом второй параметр (область для ввода текста) должен быть корректно передан в функцию. style.css Соответствует описанному в документации “Text Domain”. Затем используйте такие инструменты, как Poedit, для создания необходимых файлов. .pot Шаблонный файл, а также переведенный соответствующий текст. .po и .mo Файл. Наконец, functions.php Используйте это в Китае. load_theme_textdomain() Функция для загрузки файлов с переводами.