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

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

Прежде чем приступать к написанию кода, крайне важно понимать основную структуру темы WordPress. Тема по сути представляет собой папку, содержащую ряд файлов, которые вместе определяют внешний вид и некоторые функции веб-сайта. Система WordPress отображает содержимое веб-страниц, считывая эти файлы.

Для создания самой базовой темы необходимо по меньшей мере два файла:style.cssиindex.phpСреди них,style.cssКроме того, что эти файлы отвечают за форматирование визуального стиля сайта, блоки комментариев в их заголовочных частях содержат метаданные о теме: название темы, имя автора, описание, версию и т. д. Именно эти данные используются системой WordPress для определения используемой темы.

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

Рекомендуемое чтение От нуля до единицы: подробное руководство по ключевым технологиям и лучшим практикам создания современных веб-сайтов。

Роль основных файлов темы (theme core files)

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

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

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

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

Другим важным файлом является…header.phpОбычно оно включает в себя объявление типа документа, блоки для включения CSS- и JS-файлов, а также общие элементы, используемые в заголовочной части веб-страницы.footer.phpЭто содержит общий текст для футера и теги завершения. Для реализации этого используются функции WordPress.get_header()иget_footer()Вы можете легко включить их в другие файлы шаблонов, что позволит сохранить модульность и удобство обслуживания кода.

Создание локальной среды разработки и структуры темы (theme)

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

Как только окружение будет готово, вы сможете начать создавать свой первый тематический дизайн (тему) для сайта. Для этого сначала перейдите в каталог, в котором установлен WordPress.wp-content/themesПапка. Создайте здесь новую папку и назовите её именем вашей темы, например, “my-first-theme”. Все файлы, относящиеся к данной теме, будут храниться в этой папке.

Далее необходимо создать упомянутые выше базовые файлы. Начнем с…style.cssВ заголовочном файле должна содержаться определенная информация о таблице стилей.

Рекомендуемое чтение Создание профессионального веб-сайта: полный комплекс советов по разработке и настройке тем для 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: GPL v2 or later
Text Domain: my-first-theme
*/

Затем создаем самую базовую версию (самый простой вариант реализации).index.phpФайл. Изначально он мог быть очень простым — его единственная цель заключалась в том, чтобы обеспечить распознавание и активацию темы системой WordPress.

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
    <h1>Здравствуйте, команда по разработке тем для WordPress!</h1>
    
</body>
</html>

В этот момент перейдите в интерфейс WordPress через меню “Внешний вид” → “Темы” и вы увидите свою тему среди доступных вариантов. Активируйте её, затем перейдите на главную страницу сайта — там должна появиться простая информация, отображаемая кодом, который вы написали ранее. Таким образом, ваша первая «пустая» тема (без каких-либо дополнительных настроек) была создана.

Создание шаблонов тем и циклов

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

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

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

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

Понять и реализовать основной цикл (main loop)

Самая базовая структура цикла представлена ниже; она обычно используется в…index.phpилиsingle.phpВ файле шаблона:

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

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

have_posts()Функция проверяет, есть ли статьи, которые необходимо отобразить.the_post()Функция задаёт данные текущей статьи и делает их доступными для использования в шаблонных тегах (например,the_title()、the_content()Вызов.

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

Чтобы тема могла профессионально обрабатывать различные страницы, вам необходимо создать ряд шаблонных файлов. Кроме того…index.phpДля этого окончательного шаблона отката также необходимо создать:

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

• header.phpВыделить код общей заголовочной части (common header code).
• footer.phpВыделить общий код, используемый в нижней части страницы (в боттом-баре или в других элементах интерфейса).
• single.phpИспользуется для отображения отдельной статьи.
• page.phpИспользуется для отображения отдельной страницы.
• archive.phpИспользуется для отображения информации о категориях, тегах, авторах и других архивных страницах.

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

<main>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><a href="/ru/</?php the_permalink(); ?>"></a></h2>
                
            </article>
        <?php endwhile; ?>
    </main>

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

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

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

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

Использование файла functions.php для расширения функционала темы

functions.phpЭто “инструментарий” для работы с вашей темой. Здесь вы можете добавлять код, который позволяет безопасно изменять и расширять функционал базовой версии WordPress, не модифицируя исходные файлы системы.

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

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

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

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

Меню регистрации и скрипты для настройки стилей

Регистрируем позиции элементов навигационного меню, чтобы пользователи могли управлять ними в разделе “Внешний вид” -> “Меню” в режиме администрирования.

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

В файле шаблона вы можете использовать следующие элементы:wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )Чтобы показать это меню.

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

function my_first_theme_scripts() {
    // 引入主题的主要样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );

// 引入自定义的JavaScript文件
    wp_enqueue_script( ‘my-first-theme-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

пользоватьсяwp_enqueue_style()иwp_enqueue_script()Функция, а также её монтирование…wp_enqueue_scriptsИспользование хуков (hooks) является официально рекомендуемым способом разработки плагинов для WordPress. Они позволяют управлять зависимостями между различными компонентами системы, предотвращать их многократную загрузку и обеспечивать совместимость плагинов с другими элементами системы.

резюме

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

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

Что делать, если веб-страница не обновляется сразу после изменения темы?

Обычно это происходит из-за кэша браузера или механизма кэширования в WordPress. Сначала попробуйте выполнить принудительное обновление страницы в браузере, нажав Ctrl+F5 (или Cmd+Shift+R). Если проблема сохраняется, проверьте, используете ли вы какие-либо плагины для кэширования или кэширование на стороне сервера, и попробуйте очистить все кэши. Что касается файлов CSS и JS…wp_enqueue_styleиwp_enqueue_scriptВ функции можно установить динамическое значение для параметра, представляющего версию программного продукта.time()Во время разработки следует избегать использования кэша, однако перед запуском продукта необходимо перейти на использование фиксированного версионного номера.

Почему моя тема не отображается в бэкэнде?

Пожалуйста, сначала проверьте, находится ли ваша папка с темами в правильном пути.wp-content/themes/Во-вторых, необходимо убедиться, что…style.cssБлок комментариев в начале файла форматирован совершенно правильно; особенно важна строка “Theme Name:”. В конце убедитесь, что настройки прав доступа к папке с темой и её содержащимся файлам соответствуют требованиям, и что веб-сервер (например, Apache) имеет необходимые права для чтения этих файлов.

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

Для добавления боковой панели необходимо выполнить два шага. Во-первых,functions.phpИспользуйте это в Китае.register_sidebar()Функция регистрирует одну или несколько областей для размещения плагинов (маленьких дополнительных модулей). Затем это используется в файле шаблона, где вы хотите отображать боковую панель.sidebar.phpВ этом примере используетсяdynamic_sidebar()Для вызова этой функции необходимо использовать соответствующий код. Кроме того, вам потребуется внести изменения в основной шаблонный файл (например, main_template.html).index.phpИспользуйте его в своём резюме.get_sidebar()Для включения шаблона боковой панели используйте следующий код:

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

Соблюдение стандартов кодирования WordPress является основой для обеспечения совместимости. Что касается содержимого, которое может быть добавлено плагинами, убедитесь, что ваша тема правильно обрабатывает это содержимое.wp_head()иwp_footer()Функции, поскольку многие плагины используют эти два хэка для вставки необходимого кода (например, кода для статистики, CSS/JS). Кроме того, при отображении содержимого статей всегда используется…the_content()Вместо прямого доступа к базе данных используется функция, которая применяет все изменения, внесенные плагином с помощью фильтра “the_content”.