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

Подготовка и настройка окружения

Прежде чем приступать к написанию кода, вам понадобится стабильная и профессиональная локальная среда разработки. Категорически не рекомендуется изменять файлы тем в режиме онлайн на сервере – локальная среда позволит вам свободно тестировать свои изменения, не влияя на нормальный доступ к сайту. Вы можете использовать программы для создания интегрированных сред разработки, такие как XAMPP, MAMP (для Mac) или Laragon (для Windows); эти программы позволяют одним кликом установить и настроить Apache, MySQL и PHP.

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

В конце концов, вам понадобится удобный кодовый редактор или интегрированная среда разработки. Visual Studio Code, PhpStorm и Sublime Text — отличные варианты, которые обеспечивают выделение синтаксиса, предложения по написанию кода и функции управления файлами, значительно повышая тем самым эффективность разработки.

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

Понимание основной структуры темы WordPress

Тема WordPress по сути расположена в /wp-content/themes/ Папка, находящаяся в каталоге, содержит ряд файлов и подпапок, которые соблюдают определенные правила. Эти файлы вместе обеспечивают работу системы WordPress и определяют внешний вид и содержимое веб-сайта.

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

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

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

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

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

Типичное примечание к заголовку темы выглядит следующим образом:

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

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

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

Помимо этих двух файлов, полнофункциональная тема обычно также включает в себя:header.php(Верхняя часть веб-страницы)footer.php(В нижней части веб-страницы)sidebar.php(Боковая панель) а также functions.php(Файл с улучшениями функционала тем). Понимая эту базовую структуру, вы получаете представление о каркасе разработки тем.

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

Теперь давайте начнем создавать первый тематический раздел (тему). В вашем… /wp-content/themes/ В каталоге создайте новую папку и назовите её, например, «NewFolder». my-first-themeЗатем создайте в этой папке самый простой из возможных файлов.

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

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

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

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

<main>
  
    
      <article>
        <h2></h2>
        <div></div>
      </article>
    
    <p>К сожалению, в настоящее время нет никакого контента для перевода.</p>
  
</main>

В этом коде используются теги-шаблоны. get_header(), get_sidebar(), get_footer(), the_title() и the_content()Чтобы это сработало, вам необходимо создать соответствующие файлы для верхней части страницы (header), боковой панели (sidebar) и нижней части страницы (footer).

Создать header.phpОно должно включать начальную часть HTML-документа до того момента, когда начинается основная часть содержимого.

<!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'
        ) );
      ?&gt;
    </nav>
  </header>

Здесь,wp_head() Это крайне важный механизм, который позволяет ядру WordPress, плагинам и темам вставлять необходимый код в верхнюю часть страницы (например, ссылки на стилевые таблицы).body_class() Функция возвращает список семантических имен CSS-классов, что облегчает точное настройство стилей.

Рекомендуемое чтение Основная архитектура и принципы работы WordPress。

Создать footer.php Чтобы закрыть открытую вкладку:

  <footer>
    <p>©</p>
    
  </footer>
</body>
</html>

Обратите внимание.wp_footer() Это связано с тем, что wp_head() Относительный хвостовой крючок также является неотъемлемой частью конструкции.

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

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

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

Создать sidebar.phpПока можно добавить только один простой элемент управления (контроль).

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

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

Расширение функционала темы с помощью файла Functions.php

functions.php Файл является своего рода “центром управления” вашей темой. Это не шаблонный файл, а PHP-файл, который автоматически загружается при инициализации темы. Он используется для добавления новых функций, регистрации компонентов и подключения к различным API-интерфейсам WordPress. Именно это играет ключевую роль в создании профессиональных и функционально совершенных тем.

Вам необходимо создать этот файл в корневом каталоге темы. Сначала давайте добавим в тему таблицы стилей и скрипты. Правильный способ — использовать функции, предоставляемые WordPress, чтобы выполнить необходимые действия, а не написать код непосредственно в HTML-коде. <link> Теги.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Здесь,wp_enqueue_style() и wp_enqueue_script() Это функция, предназначенная для безопасного добавления ресурсов.get_stylesheet_uri() соответствующего теме style.css。add_action() Монтируйте нашу функцию на… wp_enqueue_scripts Убедитесь, что этот механизм срабатывает в правильный момент.

Далее необходимо зарегистрировать навигационный меню и боковую панель (зону с инструментами):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Необходимо добавить в интерфейс “Внешний вид” → “Меню”, доступный в бэкенде, список позиций для выбора блюд.add_theme_support() Функции предназначены для активации различных функций тем (тематических настроек интерфейса), и это стандартная практика в современном разработческом процессе создания тем. Например, для активации определенных функций темы используются соответствующие функции. title-tag После этого вам больше не придется это делать. header.php \nРучное выведение на экран. <title> Метка добавлена.

