Основные компоненты темы для WordPress

Рекомендуемое чтение В современном высококонкурентном онлайн-мире хорошо продуманный и высокопроизводительный веб-сайт может стать вашим ключом к успеху.。

Заголовочная информация таблицы стилей темы (Theme Style Sheet)

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

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

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

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

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

В данном контексте термин “Text Domain” используется для обеспечения поддержки международных языков; это идентификатор, применяемый при последующем переводе текста. Обычно его значение совпадает с названием папки, содержащей материалы для конкретной темы.

Распространенные операции с файлами функций темы

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

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

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

Уровни шаблонов и пользовательские шаблоны

WordPress использует интеллектуальную систему под названием “уровни шаблонов” для определения способа отображения различных типов страниц. Когда пользователь заходит на страницу, WordPress ищет соответствующий шаблон в определенном порядке приоритетов. Например, для статьи, отнесенной к категории “Новости”, WordPress последовательно ищет следующие шаблоны:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpРазработчики могут использовать эти правила, создавая шаблонные файлы с определенными именами, чтобы осуществлять детальный контроль над содержимым страниц.

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

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

Создание пользовательского шаблона страницы

Например, для создания шаблона страницы полной ширины можно создать новый файл с названием…template-fullwidth.phpФайл должен содержать следующий текст, а в начале файла необходимо добавить следующее примечание:

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

После этого, при редактировании страницы в backend WordPress, вы сможете увидеть в списке вариантов шаблонов (“Template”) раздела “Свойства страницы” (“Page Properties”) опцию «Полноэкранный лей아ут страницы» («Full-width page layout») и выбрать её. Это обеспечивает большую гибкость при отображении контента, позволяя создавать специальные лейауты без необходимости изменения основных файлов темы.

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

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

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

Использование тегов условий для логического управления

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

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Список статей блога</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>

Среди часто используемых тегов условий также можно выделить:is_single()、is_page()、is_category()、is_archive()Итак, эти элементы являются основой для создания динамичных, интеллектуальных тем (дизайнерских решений).

Управление скриптами и стилями темы

Для обеспечения стабильности и производительности сайта все файлы JavaScript и CSS следует загружать последовательно (в очереди) с использованием методов, предоставляемых WordPress, а не напрямую в файлы шаблонов.илиЭти метки были созданы с использованием определенного инструмента или процесса.functions.phpВ китайском языкеwp_enqueue_scriptsРеализовано с использованием хуков (hooks).

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

Правильная регистрация и вход в очередь для получения ресурсов

пользоватьсяwp_register_script()иwp_enqueue_script()(Скрипт) или соответствующий…wp_register_style()иwp_enqueue_style()Функции стиля позволяют WordPress единообразно управлять зависимостями, контролировать версии кода и предотвращать многократную загрузку необходимых ресурсов.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

В приведённом выше примере…get_stylesheet_uri()Получить текущую тему…style.cssПуть (path)get_template_directory_uri()Получите URI к каталогу тем. Установите последний параметр скрипта на соответствующее значение.trueЭто означает, что элементы отображаются в нижней части страницы (в футере), что способствует улучшению её загрузки.

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

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

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

Добавить встроенный стиль или скрипт

Иногда необходимо динамически генерировать CSS или JavaScript на основе логики, написанной на PHP. Для этого можно воспользоваться соответствующими инструментами или методами программирования.wp_add_inline_style()иwp_add_inline_script()Функции должны быть связаны с ресурсом, находящимся в очереди на обработку.

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Плагин для настройки тем и пользовательские функции

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

Добавьте параметр настроек в конфигуратор.

Во-первых, необходимо…functions.phpИспользуйте это в Китае.customize_registerИнструменты для регистрации настроек, элементов управления и областей отображения информации.

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

Отобразить пользовательские настройки в теме.

После добавления необходимых настроек эту информацию следует отобразить на пользовательском интерфейсе темы. Обычно это делается в соответствующих разделах кода, отвечающих за отображение контента на сайте.style.cssИли с помощьюwp_add_inline_style()В добавленном динамическом CSS используются следующие элементы/методы:get_theme_mod()Функция получает значение.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

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

резюме

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

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

Как минимум, какому базовому теме WordPress требуется несколько файлов?

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

В чем разница между подтемой (subtopic) и родительской темой (parent topic)? Как их создать?

Подтемы наследуют все функции и стили своей родительской темы, но позволяют разработчикам изменять их без необходимости модифицирования исходных файлов родительской темы. Это облегчает сохранение пользовательских настроек при обновлениях родительской темы. Чтобы создать подтему, достаточно выполнить следующие действия:/wp-content/themes/В каталоге создайте новую папку, а затем внутри нее — еще одну папку.style.cssФайл должен содержать комментарии в своей заголовочной части (header).Template:Указывается имя каталога родительской темы.

Почему мой пользовательский шаблон страницы не отображается в списке вариантов выбора на заднем плане (в бэкенде)?

Пожалуйста, проверьте файлы вашей шаблонной страницы (например, …).my-template.phpФайл должен находиться в корневом каталоге темы, и блок комментариев в начале файла должен быть сформатирован совершенно правильно. В блоке комментариев обязательно должны быть указаны необходимые данные.Template Name:Эта строка должна следовать непосредственно за именем вашего шаблона. Любая ошибка (например, лишняя пробел или отсутствие двоеточия) может помешать WordPress распознать этот шаблон.

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

Это в основном достигается с помощью процессов “интернационализации (i18n)” и “локализации (l10n)”. Сначала…style.css“Text Domain” и…functions.php\nload_theme_textdomain()Во время вызова используйте единый текстовый контейнер для тематической информации. Затем во всех местах, где необходимо выполнить перевод строк, применяйте этот единый текстовый контейнер.__()、_e()Необходимо обернуть функции перевода в соответствующие оболочки (классы или модули). В конце используйте инструменты вроде Poedit для генерации необходимого кода..potШаблонные файлы, а также файлы, предназначенные для работы с соответствующими языками….poи.moФайл следует разместить в разделе, посвящённом теме (тематическом разделе)./languages/Каталог.