рис. начало/связанные со знаниями/WordPress/Содержание Подробности

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

3-минутное чтение
2026-03-17
2026-06-03
2,571
Я получаю комиссионные, когда вы совершаете покупки по ссылкам ниже, без дополнительных затрат для вас.

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

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

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

Давайте сначала создадим… style.css Файл, в который записывается необходимая заголовочная информация.

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

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是我开发的第一个 WordPress 主题，用于学习和实践。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

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

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.
Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.
UltaHost ЛОГО страница доступа 
<!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>Здравствуйте, мир! Это моя первая тема.</h1>
    
</body>
</html>

После завершения работы над этими двумя файлами войдите в панель управления WordPress, перейдите на страницу “Внешний вид” → “Темы”, и там вы увидите только что созданную тему “My First Theme”. Активируйте её, затем перейдите на главную страницу сайта — вы увидите самый простой пример реализации нашей темы. Это означает, что основа вашей темы успешно создана.

Понимание основного шаблонного файла и его иерархической структуры

WordPress использует иерархию шаблонов (Template Hierarchy) для определения того, какой шаблон следует использовать для отображения содержимого страницы при её запросе пользователем. Понимание этих правил является ключевым аспектом разработки тем (templates). Проще говоря, когда пользователь заходит на определённую страницу, WordPress ищет соответствующий шаблон в определённом порядке приоритетов. Самый основной принцип работы иерархии шаблонов заключается в следующем: index.phpЭто окончательный вариант возврата на предыдущий уровень интерфейса для всех страниц.

Например, при запросе к отдельной статье из блога WordPress сначала выполняет поиск нужной информации. single-post.phpЕсли его нет, тогда нужно его найти. single.phpИспользуется только в том случае, если его ещё нет. index.phpДля страницы, отображающей список статей, система будет выполнять поиск в следующем порядке: home.php、front-page.php、index.php。

Для создания полнофункциональной темы для блога нам необходимо создать по крайней мере несколько ключевых шаблонов:header.php(Заголовок веб-страницы)footer.php(В нижней части веб-страницы)sidebar.php(Боковая панель, необязательна)index.php(Индекс основного контента)single.php(Отдельная статья)page.php(Одна страница) И style.css(Стильный шаблон).

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

Через get_header()、get_footer() и get_sidebar() С помощью этих шаблонных функций мы можем модульнизировать общий код, обеспечив тем самым его повторное использование. Основной шаблонный файл выглядит следующим образом: index.php Структура станет гораздо более понятной.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

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

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

Практическое развитие: Создание основного цикла и вызова содержимого статьи

В основе любой темы блога лежит так называемый “основной цикл” (The Loop) – это структура PHP-кода в WordPress, которая отвечает за получение содержимого статей из базы данных и его отображение на странице. Внутри этого цикла можно использовать ряд шаблонных тегов (Template Tags) для вывода заголовка статьи, её текста, информации об авторе, даты публикации и других данных.

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

Давайте создадим самую простую версию…index.phpФайлы: в основном цикле отображается список статей.

<div class="content-area">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">Последние статьи</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/ru/</?php the_permalink(); ?>">
                            
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Опубликовано:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Извините, никаких статей не найдено.</p>
        
    </main>
    <?php get_sidebar(); ?>
</div>

В приведённом выше коде мы использовали… have_posts() и the_post() Для создания циклов используются специальные теги-шаблоны. the_title()、the_permalink()、the_excerpt() Такие символы, как “等” (děng), используются для отображения соответствующего контента.post_class() Функция автоматически генерирует для контейнера статей ряд очень полезных CSS-классов, что облегчает нам процесс стилизации.

Для отдельной статьи нам необходимо создать… single.phpЕго структура похожа на структуру индексной страницы, однако обычно он отображает только одну статью и показывает её полный текст.the_content())。

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

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

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

Здесь была введена более мощная функция. get_template_part()Оно используется для загрузки другого файла с фрагментами шаблона, который находится в каталоге темы. Например,get_template_part( 'template-parts/content', 'single' ); Будет осуществлено приоритетное загрузочное выполнение. template-parts/content-single.php Файл; если его не существует, его загружают. template-parts/content.phpЭто дополнительно повышает уровень организованности и повторяемости использования кода.

