рис. начало/связанные со знаниями/WordPress/Содержание Подробности

От нуля до единицы: подробное объяснение основных этапов разработки темы WordPress и практических советов.

3-минутное чтение
2026-03-14
2026-06-03
2,108
Я получаю комиссионные, когда вы совершаете покупки по ссылкам ниже, без дополнительных затрат для вас.

Подготовка и настройка окружения

Перед тем, как начать писать код, крайне важно настроить правильную среду разработки. Это не только вопрос эффективности, но и удобства отладки и будущего обслуживания. Вам потребуется локальная серверная среда для запуска WordPress. Рекомендуется использовать профессиональное программное обеспечение для локальной разработки, такое как Local by Flywheel, XAMPP или Laragon. Установите и настройте PHP (рекомендуется версия 7.4 и выше), MySQL и веб-сервер (например, Apache или Nginx).

Далее скачайте последнюю версию WordPress, создайте новый сайт в своей локальной серверной среде и завершите установку. Запомните корневой каталог вашего сайта. Для удобства редактирования кода и контроля версий рекомендуется использовать профессиональные редакторы кода, такие как VS Code или PhpStorm, и установить соответствующие фрагменты кода PHP и WordPress, а также плагины для отладки.

Наконец, вам необходимо понять, с чего начинается тема WordPress. Для того чтобы система распознавала тему, требуется как минимум два файла: один из них — файл стилей. style.cssДругой файл — это шаблон главной страницы. index.phpНа сайте. /wp-content/themes/ В папке "Каталог" создайте новую папку для темы, которую вы собираетесь создать, например, my-first-theme。

Рекомендуемое чтение Начнем с нуля: эффективное освоение основных процессов и практических навыков разработки тем для WordPress.。

Создание основного файла темы.

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

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.
Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.
UltaHost ЛОГО страница доступа 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个从零开始开发的 WordPress 主题演示。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain Для интернационализации он должен соответствовать названию вашей папки с темами. Этот файл также будет содержать весь ваш код CSS-стилей.

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

Шаблоны контролируют внешний вид различных страниц веб-сайта. Давайте создадим несколько основных файлов. Первый из них — это файл шаблона главной страницы. index.phpЭто шаблон по умолчанию для всех страниц. Самый простой, но работоспособный вариант. index.php Содержание документа заключается в следующем:

<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>

Этот код вводит три основные функции шаблонных компонентов:get_header(), get_sidebar(), get_footer()Это означает, что вам необходимо создать соответствующий header.php, sidebar.php и footer.php Документ.

header.php Файлы обычно содержат декларацию типа документа и заголовочную информацию HTML (посредством тега ). wp_head() Функция вывода, заголовок сайта и главное навигационное меню. Основной header.php Документы приведены ниже:

Рекомендуемое чтение Я научу вас шаг за шагом, как создать мощную настраиваемую тему WordPress.。

<!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>
    <h1><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

footer.php Затем файл закрывает структуру страницы и вызывает wp_footer() Функция. Многие плагины используют этот хук для вставки скриптов.

Реализовать тематические функции и стили.

Меню регистрации и боковая панель ###
Чтобы пользователи могли получить доступ к меню администрирования, вам необходимо использовать функцию для регистрации расположения меню. Это обычно делается в теме. functions.php Документ готов. Создан. functions.php И добавьте следующий код:

