Разработка собственной темы для WordPress является отличным способом глубоко понять структуру этой платформы и улучшить свои навыки фронтенд-разработки. В отличие от использования готовых тем, создание темы с нуля дает вам полный контроль над ее функционалом, позволяя создавать уникальные сайты, идеально соответствующие требованиям вашего проекта. В этой статье вы узнаете, как пошагово создать базовую, но полнофункциональную тему для WordPress.
Настройка среды разработки и структуры тем (Themes)
Прежде чем начинать писать код, вам понадобится локальная среда разработки. К ней обычно относятся набор инструментов для запуска локального сервера (например, XAMPP, MAMP или Local by Flywheel), текстовый редактор (например, VS Code) и последняя версия системы управления контентом WordPress.
Во-первых, в WordPress… <code>wp-content/themes</code> В каталоге создайте папку для вашей новой темы, например: <code>my-custom-theme</code>Для создания базовой темы для WordPress необходимо наличие по меньшей мере двух основных файлов.
Рекомендуемое чтение Полное руководство по разработке тем для WordPress: создание собственных тем с нуля。
Создать файл с таблицей стилей
Первый необходимый файл является… style.cssВ этом файле не только определены стили темы, но и в комментариях в заголовке файла содержатся метаданные, описывающие тему для WordPress. Пожалуйста, добавьте следующие комментарии в начало файла:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Понятие ”Text Domain” используется для обеспечения поддержки международных языков (иностранных версий сайта); его имя должно совпадать с именем вашей тематической папки (папки, содержащей все файлы, связанные с конкретной тематикой сайта). После этого вы можете добавлять все необходимые CSS-правила в этот файл.
Создать файл с основными функциями
Вторым необходимым файлом является… functions.phpЭто “мозг” темы (theme), который отвечает за загрузку таблиц стилей (style sheets), файлов JavaScript, регистрацию элементов меню и боковых панелей, а также за добавление различных функциональных возможностей.
Основной functions.php Обычно начало такого файла выглядит следующим образом; он используется для добавления таблиц стилей в очередь обработки:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );В данный момент, хотя ещё нет ни одного шаблонного файла, ваша тема уже может быть отображена в списке тем в разделе “Внешний вид” -> “Темы” в панели управления WordPress и активирована. После активации на веб-сайте будет отображаться пустая страница — это происходит из-за отсутствия шаблонов, необходимых для определения структуры страницы.
Рекомендуемое чтение Практическое руководство по разработке тем для WordPress: создание собственной архитектуры тем и шаблонов с нуля。
Создание основного шаблонного файла
Файлы-шаблоны контролируют способ отображения различных частей веб-сайта. WordPress определяет, какой шаблон использовать для текущего запроса, на основе иерархии шаблонов.
Создание общих элементов верхней и нижней части страницы всего сайта
Лучшая практика — отделить общий код верхней и нижней частей. Создайте header.php Файл обычно содержит информацию о типе документа (декларацию типа документа). Регион, а также его активация (открытие). Теги и главная навигация.
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>Соответственно, создать footer.php Пришло время закрыть это. header.php Основной контейнер и теги, открытые внутри…
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>wp_head() и wp_footer() Это ключевые механизмы, позволяющие ядру WordPress, плагинам и самим темам вставлять необходимый код (например, стили, скрипты) в определенные места.
Создание индекса и шаблона статьи
index.php Это файл, предназначенный для возврата к исходной структуре шаблонов, и в то же время является отправной точкой для нашей темы. В нем используется… get_header() и get_footer() Для включения отдельных модулей используется следующий подход:
<article>
<h2><a href="/ru/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p>Статьи нет.</p>Для отдельного отображения отдельной статьи было создано… single.phpЕго структура схожа со… index.php Похоже, но используется… the_content() Чтобы отобразить полный текст, нажмите кнопку «Показать полный текст».
Рекомендуемое чтение Введение в разработку тем для WordPress — создание вашей первой пользовательской темы с нуля.。
<article>
<h1></h1>
<div></div>
</article>Улучшение функционала тем (Enhancement of theme features)
После создания базовой структуры мы продолжаем работу следующим образом: functions.php Давайте добавим ещё несколько полезных функций, чтобы тема стала более профессиональной и удобной в использовании.
Регистрация навигационного меню и боковой панели
В functions.php Добавьте следующий код, чтобы реализовать регистрацию основной навигационной меню и боковой панели (региона с полезными инструментами):
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>'перед заголовком '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );После регистрации вам необходимо будет использовать эти элементы (или функции) в соответствующих шаблонах. Например, header.php Мы уже использовали это. wp_nav_menu Был вызван меню “primary”. Чтобы отобразить плагины в боковой панели, необходимо… sidebar.php Создайте шаблон боковой панели и разместите его в соответствующем месте. index.php или single.php Используйте это в Китае. get_sidebar() Введение.
Добавить поддержку функции выбора темы.
WordPress предоставляет множество встроенных функций, которые можно использовать в темах только после явного указания их поддержки. Например, для добавления миниатюр статей (изображений-заголовков), настройки пользовательского логотипа или использования HTML5-тегов необходимо выполнить соответствующие настройки.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );После добавления поддержки для элементов типа “post-thumbnails” вы сможете использовать их в циклах, отображающих списки статей. the_post_thumbnail() Функция теперь выдает изображения с особыми эффектами/характеристиками.
Дизайн стилей и реактивное размещение элементов интерфейса (респонсивный лей아ут)
Красивый и универсальный дизайн темы, подходящий для различных устройств, играет ключевую роль. Вы можете… style.css Все стили следует разрабатывать внутри данного документа. Рекомендуется придерживаться подхода, приоритетом в котором является поддержка устройств с мобильным интерфейсом (мобильные устройства).
Базовые стили и форматирование
Во-первых, необходимо настроить стили и основные параметры форматирования текста, чтобы обеспечить единообразное отображение во всех браузерах.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}Реализация реактивного дизайна
Используйте медиаквери для настройки расположения элементов интерфейса в зависимости от размера экрана. Например, при уменьшении размера экрана меняйте навигационный меню на вертикальное расположение элементов.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}Убедитесь, что изображения также являются реагирующими (адаптирующимися к различным размерам экранов):
img {
max-width: 100%;
height: auto;
}резюме
После выполнения вышеуказанных шагов вы успешно создали полнофункциональный пользовательский тематический файл для WordPress. Давайте рассмотрим процесс настройки среды разработки и создания самых основных элементов этого тематического файла. style.css и functions.php Файл начинается с постепенного создания основных шаблонных файлов.header.php, footer.php, index.php, single.phpМы также улучшили практические функции этого тематического дизайна: добавили меню для регистрации, боковую панель и возможность использования специальных изображений. Кроме того, мы применили базовые стили и реагирующий (адаптивный) дизайн, чтобы страница хорошо отображалась на различных устройствах. Это лишь начало – вы можете продолжить развивать этот проект, создавая собственные шаблоны страниц.page.phpАрхивационные шаблоны (Archive Templates)archive.phpПоисковые шаблоны (Search Templates)search.phpМожно даже использовать подтемы (subtopics) для дополнительной настройки, чтобы создать ещё более мощный и профессиональный веб-сайт.
Часто задаваемые вопросы
Для разработки тем для WordPress необходимо овладеть следующими технологиями:
Для создания базовой темы для WordPress необходимо овладеть языками HTML, CSS и PHP. HTML используется для построения структуры страниц, CSS – для разработки стилей и оформления, а PHP является основой для работы с динамическим контентом в WordPress. Также полезно знать основы JavaScript для добавления интерактивных элементов. Важно понимать ключевые концепции WordPress, такие как иерархия шаблонов, циклы (The Loop), хаки (Hooks) и функции (Functions), чтобы успешно разрабатывать темы.
Что делает файл functions.php в соответствующей теме (theme)?
functions.php Файл, являющийся частью темы для WordPress, играет ключевую роль в определении функциональности этой темы. Основные задачи этого файла включают: добавление файлов CSS и JavaScript в очередь обработки, регистрацию навигационных меню и элементов панели боковых инструментов, указание поддерживаемых темой функций (например, возможности создания миниатюр статей, настройки пользовательского логотипа), определение пользовательских функций, а также изменение стандартного поведения WordPress с помощью хуков (action hooks) и фильтров (filter hooks). Благодаря этому вы можете значительно расширять и настраивать функциональность темы, не внося изменений в сами исходные файлы WordPress.
Как сделать так, чтобы моя тема поддерживала несколько языков?
Чтобы тема поддерживала несколько языков (интернационализация), необходимо выполнить два основных шага. Во-первых, style.css Во всех случаях, где используется термин “Text Domain”, необходимо придерживаться единообразия в использовании этого текстового домена; он обычно совпадает с названием папки, содержащей соответствующие материалы. Кроме того, при подготовке строк для перевода следует применять встроенные функции перевода WordPress. __()、_e() или _x()Затем вы можете использовать такие инструменты, как Poedit, для создания нужного контента. .pot Шаблонные файлы, а также генерируемые на их основе результаты выполнения задач. .po и .mo Переведите файл. Разместите переведенный файл в соответствующем разделе темы. /languages В каталоге WordPress автоматически загружает файлы в соответствии с настройками языка сайта.
В чем преимущества создания подтемы по сравнению с прямым изменением основной темы?
Создание подтем является одной из лучших практик для модификации или расширения функционала существующей родительской темы. Основное преимущество этого подхода заключается в повышении уровня безопасности: при публикации обновлений для родительской темы вы можете безопасно обновить её, при этом ваши собственные изменения (стили, функции, шаблоны), внесённые в подтему, не будут утеряны. Для подтемы достаточно наличия всего одного… style.css И один необязательный (опциональный) элемент. functions.php Файл готов к использованию. В подтеме… style.css В @import Можно воспользоваться более эффективным способом формирования очередей для внедрения стилей родительской темы, а затем добавить собственные CSS-правила для их переопределения. Для подтем… functions.php Файл с таким же названием, как и у главной темы, будет загружен одновременно с ней, а не заменит её, что позволит вам безопасно добавлять новые функции.
Что дальше, что дальше?
Расширенное чтение и практические знания
Следующие статьи связаны с темой этой статьи и подходят для дальнейшего углубленного чтения. Зачастую лучше начать с той статьи, которая наиболее близка к вашей текущей проблеме, а затем постепенно переходить к другим темам.
- Основные концепции и практические подходы к использованию Tailwind CSS: от атомарных классов до реактивного дизайна
- Полное руководство по созданию веб-сайтов: полный процесс от идеи до запуска и анализ основных технологий
- Подробное руководство по всему процессу создания веб-сайта: от анализа требований до его запуска в эксплуатацию
- Разработка тем для WordPress с нуля: создание уникального интерфейса веб-сайта
- Полное руководство по созданию веб-сайтов: практические советы от нуля до профессионального запуска
Русский