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

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

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

Подготовка среды перед началом разработки крайне важна. Вам понадобится локальная среда для разработки, которую можно легко настроить с помощью таких инструментов, как XAMPP, MAMP, Local by Flywheel или Docker. Локальная среда позволяет выполнять работы по разработке, тестированию и отладке без влияния на работу онлайн-сайта. Кроме того, неотъемлемым инструментом является эффективный редактор кода — например, Visual Studio Code,PhpStorm или Sublime Text. Эти редакторы обеспечивают выделение синтаксиса, предложения по редактированию кода и функции отладки, что значительно повышает эффективность разработки.

Далее вам необходимо ознакомиться со структурой каталога тем. Каждая тема находится в определенном разделе каталога./wp-content/themes/Файлы должны находиться в указанном каталоге и представлять собой отдельную папку. Для самой базовой темы достаточно двух файлов:style.cssиindex.php. Вstyle.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
*/

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

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

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

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

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

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

Самым важным шаблонным файлом является…index.phpЭто шаблон, используемый в качестве крайнего резервного варианта для всех страниц. WordPress применяет его, когда не может найти более подходящего шаблона для конкретной страницы. Главная страница обычно создается на основе этого шаблона.front-page.phpилиhome.phpКонтроль: предпочтительный вариант для одностраничных изданий статей.single.phpДля конкретных типов статей, например, о продуктах, WordPress выполняет соответствующие поисковые операции.single-product.phpИспользование страницыpage.phpЕсли на странице используется пользовательский шаблон, то именно он будет применяться при отображении контента.page-{slug}.phpилиpage-{id}.phpСтраницы архивации статей (по категориям, тегам, авторам, датам публикации) соответствуют этим функциям системы управления контентом.archive.phpА также их более конкретные варианты, такие как…category.php、tag.phpи т.д.

Шаблоны для верхней и нижней части темы (theme header and footer templates)

Для соблюдения принципа DRY (Don’t Repeat Yourself – Не повторяйте себя) темы WordPress используют…get_header()、get_footer()иget_sidebar()Для использования общих функций необходимо ввести соответствующие модули или файлы. Это означает, что вам потребуется создать новые файлы или модули, в которых будут размещены эти функции.header.phpиfooter.phpДокумент.

header.phpФайл обычно содержит заголовок HTML-документа, мета-теги, ссылки на таблицы стилей и скрипты, а также верхнюю навигационную область веб-сайта. Крайне важно, чтобы в этом файле присутствовали все необходимые элементы.wp_head()Функция вызова; эта функция позволяет ядру WordPress, плагинам, а также самим темам выполнять определенные действия.<head>Некоторые части кода необходимо вставить в нужные места.

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

footer.phpФайл содержит информацию, расположенную в нижней части веб-сайта, ссылки на используемые скрипты и другие элементы, и заканчивается соответствующим символом или концовкой.wp_footer()Функция завершена; это соответствует ожиданиям.wp_head()Его функция аналогична функции, используемой для вставки кода в нижнюю часть страницы.

В файле шаблона вы можете включить их следующим образом:

<?php get_header(); ?>

<!-- 主内容区 -->

<?php get_footer(); ?>

Тематические функции и циклическая обработка в WordPress.

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

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

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

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

Понимание циклов в WordPress

Циклы в WordPress являются основой логики разработки тем. Это фрагменты PHP-кода, предназначенные для проверки того, есть ли на текущей странице статьи (или посты), которые необходимо отобразить. Если таковые найдены, цикл перебирает все статьи и выводит их. Основная структура цикла выглядит следующим образом:

<!-- 在这里输出文章内容 -->
        <h2></h2>
        <div></div>
    

    <p>Никаких статей не найдено.</p>

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

Меню регистрации и боковая панель

Современные темы обычно позволяют пользователям настраивать меню и плагины в режиме администрирования. Для этого необходимо…functions.phpВы можете зарегистрироваться здесь.

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

пользоватьсяregister_nav_menus()Функция может зарегистрировать одно или несколько мест для размещения элементов меню:

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

Затем, в файле шаблона (например…header.phpИспользуйте его в своём резюме.wp_nav_menu()Это команда для отображения меню.

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

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

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

Аналогично, боковая панель (зона для размещения плагинов) также работает через…register_sidebar()Регистрация функций:

function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( '在这里添加你的挂件。', 'my-first-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>',
        )
    );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

В шаблоне используйте…dynamic_sidebar( 'sidebar-1' )чтобы вызвать эту область.

Интеграция настроек стилей, скриптов и пользовательских тем

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

Загрузка стилей и скриптов по очереди