<?php
function my_theme_setup() {
    // 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Далее вам необходимо header.php Вызовите меню в подходящем месте (например, после заголовка сайта) и используйте его. wp_nav_menu() Функция.

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

Также, чтобы включить область виджетов, например боковую панель, вам необходимо внести изменения в файл functions.php. functions.php Зарегистрируйте боковую панель на китайском языке: \n

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', '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_theme_widgets_init' );

Затем, в sidebar.php В документе используются dynamic_sidebar( 'sidebar-1' ) Чтобы показать это.

Добавьте стиль и скрипты.

Правильная очередь CSS- и JavaScript-файлов является одним из лучших подходов к разработке в WordPress, позволяющим избежать конфликтов зависимостей и использовать кэширование. functions.php Создадим новую функцию в Zhihu: \n

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

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义脚本
    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_theme_scripts' );

Таким образом, WordPress автоматически добавит ссылку на ваш стиль в верхнюю часть страницы. Кроме того, будет создан файл , содержащий ваши стили. /js/ Откройте каталог и добавьте туда свой файл. navigation.js Документ.

Уровни шаблонов и продвинутые техники.

###. Понимание иерархии шаблонов.
WordPress выбирает соответствующий шаблонный файл в строгой иерархической последовательности в зависимости от типа посещаемой страницы. Это одна из самых мощных концепций в разработке тем. Например, при посещении отдельной статьи WordPress ищет файл в следующем порядке:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php –> В конечном итоге пришлось вернуться к исходной позиции. index.php。

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

Вы можете создать индивидуальный шаблон для каждой статьи в своём блоге. single.phpВы можете создать шаблон для определённой страницы, например, для страницы "О нас", и назвать его так, как вам удобно. page-about.php Документ (при условии, что псевдоним страницы — “about”).

Используйте функцию расширения с помощью хуков.

Плагин API (хуки и фильтры) WordPress позволяет безопасно изменять тему или основные функции. Хуки действий позволяют выполнять определённые действия в определённые моменты. Например, если вы хотите автоматически добавлять текст в конец статьи, можно использовать для этого хук действия. the_content Фильтр:

function my_theme_add_footer_text( $content ) {
    if ( is_single() ) {
        $content .= '<p class="custom-footer">Эта статья была создана с помощью моего генератора тем.</p>';
    }
    return $content;
}
add_filter( 'the_content', 'my_theme_add_footer_text' );

резюме

Выполнив действия, описанные в этой статье, вы прошли основной путь разработки темы для WordPress: от подготовки к созданию локальной среды до создания файлов, определяющих информацию о теме. style.css Начиная от шаблонов, которые формируют структуру страницы, и заканчивая её содержимым. functions.php Я зарегистрировал функции (например, меню, боковая панель) и добавил стили в скрипты. В конце концов, я понял иерархию шаблонов и механизм хуков. Запомните два основных понятия: “иерархия шаблонов” и “правильное добавление скриптов/стилей в очередь”. Это поможет вам избежать многих распространённых проблем. Разработка темы — это итеративный процесс. Постоянно практикуясь и анализируя существующие хорошие темы, вы быстро улучшите свои навыки.

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

Обязательно ли разрабатывать тему с нуля?
Это не так. Вы можете выбрать в качестве отправной точки официальную базовую тему (Underscores) или фреймворк (например, Genesis). Они обеспечивают стандартизированную структуру кода и базовые функции, что значительно повышает эффективность разработки и качество кода, особенно для начинающих.

Как протестировать мою тему без написания кода?

В локальной среде разработки вы можете использовать встроенные “тестовые данные для темы” в WordPress, чтобы импортировать большое количество образцов статей, страниц, меню и комментариев с различными форматами и элементами. Это поможет вам полностью протестировать работу темы в различных ситуациях.

Почему мои изменения стиля не вступают в силу немедленно в фоновом режиме?

Это обычно происходит из-за кэширования в браузере. Вы можете попробовать выполнить принудительное обновление, нажав “Ctrl + F5” или “Cmd + Shift + R”. Если это вызвано плагином кэширования WordPress, необходимо очистить кэш этого плагина. Также проверьте ваш style.css Был ли обновлён номер версии файла?

Как упаковать и распространить тему после её разработки?

Прежде всего, вам необходимо убедиться, что style.css Информация о теме в документе является полной и точной. Затем удалите все файлы резервных копий, созданные в процессе разработки, а также папки с контролем версий (например, versioncontrol). .gitПосле этого необходимо удалить папки “wp-content/themes” и “wp-content/uploads”, а также временные файлы. Наконец, скомпилируйте тематическую папку в формат ZIP. Этот ZIP-файл можно установить через административную панель WordPress в разделе “Внешний вид” → “Темы” → "Добавить" → "Загрузить тему".

Что дальше, что дальше?

Если вы создаёте или оптимизируете веб-сайт на WordPress, следующим шагом будет ознакомление с темами, связанными с оптимизацией производительности, настройкой плагинов и кастомизацией темы.

Расширенное чтение и практические знания

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

Теги.