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

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

Прежде чем начать писать код, вам понадобится подходящая среда разработки. Обычно это означает создание на вашем локальном компьютере серверной среды, способной работать с системой WordPress. Вы можете воспользоваться готовыми пакетами программ, такими как XAMPP, MAMP (для Mac) или Local by Flywheel, которые позволяют одним кликом установить серверы Apache, MySQL и PHP. После установки локального сервера скачайте последнюю версию программы WordPress с сайта WordPress.org и выполните её установку.

Далее вам нужно найти каталог тем для WordPress. Он находится в следующем месте: wp-content/themes/В этом каталоге создайте папку для вашей новой темы, например: my-first-themeНазвание этой папки является вашим идентификатором темы. Рекомендуется использовать только маленькие буквы, цифры и дефисы; избегайте использования пробелов.

В базовой версии темы для WordPress существует всего два файла:style.css и index.php。style.css Это не просто таблица стилей (stylesheet), но и своего рода “идентификационный документ” темы (theme). С помощью блока комментариев в заголовке файла тема передает свои параметры системе WordPress.

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

Создание файла с информацией о теме (theme information file)

style.css В начале файла обязательно должна содержаться информация о заголовке таблицы стилей (stylesheet header). Это важно для того, чтобы WordPress мог распознать и загрузить выбранную тему. Ниже приведен простейший пример:

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

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

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

