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

Почему стоит разработать собственную тему WordPress

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

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

Подготовка среды и инструментов

Прежде чем писать первую строку кода, крайне важно создать эффективную локальную среду разработки. Это позволит вам свободно тестировать и отлаживать всё, не затрагивая рабочий сайт. Вы можете выбрать интегрированное программное обеспечение для среды, такое как Local by Flywheel, XAMPP или MAMP, которое позволяет одним щелчком установить Apache, MySQL и PHP. Убедитесь, что используемая вами версия PHP соответствует требованиям вашей установки WordPress, обычно это версия 7.4 или выше.

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

Редактор кода — ваше главное оружие. Visual Studio Code, PhpStorm или Sublime Text — все это мощные варианты, они предоставляют подсветку синтаксиса, автодополнение кода и инструменты отладки, что может значительно повысить эффективность разработки. Кроме того, вам также понадобится современный браузер (например, Chrome или Firefox) и его инструменты разработчика для отладки HTML, CSS и JavaScript в реальном времени.

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

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

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

Наконец, вам потребуется новая, чистая установка WordPress. Не проводите тестирование разработки темы напрямую на вашем основном бизнес-сайте. После завершения установки в панели управления выберите в разделе “Настройки -> Постоянные ссылки” структуру ссылок, отличную от используемой по умолчанию (например, “Название записи”), — это поможет с самого начала настроить правильные правила перезаписи.

Создать базовую файловую структуру темы

Тема WordPress по сути расположена в/wp-content/themes/Папки в каталоге содержат ряд файлов определённого назначения. Давайте начнём создавать их с самых основных файлов.

Во-первых, в вашем…/wp-content/themes/Создайте новую папку в каталоге и назовите её вашей темой, например:my-first-theme. Все файлы темы будут размещены здесь.

Затем создайте два абсолютно необходимых основных файла. Первый — это файл таблицы стилейstyle.cssЕго заголовочный комментарий не только используется для определения стилей, но и является “удостоверением личности”, по которому WordPress распознаёт тему. Его содержимое должно быть следующим:

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

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的入门级 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Вторым необходимым файлом является…index.phpЭто шаблон по умолчанию для всех страниц. В качестве отправной точки он может представлять собой самую базовую PHP/HTML-структуру всего сайта:

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    <header>
        <h1>Моя первая тема</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Мой веб-сайт</p>
    </footer>
    
</body>
</html>

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

Понимание и применение иерархии шаблонов

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

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

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

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

Процесс работы WordPress можно упростить следующим образом: когда страница запрашивается, система ищет файл шаблона на основе типа страницы (например, статья, страница, архив категории) и определенных условий (например, ID статьи, слаг категории), используя четкий список приоритетов. Например, для отдельной статьи в блоге WordPress будет искать файл шаблона в следующем порядке:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpИ наконец,singular.phpПроцесс продолжается до тех пор, пока не будет найден хотя бы один существующий файл. Если ни одного файла не найдено, система в конечном итоге вернется к исходному состоянию (то есть к начальным настройкам или действиям).index.php。

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

Затем создайтеpage.phpДля отображения отдельной страницыsingle.phpИспользуется для отображения отдельной статьи. В этих шаблонах можно использоватьthe_title()иthe_content()и другие шаблонные теги для вывода определённого содержимого.

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

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

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

Одно из основных и важных применений — регистрация меню и боковых панелей (областей виджетов). Например, использованиеregister_nav_menus()Функция для объявления расположений навигационного меню темы:

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

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

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

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

Также вы можете использоватьregister_sidebar()функцию для создания области виджетов. Другая ключевая задача заключается в том, чтобы с помощьюadd_theme_support()Функции включают для вашей темы различные возможности, такие как миниатюры записей, пользовательский логотип, поддержку форм HTML5 и многое другое.

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

Применение стилей и добавление интерактивности

