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

Что такое тема WordPress?

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

Понимание различий между темами (templates) и плагинами (plugins) крайне важно. Темы отвечают за внешний вид и структуру представления информации на веб-сайте, в то время как плагины предназначены для добавления определенных функций. Эти функции, по сути, должны быть независимы от внешнего вида сайта. Одной из хороших практик разработки является соблюдение принципа специализации тем: сложные функциональные логики следует реализовывать с помощью плагинов. Это позволяет избежать потери основных функций при смене темы в будущем.

Создание среды разработки

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

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

Выберите программное обеспечение для локального сервера.

Для локального развития часто используются такие инструменты, как XAMPP, MAMP, Local by Flywheel и DevKinsta. Эти инструменты создают на вашем компьютере среду, имитирующую работу веб-сервера, PHP-скриптов и MySQL-базы данных. Среди них Local by Flywheel пользуется особой популярностью среди разработчиков благодаря поддержке WordPress, возможности однокликовой установки и удобствам в управлении сайтом. Независимо от выбранного инструмента, цель всегда одна и та же: быстро создать среду, подходящую для работы с PHP и MySQL.

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

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

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

Установка основной части WordPress (его ядра)

После настройки локальной серверной среды необходимо установить новую версию WordPress. Обычно можно скачать последнюю сжатую версию программы с официального сайта WordPress, а затем распаковать её в корневой каталог веб-сайта на локальном сервере (например, в каталоге, созданном при использовании пакета XAMPP).htdocsЗатем перейдите в этот папку через браузер.localhost/your-site-nameСогласно известным шагам установки (“установка за пять минут”), создайте базу данных и завершите процесс установки. Обязательно установите для локальной базы данных префикс, отличный от префикса, используемого в онлайн-среде, чтобы повысить уровень безопасности.

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

Самая упрощенная тема для WordPress может функционировать с использованием всего двух файлов:style.cssиindex.phpОднако эти файлы должны соответствовать определённым правилам наймения их имён и находиться в правильных местах.

Необходимый файл стилей (stylesheet file)

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
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” используется для целей интернационализации (перевода текстов) и должен соответствовать параметру, который будет задан позже в коде на PHP.load_theme_textdomain()Области, указанные при вызове функции, совпадают.

Рекомендуемое чтение Полное руководство по разработке тем для WordPress: создание профессиональных реагирующих сайтов с нуля。

Файл шаблона главной страницы