Наконец, необходимо зарегистрировать область для размещения панелей инструментов (сайдбаров):

Функция my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Главная боковая панель', 'my-first-theme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Добавьте виджеты здесь.', 'my-first-theme' ),
        'before_widget' => '  Функция my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Главная боковая панель', 'my-first-theme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Добавьте виджеты здесь.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>'перед заголовком '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

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

резюме

С момента создания… style.css и index.php Начиная с определённой папки, необходимо создать отдельные компоненты шаблона (тематические модули), которые затем будут использоваться в процессе сборки конечного продукта.header.php, footer.phpЗатем – с использованием мощных… functions.php Меню регистрации файлов, боковая панель, а также безопасное загрузка ресурсов – вы уже прошли весь основной путь создания пользовательской темы для WordPress. Суть этого процесса заключается в понимании и соблюдении иерархии шаблонов и системы хуков (hooks) в WordPress.

Теперь вы уже не просто пользователь этих шаблонов, а их создатель. Обладая этими основными знаниями, вы сможете продолжить изучение более сложных файлов шаблонов. single.php、page.php、archive.phpИсследуйте дополнительные возможности циклов в WordPress и используйте условные теги (например, …) для реализации различных функций. is_page(), is_single()Это позволяет осуществлять более детальный контроль над содержимым страницы. Мир разработки тематических решений (тематического дизайна) обширен и увлекателен; это лишь надежная отправная точка для дальнейших действий.

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

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

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

Зачем обязательно использовать функции wp_head() и wp_footer()?

Эти две функции являются ключевыми хуками (core hooks) в WordPress.wp_head() Находится в </head> Перед этим тегом WordPress-ядро, плагины, а также ваше собственное тематическое оформление могут вставлять необходимый код в верхнюю часть страницы: ссылки на CSS-шаблоны, мета-теги, переменные JavaScript и т. д.wp_footer() Находится в </body> Эти теги обычно используются для вставки аналитического кода или JavaScript-файлов, загружаемых с отложением. Без них многие плагины не смогут работать корректно, а некоторые функции самого WordPress могут выдавать ошибки.

Как добавить шаблон страницы для моей темы?

Создайте новый PHP-файл, например, под названием `new_file.php`. page-fullwidth.phpВ начале этого файла вам необходимо добавить блок с комментарием, в котором указывается имя используемой шаблона. Например:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Затем вы можете написать в этом файле что-то, отличное от… page.php HTML-структура, например, с опущенными элементами… get_sidebar() После сохранения изменений, при редактировании страницы в backend WordPress в разделе “Свойства страницы” в выпадающем списке “Шаблоны” появится опция “Полноэкранная страница” для выбора.

Какие считаются лучшими практиками использования CSS и JavaScript при разработке тем?

Лучшей практикой является использование инструментов, предоставляемых системой WordPress. wp_enqueue_style() и wp_enqueue_script() Функция… functions.php Прикреплено к… (It’s mounted to…) wp_enqueue_scripts Используйте хуки для добавления ресурсов. Такой подход позволяет: 1) правильно обрабатывать зависимости (например, если ваш скрипт зависит от jQuery); 2) избегать повторной загрузки одного и того же ресурса; 3) упрощать управление плагинами и кодом других тем; 4) соответствовать стандартам кодирования WordPress. Обязательно избегайте прямого использования в файлах шаблонов. <link> или <script> Ресурсы, связанные с использованием тегов, являются жестко закодированными (то есть их содержимое не может быть изменено в процессе работы программы).

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

Вам нужно сделать две вещи. Во-первых, style.css При переводе текста, включающего заголовочные комментарии и элементы, используйте соответствующий “текстовый домен” (Text Domain). Как указано в руководстве, необходимо правильно определить структуру и содержимое этих элементов. Text Domain: my-first-theme. Во-вторых, в functions.php Во всех шаблонных файлах текст пользовательского интерфейса, который требуется перевести, следует обернуть функциями перевода WordPress. Наиболее распространенным способом является использование функций, предоставляемых системой для работы с переводами. __()(Вернуться к переведенной строке) и _e()(Прямое отображение переведенного текста.) Например:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>После этого вы можете использовать такие инструменты, как Poedit, для создания нужного результата. .pot Шаблонный файл, предназначенный для создания переводов на разные языки переводчиками. .po и .mo Документ.