Тема без стилей — это всего лишь каркас. Написав CSS, вы можете определить визуальный облик сайта, включая макет, цвета, шрифты и адаптивный дизайн. Рекомендуется организовывать ваш CSS-код модульным образом; можно рассмотреть использование препроцессора, такого как Sass, но основой по-прежнему остаётся пониманиеstyle.cssнаписание.

Чтобы обеспечить кроссбраузерную совместимость и адаптивную вёрстку, ваш CSS должен начинаться со сброса или нормализации стилей, затем определять глобальные стили, и только после этого — стили для конкретных компонентов. В полной мере используйте возможности WordPress-ისbody_class()иpost_class()Функции позволяют динамически генерировать CSS-классы в зависимости от текущей страницы, что обеспечивает точное позиционирование элементов интерфейса и удобство написания стилей.

Интерактивность в основном зависит от JavaScript. Подобно таблицам стилей, вам следует использовать JavaScript для реализации интерактивных функций.wp_enqueue_script()Для безопасного добавления JavaScript-файла существует рекомендуемая практика: зарегистрируйте свой скрипт и заключите его в функцию.

function mytheme_scripts() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

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

резюме

Создание вашей первой пользовательской темы для WordPress – это постепенный процесс, который начинается с понимания причин необходимости самостоятельной разработки, затем переходит к настройке среды разработки, созданию базовой структуры файлов, дальнейшему изучению принципов работы структуры шаблонов и, наконец, к реализации конкретных функций темы.functions.phpЭтот мощный центральный механизм используется для расширения функциональности, а затем с помощью CSS и JavaScript ему придаются жизнь и индивидуальность. Этот процесс не только учит вас создавать тему, но, что ещё важнее, помогает понять, как работает WordPress и философию разделения данных и представления.

Практика — лучший учитель. Не пугайтесь первоначальной сложностью, начните с самого простогоindex.phpиstyle.cssНачните с активации своей темы, затем постепенно добавляйте новые файлы шаблонов и функции. Каждый раз добавляйте понемногу, тестируйте и наблюдайте за изменениями. Официальная документация WordPress и исходный код ядра — лучшие ресурсы для обучения. Когда вы завершите свою первую тему, даже если она очень простая, вы уже вступите в ряды разработчиков WordPress.

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

Нужно ли в совершенстве знать PHP для разработки темы?

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

Как моя тема отображает список статей на сайте

Отображение списка статей на главной странице, странице категорий или архивной странице — распространённая потребность темы. Вам нужно в соответствующем файле шаблона (например,home.php、archive.php、index.php) использовать основной цикл WordPress. Обычно вы будете использоватьif ( have_posts() )иwhile ( have_posts() )комбинацию для перебора статей и использовать внутри циклаthe_title()、the_excerpt()、the_permalink()Используйте такие функции, чтобы отображать заголовок, аннотацию и ссылку на каждую статью.

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

Когда функциональность вашей темы становится более сложной, может потребоваться предоставить пользователям некоторые параметры настройки, например переключение цветовой схемы или загрузку логотипа. В этом случае вы можете использовать API “Настройщика” или “страницы параметров” WordPress. Более новым и рекомендуемым методом является использование “Настройщика темы”, который черезfunctions.phpИспользуйте это в Китае.$wp_customize->add_setting()и$wp_customize->add_control()Добавьте настройки и элементы управления, чтобы предоставить пользователям возможность настройки с предварительным просмотром в реальном времени.

Какова связь между подтемой и родительской темой?

Дочерняя тема — это мощная возможность, которая наследует все функции, стили и шаблоны другой темы (родительской темы). Её основная цель — настраивать, переопределять и расширять её, не изменяя напрямую файлы родительской темы. Создать дочернюю тему очень быстро: вам нужен только файл style.css, содержащий необходимые комментарии заголовкаstyle.cssИ с одним…functions.phpфайл. Когда WordPress не может найти какой-либо файл шаблона в дочерней теме, он автоматически ищет его в родительской теме. Это лучшая практика для безопасного обновления родительской темы с одновременным сохранением пользовательских изменений.