Прежде чем начинать написание кода, вам понадобится локальная среда разработки. К ней обычно относятся локальный сервер (например, XAMPP, MAMP или Local by Flywheel), PHP, база данных MySQL, а также текстовый редактор (например, VS Code или Sublime Text). Убедитесь, что версия PHP соответствует официальным требованиям WordPress.
Далее, в каталоге установки WordPress:wp-content/themesВ этом папке создайте новую папку, например, назовите её «New Folder».my-first-themeВ этой папке будут храниться все файлы, связанные с вашей темой.
Для самой базовой темы WordPress нужны всего два файла:style.cssиindex.phpВо-первых, необходимо создать…style.cssНеобходимо создать файл и добавить в его начало комментарий с информацией о теме (theme metadata). Это обязательно для того, чтобы WordPress смог распознать используемую тему.
Рекомендуемое чтение Индивидуальная тема WordPress: полное руководство по созданию уникального внешнего вида сайта с нуля。
/*
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
*/Затем создайте самый простой вариант (самый базовый решение).index.phpФайл в настоящее время содержит только основную структуру HTML-документа (скелет) и строку “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<h1>Здравствуйте, мир! Это моя первая тема (тематическая настройка для сайта).</h1>
</body>
</html>Теперь войдите в панель управления WordPress, перейдите в раздел “Внешний вид” → “Темы”, и там должна появиться тема “My First Theme”; вы сможете её активировать. Хотя на данный момент её функционал ограничен, вы успешно создали тему, признанную системой WordPress.
Основной шаблонный файл для создания темы
Полная тема состоит из набора шаблонных файлов, которые определяют отображение различных частей веб-сайта. Давайте начнем с самых важных из этих файлов.
Разделить верхнюю и нижнюю части страницы (заголовок и футер)
Первым шагом является разделение повторяющегося кода (например, кода, используемого в верхней и нижней части страницы) на отдельные файлы. Создайте эти файлы.header.phpФайл, содержащий с<!DOCTYPE html>Нажмите, чтобы открыть.<body>Всё содержимое, находящееся перед тегом.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
</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>Создатьfooter.phpФайл, содержащий содержимое подвала (footer) и закрывающие теги.
Рекомендуемое чтение С нуля создайте свой собственный тематический дизайн для WordPress: полное руководство по архитектуре, дизайну и разработке。
<footer id="colophon" class="site-footer">
<p>©</p>
</footer>
</body>
</html>Затем измените свой…index.phpДокументы, используемые дляget_header()иget_footer()использовать функции для включения этих частей.
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容将在这里显示
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>Создание цикла статей и боковой панели
Вышеуказанноеindex.phpВ коде уже содержится базовый основной цикл WordPress (The Loop), который используется для получения и отображения списка статей. Далее мы продолжим разработку.sidebar.phpДавайте добавим боковую панель.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Чтобы включить боковую панель на странице, вам необходимо…index.phpИзмените структуру основной содержащей области перед и после нее, а также используйте соответствующие инструменты или методы для реализации этих изменений.get_sidebar()Функция. Кроме того, необходимо создать ещё одну функцию.functions.phpФайл необходим для регистрации этого инструмента, предназначенного для использования в области боковой панели.
Реализация реактивного дизайна и стилей
Реактивный дизайн обеспечивает хорошее отображение вашего тематического контента на различных устройствах. Мы начнем с основной структуры CSS и использования медиаквери (media queries).
Настройка базовых стилей и модели гибких блоков (elastic box model)
Вашемstyle.cssПод комментариями к тематической информации необходимо добавить элементы, отвечающие за сброс стиля и формирование базовой верстки страницы. Использование технологии Flexbox для создания простой, реагирующей на изменения размера экрана верстки является хорошим стартовым пунктом.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Добавить медиаквери (media queries)
Медиа-запросы являются основой реактивного дизайна. Мы добавили простой контрольный пункт («брейкпойнт»): когда ширина экрана меньше 768 пикселей (что соответствует устройствам типа планшет), расположение основной области контента и боковой панели меняется с параллельного на стекаемое (когда одна из частей размещается поверх другой).
Рекомендуемое чтение Разработка тем WordPress: полное руководство от начального уровня до мастерства。
Во-первых, необходимо изменить структуру HTML-кода.index.phpОсновной контент и боковая панель должны быть обернуты в один контейнер.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Затем добавьте соответствующий стиль в CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Расширьте функциональность темы с помощью файла functions.php.
functions.phpФайлы являются своего рода “моторным отделением” вашей темы (проекта/решения), предназначенным для добавления новых функций, регистрации необходимых параметров, а также безопасного внедрения скриптов и стилей (форматов оформления пользовательского интерфейса).
Регистрация навигационного меню и области с мини-инструментами
Вfunctions.phpВ тексте используется выражение «в использовании».register_nav_menusФункция предназначена для регистрации позиции навигационного элемента (темы) в меню.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>После регистрации вы сможетеheader.phpиfooter.phpИспользуйте это в Китае.wp_nav_menu()Теперь функции могут использоваться для вызова этих меню.
Безопасное загрузочное выполнение стилей и скриптов
Никогда не делайте прямых ссылок (hard links) на файлы CSS или JavaScript непосредственно в файлы шаблонов. Для этого следует использовать другие методы интеграции.wp_enqueue_style()иwp_enqueue_script()Функция, и с помощью…wp_enqueue_scriptsДля загрузки этих элементов используются специальные «хватки» (hooks).
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
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_first_theme_scripts' );Создайте больше шаблонных файлов для расширения функционала.
В настоящее время у нас есть только одна тема.index.phpОно будет использоваться на всех страницах. Иерархия шаблонов WordPress определяет, какие более конкретные шаблоны будут искаться для разных типов страниц. Давайте создадим несколько таких шаблонов.
Отдельная статья и шаблон страницы
Создатьsingle.phpПредназначено для отображения отдельной статьи.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Создатьpage.phpИспользуется для отображения статических страниц. Его структура схожа с…single.phpПохоже, но обычно не отображается метаинформация, такая как категории и теги.
Для соблюдения принципа DRY (Don’t Repeat Yourself – Не повторяйте себя) мы можем выделить части содержимого статей и страниц и поместить их в отдельные компоненты-шаблоны (Template Parts). Создайте эти компоненты в корневом каталоге темы (theme root directory).template-partsСоздайте папку и внутри нее добавьте необходимые файлы или другие элементы.content-single.phpиcontent-page.php。
Шаблон страницы архива статей
Создатьarchive.phpЭтот элемент предназначен для отображения страниц архивации, включающих информацию о категориях, тегах, авторах и т. д. Его можно использовать повторно (то есть многократно в разных контекстах).index.phpВ цикле, который находится внутри, обычно отображается заголовок архива в верхней части экрана.
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?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>резюме
С помощью этого руководства вы создали базовую, но полноценную реактивную тему для WordPress. Вы ознакомились с основной структурой файлов темы, научились разделять компоненты шаблона (заголовок, футер, боковая панель), реализовали основные циклы работы WordPress, а также использовали CSS-медиаквери для формирования реактивного дизайна. Кроме того, вы освоили методы, позволяющие…functions.phpМы рассмотрим способы регистрации меню, плагинов и безопасного загрузки ресурсов в WordPress, а также познакомимся с мощной системой уровней шаблонов этого системного блога.
Разработка тем – это процесс, который постоянно углубляется. Далее вы сможете изучить ещё больше шаблонных файлов (например…).404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。
Часто задаваемые вопросы
Какие минимальное количество файлов требуется для создания темы для WordPress?
Самая простая тема, признанная системой WordPress, требует всего двух файлов:style.cssиindex.php。style.cssЗаголовок должен содержать корректные аннотации с информацией о теме.index.phpТогда это будет использоваться в качестве шаблона по умолчанию для всех страниц.
Как сделать так, чтобы моя тема поддерживала многоязычный перевод?
Вам нужно сделать две вещи. Во-первых,style.cssВсе заголовочные комментарии, а также места, где используется текст (например, через…)__()или_e()Для работы с функциями необходимо использовать текстовые поля (Text Fields). В данном руководстве мы используем текстовое поле с именем “my-first-theme”. Затем необходимо воспользоваться таким инструментом, как Poedit, чтобы создать файлы с расширением .pot, а затем перевести их на языки, для которых они предназначены (файлы с расширениями .po и .mo). После этого эти файлы следует разместить в соответствующих папках темы./languagesВ каталоге. Наконец,functions.phpИспользуйте это в Китае.load_theme_textdomain()Загрузка и перевод функций.
Почему мои пользовательские стили или скрипты не работают?
Обычно это происходит из-за того, что файлы не загружаются в нужном порядке не с использованием рекомендуемых методов WordPress. Пожалуйста, убедитесь, что вы следуете рекомендациям по организации процесса загрузки файлов в WordPress.functions.phpВ файле используется…wp_enqueue_style()иwp_enqueue_script()Функции и их подключение кwp_enqueue_scriptsДля добавления стилей и скриптов используются специальные “хватки” (hooks). Ссылки, написанные непосредственно в файле шаблона, могут быть проигнорированы кэширующими плагинами или загружаться в неправильном порядке в некоторых случаях.
Как добавить поддержку пользовательского логотипа для моей темы?
Это очень распространенная функция. Вам нужно…functions.phpВ функции настройки темы файла (через…)after_setup_themeДобавить выполнение скрипта через хук (hook).add_theme_support( 'custom-logo' )Вы можете передать массив параметров для определения размеров и других свойств логотипа. После его добавления пользователь сможет загрузить логотип в разделе “Внешний вид” -> “Настройки” -> “Идентификатор сайта”. На стороне клиента (фронтенде) вы можете использовать эти параметры для формирования отображения логотипа.the_custom_logo()Функция предназначена для её отображения.
Как отлаживать ошибки в PHP в процессе разработки?
Рекомендуется использовать локальную среду разработки.wp-config.phpВ файле включен режим отладки WordPress.WP_DEBUGКонстанта установлена наtrueВы также можете настроить несколько параметров одновременно.WP_DEBUG_LOGиWP_DEBUG_DISPLAYНеобходимо определить, следует ли отображать ошибки на экране или записывать их в файлы журнала. Помните: перед тем, как запустить приложение в реальных условиях, обязательно выключите режим отладки.
Что дальше, что дальше?
Расширенное чтение и практические знания
Следующие статьи связаны с темой этой статьи и подходят для дальнейшего углубленного чтения. Зачастую лучше начать с той статьи, которая наиболее близка к вашей текущей проблеме, а затем постепенно переходить к другим темам.
- Разработка тем для WordPress с нуля: создание уникального интерфейса веб-сайта
- Руководство по разработке тем для WordPress: Создание пользовательских сайтов с нуля
- Полное руководство по разработке тем для WordPress: практический курс от начала до мастерства
- Полное руководство по разработке тем для WordPress: создание профессиональных шаблонов веб-сайтов с нуля
- Практика разработки тем для WordPress: создание реагирующих корпоративных сайтов с нуля
Русский