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

Среда разработки и основные подготовительные работы

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

Настройка локальной среды разработки

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

Убедитесь, что ваша версия PHP составляет 7.4 или более, а версия MySQL — 5.6 или более. Это необходимо для совместимости с последними функциями и требованиями к безопасности WordPress.

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

Выбор основных инструментов и редакторов

Мощный кодовый редактор играет крайне важную роль в процессе разработки. Visual Studio Code является популярным выбором среди разработчиков фронтенда и для работы с системой WordPress. В сочетании с такими расширениями, как PHP Intelephense, WordPress Snippet и ESLint, он значительно улучшает качество и эффективность работы с кодом.

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

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

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

Кроме того, владение системой управления версиями Git является обязательным навыком. Использование Git с самого начала проекта позволяет отслеживать все изменения в коде, облегчает сотрудничество между участниками команды и обеспечивает возможность возврата кода к предыдущей версии. Рекомендуется хранить репозитории кода на платформах GitHub, GitLab или Bitbucket.

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

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

Однако структура современной темы с полным набором функций гораздо более сложна, чем это. Четкая организация содержимого облегчает ее долгосрочное обслуживание. Типичный каталог темы может включать в себя следующие элементы:
- /assetsЗдесь хранятся файлы CSS, JavaScript, изображений и шрифтов.
- /template-partsМесто для хранения повторно используемых фрагментов шаблонов, таких как заголовки и подзаголовки статей.
- /incМесто для хранения улучшенных файлов, таких как пользовательские функции, небольшие утилиты, короткие коды и т. д.

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

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

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

Стильные таблицы и файлы с функциями

style.css Примечания в заголовочном файле (header file) представляют собой блоки, в которых описывается тема данного файла. Вот простой пример:

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme built from scratch.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-awesome-theme
*/

Text Domain Используется для интернационализации; текст должен соответствовать тому, который будет передан функциям перевода в последующих вызовах.

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

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

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

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

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Понять порядок загрузки шаблонов.

Система уровней шаблонов в WordPress представляет собой иерархическую структуру, позволяющую системе искать нужные шаблоны в определенном порядке. Когда пользователь заходит на страницу отдельной статьи, WordPress последовательно ищет подходящие шаблоны в следующем порядке:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> В конце вернуться к исходному состоянию index.php。

Что касается страниц, то порядок следующий:front-page.php(Главная страница) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。

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

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

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

Кроме того, index.phpВам следует как можно скорее создать несколько важных шаблонов файлов, чтобы составить каркас веб-сайта.
- header.phpЗаголовок веб-сайта содержит: <head> Регионы, логотипы сайта и навигация.
- footer.phpВ нижней части сайта расположена информация об авторских правах и другие важные сведения.
- sidebar.phpБоковая панель.
- page.phpИспользуется для статических страниц.
- single.phpИспользуется для отображения отдельной статьи.
- archive.phpИспользуется для создания архивных списков статей (по категориям, тегам, страницам авторов и т. д.).

В основном шаблонном файле используйте… get_header()、get_footer()、get_sidebar() Для включения этих частей используются такие функции, как…

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

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

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

Функциональные особенности тем и основные аспекты их разработки

Отличная тема для сайта — это не просто красивый внешний вид; она должна также обладать мощными функциями и надежным («крепким» с точки зрения программирования) кодом. Эта часть статьи посвящена улучшению функционала тем и их глубокой интеграции с ядром системы WordPress.

Регистрационное меню и раздел с гаджетами.

WordPress позволяет пользователям настраивать меню в режиме администрирования. Вам необходимо… functions.php Используйте это в Китае. register_nav_menus() Функция предназначена для объявления поддержки тем (тематик) в разделе меню.

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'my-awesome-theme' ),
    'footer'  => __( 'Footer Menu', 'my-awesome-theme' ),
) );

Затем, в header.php Или в соответствующем месте используйте… wp_nav_menu( array( 'theme_location' => 'primary' ) ) Для вызова и отображения необходимо выполнить соответствующие действия.

Для использования раздела с маленькими инструментами (боковой панели) также требуется выполнение регистрации. register_sidebar() Функция:

register_sidebar( array(
    'name'          => __( 'Main Sidebar', 'my-awesome-theme' ),
    'id'            => 'sidebar-1',
    'description'   => __( 'Add widgets here.', 'my-awesome-theme' ),
    'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
    'after_widget'  =&gt; '</section>',
    'before_title'  =&gt; '<h2 class="widget-title">',
    'after_title'   =&gt; '</h2>',
) );

Циклы: движущая сила контента

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