/*
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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Среди них,Text Domain Используется для интернационализации тем (перевода текстов), обычно совпадает с названием папки, содержащей эти темы.Theme Name Оно будет отображаться в списке тем в разделе “Внешний вид” → “Темы” в бэкенде WordPress.

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

index.php Это основной шаблон вашей темы. Когда WordPress не может найти более конкретный шаблон (например, single.php или page.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>

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

Понимание структуры шаблонов и ключевых файлов

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

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

Статьи и шаблоны страниц.

Для отдельной статьи в блоге WordPress ищет шаблон в следующем порядке:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpНапример, статья с псевдонимом “hello-world” будет использоваться в первую очередь. single-post-hello-world.php。

Для отдельных страниц (Page) порядок следующий:custom template(Указано в свойствах страницы) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。

Архив и шаблон главной страницы.

Страница списка статей блога (страница архива) также имеет свои правила. Главная страница блога:home.php -> index.phpСтраница категорий и архивации:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpАрхивация тегов, авторов, дат и других элементов информации происходит по аналогичной схеме.

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

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

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

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

\nСоздание часто используемых шаблонных файлов.

Исходя из вышеуказанной структуры, вам следует создать несколько наиболее часто используемых шаблонов файлов для улучшения функционала темы. Во-первых… header.phpОно содержит HTML-документ. <head> Часть страницы и заголовочная область веб-сайта.

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

<header>
    <h1><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    <p></p>
    <nav>
        'primary',
            'container'      =&gt; false,
        ) );
        ?&gt;
    </nav>
</header>

footer.php Содержит информацию о футере и вызовах скриптов.

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

<footer>
    <p>©</p>
</footer>

</body>
</html>

functions.php Это “мозг” темы – он используется для добавления функций, регистрационных меню, таблиц стилей и скриптов.

Интеграция функций темы и стилей

functions.php Файл не является обязательным, но без него функционал темы будет весьма ограничен. Этот файл загружается автоматически при инициализации темы и представляет собой идеальное место для размещения функций монтирования, фильтров и хуков (hooks).

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

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

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

Регистрация навигационного меню и боковой панели

В functions.php В тексте используется выражение «в использовании». register_nav_menus() Функция предназначена для задания мест, где тема поддерживает размещение блюд.

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
    // 为文章和评论添加 RSS feed 链接支持
    add_theme_support( 'automatic-feed-links' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义 logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

пользоваться 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' );

Динамическое включение стилей и скриптов

Правильный подход заключается в использовании… wp_enqueue_style() и wp_enqueue_script() Функция предназначена для добавления CSS- и JavaScript-файлов в очередь обработки. Это обеспечивает правильное управление зависимостями между файлами и предотвращает их многократную загрузку.

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

// 引入一个自定义的 CSS 文件
    wp_enqueue_style( 'my-first-theme-custom', get_template_directory_uri() . '/assets/css/custom.css', array( 'my-first-theme-style' ), '1.0' );

// 引入一个 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );

// 为评论回复功能添加脚本（仅在需要时加载）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Совершенствование шаблонов и изучение более сложных концепций

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

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

В archive.php или home.php В таких случаях обычно требуется представить содержание нескольких статей в виде резюме. Для этого можно воспользоваться функциями-шаблонами, предоставляемыми WordPress. the_excerpt()、the_post_thumbnail()。

<?php if ( have_posts() ) : ?>
    <div class="posts-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1015>
                
                    <a href="/ru/</?php the_permalink(); ?>">
                        <?php the_post_thumbnail( 'medium' ); ?>
                    </a>
                
                <h2><a href="/ru/</?php the_permalink(); ?>"></a></h2>
                <div class="entry-meta">
                    |
                </div>
                <div class="entry-summary">
                    
                </div>
                <a href="/ru/</?php the_permalink(); ?>" class="read-more">Читать дальше</a>
            </article>
        <?php endwhile; ?>
    </div>
    &lt;?php else : ? &lt;?php else : ?
    <p><?php _e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>

Реализация шаблона для комментариев

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

В single.php После вывода содержимого статьи добавьте следующее:

<?php
if ( comments_open() || get_comments_number() ) :
    comments_template();
endif;
?>

Затем создайте. comments.php Данный файл используется для обработки списка комментариев и отображения форм. Вы можете взять за основу код из готовых тем (например, Twenty Twenty-One) и скопировать там необходимые элементы. comments.php И производится модификация – это сложный, но стандартизированный процесс.

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

Чтобы пользователи могли изменять внешний вид сайта без необходимости изменения кода, вы можете воспользоваться API настраивателя (Customizer) WordPress. WP_Customize_Manager К объекту можно добавлять настройки, элементы управления (контроллеры) и различные области (зоны интерфейса).

function my_first_theme_customize_register( $wp_customize ) {
    // 添加一个‘颜色’板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-first-theme' ),
        'priority' => 30,
    ) );

// 添加一个‘主色调’设置
    $wp_customize->add_setting( 'primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 实时预览
    ) );

// 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( '主色调', 'my-first-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'primary_color',
    ) ) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );

После этого вы сможете… style.css Или используйте встроенные стили для динамического вывода этого значения цвета.

резюме

Разработка тем для WordPress представляет собой постепенный процесс, охватывающий все аспекты – от структуры до стиля, от основ до деталей. Начиная с самых базовых принципов… style.css и index.php Вы начали с создания основных элементов структуры темы. Понимание иерархии шаблонов позволяет вам создавать точно настроенные шаблоны для различных типов страниц.functions.php Это мощный инструмент для расширения функционала вашего тематического дизайна, позволяющий интегрировать навигацию, плагины, стилевые скрипты и настройки пользовательского интерфейса. Кроме того, с помощью улучшения механизмов перелистывания статей, шаблонов комментариев и пользовательских настроек ваш тематический дизайн станет более профессиональным и удобным в использовании. Не забывайте: постоянное изучение официального руководства и кода существующих качественных тематик – это лучший способ повысить свои навыки разработки.

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

Какие файлы минимально необходимы для темы WordPress?

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

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

Вам необходимо воспользоваться функциями интернационализации (i18n) в WordPress. functions.php В тексте используется выражение «в использовании». load_theme_textdomain() Существует функция для загрузки файлов с переводами. В коде вашей темы замените все пользовательские строки на переведенные версии этих строк. __()(Используется для отображения ответа) или _e()(Для прямого вывода) используйте функции обертывания, указав, что вы делаете. style.css Определённое в Китае. Text DomainЗатем можно использовать такие инструменты, как Poedit, для создания шаблона файла в формате .pot, который будет использоваться переводчиками для создания файлов с переводами в форматах .po и .mo.

Почему мои пользовательские стили или скрипты не загружаются?

Наиболее распространенная причина в том, что вы… functions.php Функция-хук, отвечающая за загрузку стилей или скриптов во время выполнения операций очереди (queue loading), не правильно подключена к соответствующим действиям в WordPress. Убедитесь, что вы добавили необходимые файлы, содержащие эти стили и скрипты. wp_enqueue_style() или wp_enqueue_script() Функция, которая выполняется путем… add_action( ‘wp_enqueue_scripts’, ‘your_function_name’ ) Смонтировать в wp_enqueue_scripts В отношении этого действия… Кроме того, необходимо проверить путь к файлу.get_template_directory_uri()Проверяется, является ли путь корректным, а также существует ли файл на указанном пути.

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

Существует два основных метода. Первый метод заключается в использовании шаблонов страниц: необходимо добавить специальный блок комментариев в начало PHP-файла. Например: /* Template Name: 全宽页面 */Затем сохраните его в каталоге тем вашего сайта. При редактировании страницы в backend WordPress вы сможете выбрать этот шаблон из выпадающего списка “Атрибуты страницы” -> “Шаблоны”. Второй способ – использование иерархии шаблонов: например, чтобы создать шаблон для страницы с псевдонимом “contact”, достаточно создать шаблон с названием… page-contact.php В случае наличия файла с определённым расширением, WordPress автоматически будет использовать именно его для отображения страницы. Преимущество первого варианта заключается в возможности свободного распределения ресурсов в фоновом режиме; преимущество второго варианта — в том, что правила называния файлов действуют автоматически.