Правильный способ – это использовать…wp_enqueue_style()иwp_enqueue_script()Функции… добавьте их туда.functions.phpВ используемых “хвостках” (hooks) обеспечивается правильная установка зависимостей между компонентами системы, что предотвращает их повторную загрузку.

function mytheme_enqueue_assets() {
    // 主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );

// 谷歌字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );

// 主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Интегрированный конструктор тем

Плагин WordPress Customizer позволяет пользователям настраивать параметры темы в реальном времени, прямо в просмотре изменений.$wp_customizeК объекту можно добавлять настройки и элементы управления.

Например, можно добавить опцию для выбора цвета заголовка сайта:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置（存储在数据库中）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '页眉颜色', 'my-first-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Затем, в вашем…style.cssИли используйте это значение в стилях, генерируемых динамически:

function mytheme_customizer_css() {
    ?>
    <style type="text/css">
        .site-header {
            background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );

резюме

Разработка тем для WordPress – это интересное занятие, сочетающее в себе дизайн и программирование. Всё начинается с изучения основных файлов системы (например,…)style.cssиindex.phpПонимание основ работы системы, а также глубокое изучение структуры шаблонов, циклов в WordPress и других аспектов функционирования этой платформы.functions.phpСреди мощных возможностей WordPress стоит отметить правильную организацию файлов шаблонов, использование соответствующих тегов, настройку меню и разделов для размещения дополнительных функций, а также механизмы загрузки ресурсов с использованием очередей. Благодаря этим инструментам можно создавать темы с четкой структурой и высокой производительностью. Кроме того, интеграция инструментов для настройки внешнего вида темы обеспечивает пользователю простой и понятный процесс персонализации. Овладев этими основами, вы сможете превратить свои дизайнерские идеи в полнофункциональные темы для WordPress, что заложит прочную основу для изучения более сложных фреймворков тем (например, Underscores или Genesis), а также для разработки тем на основе технологии блоков (Block Themes).

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

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

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

Как сделать мой тематический дизайн (theme) соответствующим официальным стандартам WordPress?

Чтобы ваша тема соответствовала стандартам и могла быть включена в официальный каталог тем WordPress, вам необходимо соблюдать рекомендации, изложенные в «Руководстве по разработке тем для WordPress» и «Требованиях к проверке тем». К этим требованиям относятся использование безопасных практик программирования, подготовка темы к работе с текстами на разных языках (использование текстовых полей и функций для перевода), обеспечение поддержки мобильных устройств (реактивный дизайн), отсутствие жесткого кодирования важных функций в самой теме (рекомендуется использовать подтемы или плагины), а также проведение тестирования с помощью официального плагина Theme Check.

Почему изменения, внесенные в мой тематический дизайн, не отображаются после обновления страницы?

Обычно это вызвано кэшем браузера или механизмом кэширования WordPress. Сначала попробуйте нажать несколько клавиш одновременно…Ctrl + F5(Для Windows/Linux) илиCmd + Shift + RНа устройствах с операционной системой Mac выполните жесткое обновление (hard refresh) страницы, чтобы очистить кэш браузера. Если проблема сохраняется, убедитесь, что вы находитесь в локальной среде разработки, и проверьте, установлены ли у вас какие-либо плагины, отвечающие за обработку кэша. Попробуйте временно отключить эти плагины. Также убедитесь, что вы правильно изменили нужный шаблон и что файл был успешно сохранен.

Каково различие между подтемами и главными темами? Когда их следует использовать?

Родительская тема представляет собой полнофункциональную, независимую тему. Дочерняя тема, в свою очередь, зависит от родительской и содержит лишь несколько файлов (по крайней мере, один файл обязательно должен присутствовать).style.cssПодтемы (subthemes) предназначены для переопределения стилей и функций родительских тем (parent themes). Они позволяют вносить изменения в существующие темы, сохраняя их при обновлениях родительских версий. Такой подход является наилучшей практикой при модификации и настройке тем.

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

Для улучшения поддержки редактора Gutenberg вам необходимо:functions.phpИспользуйте это в Китае.add_theme_support()Функция объявляет ряд своих характеристик (свойств). Например, она может включать в себя возможность добавления новых элементов данных или выполнения дополнительных операций.align-wideиalign-fullПоддерживаются настройки цветовых палитр, градиентов фона, контроль размера шрифтов и другие функции. Кроме того, для редакторов статей и страниц создаются отдельные таблицы стилей.add_editor_style()Добавьте это. Для более глубокой настройки под себя вам, возможно, понадобится изучить создание пользовательских блоков (custom blocks).