От новичка до профессионала: пошаговое руководство по созданию персонализированных и высокопроизводительных тем WordPress.

Настройка среды для разработки тем WordPress.

Чтобы начать создавать свою тему для WordPress, сначала необходимо настроить эффективную среду разработки. Это не только позволит вам безопасно тестировать её локально, но и значительно повысит эффективность разработки.

Типичная среда разработки включает в себя локальное серверное программное обеспечение, редактор кода и систему контроля версий. Для локального сервера вы можете выбрать такие интегрированные инструменты, как XAMPP, MAMP или Local by Flywheel, которые позволяют установить Apache, MySQL и PHP одним щелчком мыши. Что касается редактора кода, отличным выбором будут Visual Studio Code, PhpStorm или Sublime Text, которые предоставляют мощные функции автозаполнения кода и отладки.

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

Рекомендуемое чтение Как разработать собственную тему для WordPress с нуля: полное руководство.。

Создание основного документа по теме.

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

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

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

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

Вstyle.cssВ начале документа вам необходимо добавить блок комментариев в следующем формате:

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

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

<main id="main-content">
    <p>Если есть записи:</p>
    &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // Отображаем содержание статьи
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>Нет найденных статей.</p>';
        endif;
    ?&gt;
</main>

Анализ структуры темы и иерархии шаблонов.

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

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

Когда пользователь посещает ваш сайт, WordPress ищет шаблонные файлы в соответствии с определёнными правилами. Например, при посещении отдельной статьи WordPress ищет её по следующему порядку:single-post-{slug}.php、single-post-{id}.php、single.phpИ наконец, самое главное.singular.phpиindex.phpЧто касается страниц, то будет производиться их поиск.page-{slug}.php、page-{id}.php、page.phpИ только после этогоsingular.php。

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

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

\nСоздание часто используемых шаблонных файлов.

Кроме того,index.phpОбычно полнофункциональная тема включает в себя набор стандартных шаблонов.header.phpДокумент определяет все элементы заголовка веб-сайта, включая декларацию DOCTYPE.Например, навигационные меню в разделах и заголовках. Вы можете использовать их.wp_head()Функция позволяет WordPress и плагинам вставлять здесь необходимый код (например, CSS и JS).

footer.phpФайл содержит информацию о нижней части страницы веб-сайта, такую как уведомление об авторских правах и область виджетов, и используетwp_footer()Функция.functions.phpФайл является “функциональным центром” темы, в котором вы можете добавлять функции, настраивать меню, боковую панель и импортировать файлы CSS и JavaScript без необходимости вносить изменения в основные файлы.

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

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

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

Боковая панель обычно определяется в style="display: none;".sidebar.phpА вот краткое или полное изложение содержания статьи можно предоставить, создавcontent.phpилиcontent-single.phpМодульное обработка таких шаблонов помогает сохранять код простым и многократно используемым.

Добавьте основные функции для вашей темы.

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

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

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

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

function my_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