index.phpЭто предустановленный резервный шаблон для данной темы. Если существуют более конкретные шаблоны (например…single.phpилиpage.phpЕсли файла wp-config.php не существует, WordPress вернётся к его использованию. Самый простой способindex.phpМожно использовать только базовую структуру, включающую вызов заголовочной части сайта, основного цикла и футера.

<main id="primary" class="site-main">
    <p>Если есть записи:</p> <p>Пока есть записи:</p> <p>Показываем содержание записи:</p> <p>Заканчиваем цикл:</p> <p>Если нет записей:</p> <p>Выводим сообщение:</p> <p>Заканчиваем if-else:</p> <p>Выводим код завершения:</p> <p>Закрываем тег PHP:</p> <p>Окончание программы:</p>
</main>

Этот файл содержит ссылки на другие файлы или ресурсы.get_header()иget_footer()Функция, это означает, что вам необходимо создать соответствующую функцию.header.phpиfooter.phpДля нормального функционирования необходимы файлы и соответствующие темы (тематические настройки).

Основной шаблонный файл и его иерархическая структура

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

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

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

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

Понимание порядка вызова шаблонов

Когда пользователь заходит на страницу, WordPress ищет файл шаблона в соответствии с типом текущего запроса (это главная страница, отдельная статья, страница категории, архив категорий или результаты поиска) на основе заранее определенного списка приоритетов. Например, для отдельной статьи WordPress последовательно ищет файл шаблона в следующем порядке:
1. single-{post-type}-{slug}.php (Например, single-book-mystery.php)
2. single-{post-type}.php (Например, single-book.php)
3. single.php
4. singular.php
5. index.php

Разработчики могут точно контролировать способ отображения различного контента, создавая файлы с определенными именами. Например, для пользовательского типа статей “Продукт” можно создать уникальный файл, содержащий настройки отображения этого типа статей.single-product.phpШаблон.

Создание часто используемых шаблонных компонентов

Для соблюдения принципа DRY (Don’t Repeat Yourself – Не повторяйте себя) в темах WordPress части кода, используемые повторно, обычно выделяются в отдельные файлы-шаблоны.

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

header.phpФайлы обычно содержат объявления типов документов,Регион (через)wp_head()В выводе данных используются важные метаданные, идентификатор сайта, главное навигационное меню и другие элементы. В конце файла указывается…Начало размещения тегов и основного содержимого страницы.

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

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

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

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

Еще один крайне важный документ – это…functions.phpХотя это и не является шаблонным файлом, он выполняет роль “центра функциональности” темы. Здесь вы можете добавлять функции, необходимые для работы с темой, регистрационные меню и боковые панели, включать стилевые таблицы и скрипты, а также определять различные пользовательские функции.

Добавление стилей и интерактивных функций

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

Правильный способ включения таблицы стилей:

Хотя стиль можно написать непосредственно…style.cssВ некоторых случаях это приемлемо, однако лучшей практикой считается использование другого подхода.functions.phpИспользуйте это в Китае.wp_enqueue_style()Функции предназначены для включения элементов стилей в таблицу стилей. Это обеспечивает правильное управление зависимостями между элементами стилей и их порядок загрузки. Например:

function my_first_theme_styles() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_styles' );

Здесь,get_stylesheet_uri()Функция автоматически загружает основной стильный шаблон темы.style.cssЭто URI.

Безопасное добавление JavaScript-кода

Файлы на JavaScript также должны быть проверены (или одобрены) для использования.wp_enqueue_script()Функции следует организовывать таким образом, чтобы избежать повторного загруза и конфликтов между ними, а также чтобы можно было использовать встроенные библиотеки WordPress (например, jQuery). Распространенным примером является добавление интерактивных элементов для переключения режимов отображения навигационного меню в мобильном режиме.

function my_first_theme_scripts() {
    wp_enqueue_script( 'main-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Последний параметрtrueЭто означает, что скрипт загружается в нижней части страницы (в футере), что, как правило, способствует улучшению её загрузочной скорости.

резюме

Разработка тем для WordPress – это процесс преобразования креативных идей в функциональные веб-сайты, который требует от разработчиков знания как фронтенд-технологий (HTML, CSS, JavaScript), так и специфической бэкенд-логики WordPress (PHP, иерархия шаблонов, функции-хаки). Процесс начинается с создания безопасной локальной среды разработки и продолжается созданием файлов темы, содержащих необходимую метаинформацию.style.cssОт использования базовых шаблонных файлов до реализации точного контроля над содержимым страниц с помощью мощной иерархии шаблонов – каждый шаг крайне важен. Следует соблюдать основные стандарты программирования.functions.phpПравильное размещение ресурсов и извлечение повторно используемых элементов в виде шаблонов не только повышает эффективность разработки, но и обеспечивает стабильность, безопасность и удобство обслуживания сайта. Овладев этими основами, вы сможете создавать дизайн сайтов, который полностью соответствует требованиям пользователей и обладает уникальным стилем.

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

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

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

Могу ли я внести изменения в существующую тему?

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

Как опубликовать созданный продукт (например, приложение, сайт или другой ресурс) для использования другими пользователями после его завершения разработки?

Во-первых, вам необходимо тщательно проверить код, соблюдая стандарты проверки тем WordPress, убедиться в отсутствии уязвимостей безопасности и выполнить необходимые подготовительные работы, включая интеграцию функций для поддержки международного использования (использование функций перевода). Затем тему можно архивировать в формате ZIP-файла. Для публикации темы на публичных платформах наиболее распространенным вариантом является размещение в официальном каталоге тем WordPress, однако перед отправкой тема должна пройти строгую ручную проверку. Также вы можете распространять тему на своем собственном сайте или через сторонние рынки.

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

Необходимо, чтобы это было сделано в рамках определенной темы (тематики).functions.phpВ документе используютсяregister_sidebar()Функция предназначена для регистрации области, используемой для размещения плагинов (также называемой “боковой панелью”). Необходимо задать имя этой области, её ID, описание, а также HTML-теги, которые будут использоваться для её оформления с обеих сторон (спереди и сзади). После регистрации этих данных их следует внести в соответствующие шаблонные файлы.sidebar.phpилиfooter.phpИспользуйте его в своём резюме.dynamic_sidebar()Функция предназначена для вызова и отображения своего содержимого.

Что такое интернационализация и локализация тем (topics)?

Интернационализация (i18n) означает процесс замены всех пользовательских текстовых строк в проекте на этапе разработки с использованием специальных функций WordPress для перевода.__()или_e()Пакетация позволяет сделать тему переводимой. Локализация (l10n) – это процесс создания для темы файлов с переводами на конкретный язык (например, китайский) после её публикации (файлы с расширениями .po или .mo). Благодаря этому ваша тема становится доступна пользователям по всему миру.