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

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

Прежде чем начинать писать код, вам понадобится подходящая среда разработки. Локальная среда разработки позволяет выполнять тестирование и отладку без влияния на работу веб-сайта в реальном времени. Рекомендуется использовать такие интегрированные пакеты, как XAMPP, MAMP или Local by Flywheel – они обеспечивают однократную установку серверов Apache, MySQL/MariaDB и PHP.

Убедитесь, что ваша версия PHP составляет 7.4 или выше – это минимальная версия, рекомендуемая официальными разработчиками WordPress. Кроме того, вам понадобится текстовый редактор, такой как Visual Studio Code, Sublime Text или PHPStorm. Эти редакторы обеспечивают подсветку синтаксиса кода и предложения по его написанию, что значительно повышает эффективность разработки.

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

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

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

Написать заголовок информационного сообщения

В style.css В начале файла необходимо добавить блок комментариев, в котором будет определена тема документа. Вот пример:

Ультахост (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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Среди них,Text Domain Этот файл используется для обеспечения поддержки многих языков (интернационализации). Его название должно совпадать с названием вашей тематической папки.index.php Файл является шаблоном по умолчанию для данной темы и служит резервным шаблоном для всех страниц. Сначала вы можете написать в него простую HTML-структуру, чтобы провести тестирование.

Основной шаблонный файл и иерархия шаблонов

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

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

Распространенные шаблонные файлы и их назначение

• header.phpВ верхней части веб-сайта обычно находятся следующие элементы: информационная зона, логотип сайта и главная навигация.
• footer.phpВ нижней части веб-сайта обычно размещается информация об авторских правах, вспомогательные ссылки и другие элементы.
• sidebar.phpРаздел боковой панели.
• index.phpОсновной шаблон служит окончательным резервным вариантом для всех страниц.
• single.phpИспользуется для отображения отдельной статьи из блога.
• page.phpИспользуется для отображения отдельных страниц (например, “О нас”, “Контакт”).
• archive.phpИспользуется для отображения списка архивов статей (по категориям, тегам, авторам, датам публикации).
• front-page.phpИспользуется для определения домашней страницы веб-сайта (если для нее задана статическая страница).
• home.phpЭтот шаблон используется для отображения страницы индекса блоговых статей. Если настроена статическая главная страница, данный шаблон отображает список последних публикаций.
• 404.phpИспользуется для отображения страницы ошибки “404 Не найдено”.
• search.phpИспользуется для отображения результатов поиска.
• functions.phpЭто не шаблонный файл, а функциональный файл темы, предназначенный для добавления новых функций, регистрации элементов меню, боковых панелей и других компонентов интерфейса.

Шаблонные теги и циклы

В файле шаблона вы часто используете так называемые “теги шаблона”. Это PHP-функции, предоставляемые WordPress, которые позволяют отображать динамический контент. bloginfo('name') Выразите заголовок веб-сайта.the_title() Заголовок статьи:

Самой важной концепцией является “цикл WordPress”. Это структура PHP-кода, предназначенная для проверки того, есть ли на текущей странице статьи (или список статей), которые необходимо отобразить, и для их последовательного вывода. Один из самых простых примеров такого цикла выглядит следующим образом:

<h2></h2>
    <div class="entry-content">
        
    </div>

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

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

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

functions.php Это “мозг” вашей темы (то есть основной модуль, отвечающий за её функционирование); все функции, которые не относятся к процессу отображения контента (рендеринга шаблонов), должны быть добавлены именно сюда. Этот файл автоматически загружается при инициализации темы.

Функция регистрации тем

В functions.php В WordPress вы можете расширять функционал с помощью различных “хуков” (hooks), таких как действия-хуки (action hooks) и фильтры-хуки (filter hooks). Сначала обычно необходимо указать, что ваш тема поддерживает определенные функции. Например, для добавления миниатюр статей (изображений-заголовков) и поддержки меню:

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

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

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Подключённый к WordPress after_setup_theme Убедитесь, что этот действие будет выполнено в подходящий момент.

Введение стилей и скриптов

В современных дизайнах стили (CSS) и JavaScript-файлы должны быть правильно включены в проект. Для этого обычно используются специальные методы, такие как вставка кода в HTML-файлы или использование внешних ресурсов (например, через ссылки). Конкретные способы зависят от используемых технологий и стандартов разработки. wp_enqueue_style() и wp_enqueue_script() Функции следует добавлять в очередь (кэш), а не напрямую в файлы шаблонов с использованием тегов `` или ``. Преимущества такого подхода заключаются в упрощении управления зависимостями между функциями, предотвращении их многократной загрузки и соблюдении рекомендаций по разработке для WordPress.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Функция `getstylesheet_uri()` возвращает URI шаблона стилей (stylesheet), используемого в вашем проекте. style.css Функция `get_template_directory_uri()` возвращает URL текущего каталога тем (тематического контента).

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

Создание страницного лей아ута и компонентов шаблонов

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

Разделение компонентов шаблона

Создать header.php、footer.php и sidebar.php. В header.php 中，你需要包含完整的 `` 部分，并以一个明显的头部容器（如 `` 标签）结束。在 footer.php Обычно они заканчиваются тегами `` и ``.

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

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

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

Собрать полную страницу

В шаблоне страницы (например…) index.php、single.phpВ данном контексте вы можете использовать следующие функции для включения необходимых компонентов:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Файл; если его не существует, его загружают. template-parts/content.phpЭто значительно повышает уровень повторного использования кода и его удобство в обслуживании.

резюме

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

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

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

Обязательно ли знать PHP для разработки темы WordPress?

Да, PHP является основным языком программирования для WordPress. Файлы шаблонов тем (например…) index.php、page.phpи функциональные файлы (functions.phpВсе эти файлы являются PHP-файлами. Для того чтобы динамически отображать и обрабатывать данные в WordPress, вам необходимо овладеть основами синтаксиса PHP, условными операторами, циклами и использованием функций.

В процессе разработки темы какая разница между файлами `page.php` и `front-page.php`?

page.php Используется для отображения отдельных страниц, созданных в WordPress, таких как “О нас”, “Контакты” и т. д. front-page.php Это шаблон, предназначенный специально для отображения главной страницы веб-сайта. В настройках WordPress (подраздел “Чтение” → “Страницы”), если вы выберете опцию “Одна статическая страница” и укажете нужную страницу в качестве главной, WordPress будет использовать именно этот шаблон при отображении главной страницы. front-page.php Чтобы отобразить эту страницу, необходимо выполнить определенные действия. Если вы не знаете, как это сделать, пожалуйста, укажите дополнительные инструкции или подробности. front-page.php Если такого элемента не существует, то будет использован альтернативный вариант. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

пользоваться wp_enqueue_style() Это метод, официально рекомендуемый WordPress. Он обеспечивает загрузку таблиц стилей только один раз, даже если несколько плагинов или элементов темы используют один и тот же файл. Он удобно справляется с зависимостями между таблицами стилей (например, если ваши стили зависят от какой-либо базовой фреймворки). Кроме того, этот метод лучше совместим с системами кэширования и плагинами, а также позволяет подтемам легко переопределять стили родительской темы.

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

Чтобы тема поддерживала несколько языков, необходимо выполнить два основных шага. Во-первых, во всех текстовых строках темы следует использовать функции перевода, предоставляемые WordPress. ()、_e() или esc_html()И укажите, где они должны быть размещены. style.css Определённое в Китае. Text DomainНапример:_e( 'Hello World', 'my-first-theme' )Во-вторых, используйте такие инструменты, как Poedit, чтобы сканировать код вашей темы и сгенерировать необходимые данные. .pot Шаблонный файл, с помощью которого переводчики могут создавать тексты на разных языках. .po И после компиляции .mo Файлы. Разместите языковые файлы в соответствующих папках темы (theme folder). /languages/ В каталоге WordPress автоматически загружает соответствующие переводы в зависимости от настроек языка сайта.