Если ( have_posts() ) :
    Пока ( have_posts() ) : the_post();
    // Здесь выводим содержимое статьи, например:
    the_title( '<h2>', '</h2>'Поиск по тегам:  
&lt;?php if ( have_posts() ) :  
    while ( have_posts() ) :  
        the_post();  
        the_content();  
    endwhile;  
else :  
    _e( &#039;Извините, ни одна запись не соответствует вашим критериям.&#039;, &#039;my-awesome-theme&#039; );  
endif;

Внутри цикла вы можете использовать ряд шаблонных тегов. the_title()、the_content()、the_excerpt()、the_permalink() Итак, информация о статье будет выведена следующим образом:

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

Правильный способ включения ресурсов крайне важен для производительности и совместимости системы. Ни в коем случае не следует использовать ресурсы непосредственно в файлах шаблонов. <link> или <script> Эти теги должны быть использованы следующим образом: functions.php В китайском языке wp_enqueue_style() и wp_enqueue_script() Функция для добавления элементов в очередь.

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

function my_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 排入自定义 JavaScript 文件
    wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Расширенные темы и пользовательские функции

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

Пользовательские типы статей и системы их классификации

В WordPress изначально предусмотрены два типа контента: “Статьи” и “Страницы”. После регистрации пользовательских типов статей вы сможете легко управлять альбомами работ, товарами, мероприятиями и любым другим контентом. register_post_type() Функция реализуется аналогичным образом, с использованием… register_taxonomy() Можно создавать новые категории для статей типа CPT или обычных статей (например, по брендам, цветам и т. д.).

Интеграция настраиваемых элементов интерфейса (theme customizers)

Плагин WordPress Customizer позволяет пользователям в реальном времени просматривать и изменять настройки темы. Интеграция ваших настроек темы в этот плагин обеспечивает отличный пользовательский опыт. Вы можете добавлять панели, блоки информации и элементы управления (коллекторы цветов, функции загрузки изображений, слайдеры для выбора значений и т. д.). $wp_customize->add_setting()、$wp_customize->add_control() Такие API.

Подтемы и расширяемость

При разработке темы всегда следует учитывать её расширяемость. Использование действий-хуков (action hooks) и фильтров-хуков (filter hooks) является основой расширяемости WordPress. Размещайте эти элементы в коде темы стратегически, чтобы обеспечить максимальную гибкость и возможность дополнительных настроек. do_action() Хаки (hooks) – это специальные механизмы, предназначенные для взаимодействия с программным кодом. Их следует использовать разумно, с учетом целей и требований проекта. apply_filters()Плагин-разработчики или создатели дополнительных тем (сабтем) могут изменять внешний вид и поведение вашей темы без необходимости модификации основных файлов.

Создание подтемы является рекомендуемым способом безопасного изменения существующей темы. Для создания подтемы требуется всего один… style.css Это позволяет наследовать все функции родительской темы, а также изменять её шаблоны и функции. Такой подход считается лучшей практикой при настройке и обновлении тем.

резюме

Разработка тем для WordPress – это постепенный процесс, в ходе которого от изучения основной структуры системы до освоения её ключевой системы шаблонов и, в конечном итоге, до реализации сложных пользовательских настроек. Ключ к успеху заключается в соблюдении стандартов кодирования и рекомендаций WordPress, таких как правильное размещение скриптов, использование иерархии шаблонов, а также широкое применение системы хуков (hooks) для обеспечения возможностей расширения функционала. Начиная с создания простой темы, можно постепенно развивать её, добавляя новые функции и улучшая её внешний вид и поведение. style.css、functions.php Начните с базового шаблона и постепенно добавляйте меню, полезные инструменты, пользовательские элементы повторения (циклы) и стили. Всегда ставьте в приоритет удобство обслуживания и пользовательский опыт – так ваш шаблон сможет превратиться из простого дизайн-сета в мощный и удобный в использовании инструмент.

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

Для разработки темы для WordPress под названием #### необязательно знать PHP. Однако знание этого языка значительно упростит работу и позволит лучше понимать основы функционирования системы.
Да, PHP является основным языком программирования для WordPress, и для глубокого изучения процесса разработки тем необходимо владеть этим языком. Вам потребуется понимание основной синтаксиса PHP, функций, циклов и условных операторов, чтобы работать с тегами шаблонов, функциями-хуками (hooks) и запросами к базе данных в WordPress. Конечно, также важны фронтенд-технологии (HTML, CSS, JavaScript).

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

Чтобы ваша тема поддерживала многие языки (интернационализация и локализация), необходимо выполнить два основных шага. Во-первых, style.css \n Text Domain и все __()、_e() В функциях перевода следует использовать единый текстовый контекст. Кроме того, для автоматического сгенерирования переводов можно воспользоваться такими инструментами, как Poedit, которые сканируют файлы с тематическим контентом и выделяют нужные для перевода фрагменты текста. .pot Это шаблонный файл для перевода; переводчик может использовать его для создания собственных файлов, предназначенных для выполнения задач по переводу текстов. .po и .mo Файлы (например…) zh_CN.po). В functions.php Используйте это в Китае. load_theme_textdomain() Функция для загрузки перевода.

Как следует разграничивать функции тем (тематических блоков контента) и плагинов?

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

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

После завершения разработки темы необходимо провести полное тестирование на совместимость. Это включает в себя тестирование на разных версиях WordPress (особенно на последней версии); тестирование с использованием разных версий PHP (7.4+); проверку стилей и функциональности в нескольких основных браузерах (Chrome, Firefox, Safari, Edge); тестирование адаптивной верстки на разных устройствах (телефоны, планшеты, настольные компьютеры). Кроме того, следует использовать данные юнит-тестов WordPress-тем для проверки работы темы в различных сценариях контента.