После регистрации пользователи могут назначить меню для этих позиций в разделе “Внешний вид” -> “Меню” в административной панели WordPress. В шаблонных файлах (например,header.phpВ этом примере используетсяwp_nav_menu()Функция для отображения меню.

Аналогично, используйтеregister_sidebar()Функции могут создавать области для виджетов (или так называемые “боковые панели”). Вы можете зарегистрировать области для виджетов в таких местах, как боковая панель блога или нижняя часть страницы, чтобы пользователи могли свободно перетаскивать и добавлять туда текст, категории, последние статьи и другие виджеты.

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

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

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

Включите функцию темы и добавьте скрипт стилей.

WordPress — этоafter_setup_themeКрючки — это идеальное место для активации тематических функций. Здесь вы можете использоватьadd_theme_support()Функции, объявляющие поддерживаемые темой возможности, такие как “Миниатюры статей” (изображения в виде превью), “Пользовательские логотипы”, поддержка HTML5 для форм и форм поиска, а также “Автоматические ссылки на ленты новостей” и т. д.

Правильное добавление файлов CSS и JavaScript в очередь — это лучшая практика для обеспечения производительности и совместимости темы. Вы должны использоватьwp_enqueue_style()иwp_enqueue_script()Функция, и эти вызовы будут зарегистрированы вwp_enqueue_scriptsНа крючке. Это позволяет WordPress управлять зависимостями, избегать повторной загрузки и облегчать переопределение подтемами.

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 加载主JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Обеспечить оптимизацию производительности и интернационализацию темы.

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

Стратегия оптимизации производительности фронтенда.

Производительность темы напрямую влияет на скорость загрузки сайта и его рейтинг в поисковых системах. Оптимизация изображений, использование асинхронной загрузки и отложенной загрузки JavaScript, а также сокращение количества HTTP-запросов — это распространенные методы. На уровне разработки темы вы можете оптимизировать ее с помощью стратегий загрузки скриптов.

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

Кроме того, убедитесь, что ваши CSS-файлы оптимизированы и объединены, а неиспользуемые стили удалены. Поддерживайте чистоту кода во время разработки, избегая чрезмерного использования встроенных стилей или скриптов в HTML-коде.

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

Интернационализация (i18n) означает, что ваша тема должна быть выполнена в формате, удобном для перевода. WordPress использует__()、_e()Это можно сделать с помощью таких функций, как gettext(). Вам необходимо обернуть все ориентированные на пользователя строки этими функциями и предоставить текстовой домен (Text Domain), который обычно совпадает с названием тематической папки и уже был зарегистрирован в gettext().style.cssЗаголовок заявления.

Пример:echo __( ‘阅读更多’， ‘my-first-theme’ );Переводчики могут создавать.poи.moДля перевода документов пользователю достаточно установить соответствующий языковой пакет, и интерфейс темы автоматически переключится на выбранный язык.

В то же время, используйтеget_template_directory_uri()Вместо того, чтобы жестко кодировать URL для ссылок на ресурсы в теме (например, изображения, CSS, JS), это гарантирует, что тема будет корректно работать и в подтемах.

резюме

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

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

Какие языки программирования необходимо знать для разработки темы WordPress?

Для разработки темы WordPress необходимо хорошо владеть языками PHP, HTML, CSS и JavaScript. PHP используется для обработки логики на стороне сервера и вызова основных функций WordPress; HTML отвечает за структуру страницы; CSS применяется для оформления и верстки; а JavaScript реализует интерактивные эффекты и динамические функции на стороне клиента.

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

Вы можете использовать API WordPress для создания профессиональной страницы настроек для темы. Это включает в себя использованиеadd_menu_page()илиadd_submenu_page()Добавьте страницу функции, а затем используйте её.register_setting()、add_settings_section()иadd_settings_field()Используйте такие функции, как register_setting(), register_region() и register_field(), для регистрации настроек, областей и полей. Более продвинутый и удобный способ — использовать такие пользовательские фреймворки, как Kirki, для быстрого создания привлекательных панелей настроек.

Каковы преимущества создания подтем? Как их создавать?

Основное преимущество создания дочерней темы заключается в том, что вы можете настраивать, добавлять или переопределять функциональность и стиль родительской темы без изменения её исходного кода. Это гарантирует, что ваши настраиваемые изменения не будут перезаписаны при обновлении родительской темы, что значительно повышает безопасность и удобство обслуживания. Создать дочернюю тему очень просто: достаточно просто следовать инструкциям.wp-content/themesСоздайте новую папку в каталоге и в ней создайте файл, содержащий определённую заголовочную информацию.style.cssДокумент, через@importилиwp_enqueue_styleВведите стиль родительской темы, а затем вы сможете переопределить шаблон родительской темы, создав шаблонный файл с таким же названием.

Почему после изменения темы я не вижу никаких изменений на главной странице?

Это обычно происходит из-за кэширования в браузере или механизма кэширования WordPress. Сначала попробуйте выполнить принудительное обновление в браузере (обычно Ctrl+F5 или Cmd+Shift+R). Если проблема сохраняется, проверьте, правильно ли вы сохраняете файлы, и убедитесь, что вы редактируете файлы активной темы. Кроме того, если у вас есть сервер или плагин кэширования, возможно, потребуется очистить кэш сервера или плагина, чтобы увидеть последние изменения. Во время разработки рекомендуется временно отключить плагин кэширования.