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

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

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

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

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

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

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

Принцип работы системы управления уровнями шаблонов

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

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

С самых основных…header.php、footer.phpиindex.phpНачнем сборку.header.phpВсегда используйтеwp_head()Это функция, которая позволяет ядру WordPress, плагинам и темам вставлять необходимый код (например, ссылки на стилевые таблицы) в определенные места. Аналогичным образом…footer.phpВ тексте следует использовать следующие элементы:wp_footer()Функция. В основном шаблоне.index.phpВget_header()、get_footer()、get_sidebar()Для включения этих компонентов используйте соответствующие шаблонные теги.

Очень простой.index.phpПример структуры представлен ниже:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示文章内容
        endwhile;
    else :
        // 显示未找到内容
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Тематические функции интегрированы с API WordPress.

functions.phpФайлы являются своего рода “мозгом” темы – они позволяют расширять её функционал без изменения основных файлов темы. Здесь вы можете использовать действия (action hooks) и фильтры (filter hooks), чтобы вмешиваться в процесс работы WordPress.

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

Функции, поддерживаемые при регистрации темы:

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

function mytheme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Вышеуказанный код выполняет свои функции следующим образом:after_setup_themeХук выполняется при инициализации темы и занимается регистрацией её функций.

Безопасное внедрение скриптов и стилей

Никогда не делайте прямых ссылок (hard links) на CSS- и JS-файлы непосредственно в файле шаблона. Для этого следует использовать другие методы интеграции.wp_enqueue_scriptsДля очередного загрузки используются действия-хаки (action hooks) и соответствующие функции.

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

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

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

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

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

Настройка тем и расширенные функции

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

Использование API настраивания тем (Theme Customizer API)

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

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

function mytheme_customize_register( $wp_customize ) {
    // 添加一个节
    $wp_customize->add_section( 'mytheme_colors', array(
        'title' => __( '主题颜色', 'mytheme' ),
    ) );
    // 添加一个设置
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 为该设置添加一个颜色控制器
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label' => __( '主色', 'mytheme' ),
        'section' => 'mytheme_colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

В файле с настройками темы (theme file) вы можете использовать различные элементы для настройки внешнего вида и функционала приложения.get_theme_mod( 'primary_color' )Для получения значений, заданных пользователем.

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

Для случаев, когда необходимо отображать информацию о портфолиох, продуктах, командах или другом контенте, не соответствующем стандартным форматам статей, регистрация пользовательского типа статьи (Custom Post Type, CPT) является наилучшим решением. Обычно это делается путем…register_post_type()Реализация функции рекомендуется выполнять в плагине, чтобы данные не терялись при смене темы. Однако для демонстрации она также может быть реализована непосредственно в самой теме.functions.phpЭто будет происходить в Китае.

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

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

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

function mytheme_register_portfolio() {
    $args = array(
        'public' => true,
        'label'  => __( '作品集', 'mytheme' ),
        'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'has_archive' => true,
        'menu_icon' => 'dashicons-portfolio',
    );
    register_post_type( 'portfolio', $args );
}
add_action( 'init', 'mytheme_register_portfolio' );

После регистрации в бэкенде появится меню “Коллекция работ”. Вы сможете управлять ею так же, как и статьями, а также создавать для нее специальные шаблоны файлов.single-portfolio.php。

резюме

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

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

Какие минимальное количество файлов требуется для темы WordPress типа ###?
Для создания темы для WordPress необходимо как минимум два файла:style.css и index.php。style.cssБлок комментариев в верхней части файла должен содержать метаданные темы (например, название темы), которые необходимы для её распознавания в WordPress.index.phpЭто файл с основным шаблоном по умолчанию.

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

Вам необходимо подготовиться к интернационализации текста. Во всех пользовательских интерфейсах все строки должны быть обернуты в функции для перевода. Например:__('Hello World', 'mytheme-textdomain')или_e('Hello World', 'mytheme-textdomain')Затем с помощью таких инструментов, как Poedit, создается нужный результат..potШаблонные файлы, а также файлы, предназначенные для работы с соответствующими языками….poи.moПереводите документы. Наконец, вfunctions.phpИспользуйте это в Китае.load_theme_textdomain()Загрузка и перевод функций.

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

Ни в коем случае не модифицируйте напрямую файлы родительской темы (темы, скачанной из сторонних источников). Правильный способ — использовать технологию “подтем” (subthemes). Создайте новый каталог для темы и размещайте там все необходимые файлы.style.cssЧерезTemplate:Укажите имя каталога родительской темы. В подтеме вам достаточно добавить только те файлы, которые вы хотите изменить или создать.style.css、functions.phpИли используйте файл шаблона для перезаписи существующего. Таким образом, родительская тема сможет быть безопасно обновлена, при этом ваши настройки и изменения останутся сохранены.

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

Во-первых, создайте в корневом каталоге вашей темы новый PHP-файл, например, с именем `new_file.php`.page-fullwidth.phpВ самом верхнем разделе этого файла добавьте специальное примечание, в котором будет указано, что это шаблон страницы. Например:<?php /* Template Name: 全宽页面 */ ?>Затем напишите свой шаблонный код в этом файле. После сохранения файла, при создании или редактировании страницы в интерфейсе WordPress, вы сможете увидеть шаблон “Полноэкранная страница” в списке доступных шаблонов (раздел “Атрибуты страницы” → “Шаблон”) и использовать его по своему усмотрению.