Улучшения функционала тем и рекомендации по их оптимальному использованию

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

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

тематическийfunctions.phpФайл не является обязательным, но он позволяет добавлять функции к вашему тематическому дизайну, регистрировать новые возможности и взаимодействовать с основным API WordPress. Он выполняет роль “плагина” для вашего тематического дизайна, но при этом тесно связан с самим тематиком. Вам следует выполнить операции регистрации и объявления (declaration) этого файла, а не просто выводить его содержимое.

Стандартный…functions.phpДолжны быть включены следующие разделы:

1. 注册菜单：使用 register_nav_menus() Функция.
2. 注册侧边栏：使用 register_sidebar() Функция.
3. 添加主题支持：使用 add_theme_support() Функции предназначены для активации таких ключевых функций, как изображения, характерные для статей, пользовательские логотипы и другие элементы интерфейса.
4. 加载样式和脚本：使用 wp_enqueue_style() и wp_enqueue_script() Функцию, и использовать её правильно. wp_enqueue_scripts Крючок.

__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

// 注册一个右侧边栏
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', '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', 'my_first_theme_widgets_init' );
?&gt;

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

резюме

С момента создания контента, содержащего… style.css и index.php Начиная с основных папок вашего проекта, вы уже пройшли весь основной путь создания пользовательской темы для WordPress. Мы подробно рассмотрели систему уровней шаблонов и поняли, как WordPress интеллектуально выбирает соответствующие файлы шаблонов для отображения различных страниц. Мы практиковались в создании основного цикла обработки данных и научились использовать различные теги шаблонов для динамического вывода контента. В конце концов… functions.php Были добавлены более мощные функции и улучшена стандартизация дизайна сайта. Хотя это лишь начало, это открывает перед вами возможности для дальнейших разработок: вы можете добавлять новые шаблоны, расширять функционал сайта, внедрять различные стили оформления и создавать уникальный сайт, полностью соответствующий вашим или клиентских требованиям.

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

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

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

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

Обеспечение реактивного дизайна для сайтов является основным требованием современного веб-разработчика. Для настройки макета и стилей в зависимости от ширины экрана необходимо использовать CSS-медиаквери (Media Queries). При разработке всегда следует придерживаться принципа “мобильность в первую очередь”: сначала создавать стили, подходящие для маленьких экранов, а затем постепенно добавлять или изменять их с помощью медиаквери для более крупных экранов.

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

Настоятельно рекомендуется разрабатывать темы в локальной среде разработки. Использование таких инструментов, как Local by Flywheel, XAMPP, MAMP или Docker, позволяет создать локальную серверную среду, что обеспечивает возможность быстрого тестирования и развития новых функций без влияния на работу онлайн-сайта. Кроме того, рекомендуется включить соответствующие настройки в систему WordPress для улучшения процесса разработки. WP_DEBUG Режим работы PHP-сервера играет крайне важную роль: он отвечает за отображение ошибок и предупреждений на экране, что позволяет своевременно обнаруживать и исправлять проблемы в коде.

Какие фронтенд-технологии мне необходимо освоить?

Помимо PHP, вам также необходимо в совершенстве овладеть HTML и CSS – это основы для создания структуры и стиля веб-страниц. Для более сложных интерактивных элементов и динамических эффектов крайне важны знания JavaScript. Особенно важно научиться безопасно и правильно включать и использовать JavaScript-файлы в WordPress. wp_enqueue_script), а также изучение использования встроенной библиотеки JavaScript в WordPress.

Что дальше, что дальше?

Если вы создаёте или оптимизируете веб-сайт на WordPress, следующим шагом будет ознакомление с темами, связанными с оптимизацией производительности, настройкой плагинов и кастомизацией темы.

Расширенное чтение и практические знания

Следующие статьи связаны с темой этой статьи и подходят для дальнейшего углубленного чтения. Зачастую лучше начать с той статьи, которая наиболее близка к вашей текущей проблеме, а затем постепенно переходить к другим темам.

Теги.