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

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

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

Подготовительные работы: понимание структуры темы и основных файлов

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

Основные шаблонные файлы включают в себя:
* index.phpОсновной шаблон темы является стандартным шаблоном для восстановления содержимого всех страниц сайта.
* style.cssЭто основной стильный таблицы темы, которая содержит не только правила CSS, но и комментарии в заголовочной части файла, определяющие метаинформацию темы (название темы, автор, описание и т. д.). Именно эти данные играют ключевую роль в том, чтобы WordPress смог распознать данную тему.
* header.phpШаблон верхней части сайта (так называемый «header») обычно включает в себя следующие элементы:<head>Часть сайта, логотипы веб-сайта и главное навигационное меню.
* footer.phpШаблон нижней части страницы веб-сайта обычно включает в себя информацию об авторских правах, разделы для размещения вспомогательных элементов (виджетов) и другие элементы.
* functions.phpФункциональные файлы темы предназначены для добавления новых функций темы, регистрации меню, размещения элементов типа Widget, а также для хранения других PHP-файлов.

Кроме того, существуют шаблоны, предназначенные для использования на конкретных страницах. single.php(Отдельная статья)page.php(Независимая страница)archive.php(Страница архивации статей) Изучение функций этих файлов является важной основой для создания структуры тематического контента.

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

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.
Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.
UltaHost ЛОГО страница доступа

Настройка среды разработки также имеет большое значение. Вам понадобится локальная среда разработки для PHP (например, XAMPP, Local by Flywheel или DevKinsta), текстовый редактор (например, VS Code или PhpStorm), а также убедитесь, что установленная у вас версия WordPress является самой последней.

Создание файлов темы и структуры каталогов

Во-первых, в каталоге вашей установки WordPress под названием wp-content/themes/ Внутри этой папки создайте новую папку и назовите её именем вашей темы, например: my-first-themeВсе файлы с тематическим содержанием будут размещены в этой папке.

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Теперь необходимо создать второй обязательный файл:index.phpНа начальном этапе мы можем сделать всё очень простым – просто вывести базовую HTML-структуру.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    <header>
        <h1>Добро пожаловать на мой первый тематический дизайн для WordPress!</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Все права защищены</p>
    </footer>
    
</body>
</html>

В этот момент, если вы зайдете в панель управления WordPress в разделе “Внешний вид” → “Темы”, вы увидите свою тему “Моя первая тема” и сможете её активировать. После активации, перейдя на главную страницу сайта, вы заметите, что содержимое статей отображается в очень простом HTML-формате.

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

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

Создание основных шаблонов и функций

Для того чтобы структура темы была более понятной, нам необходимо…index.phpРазделите проект на более мелкие, переносимые части. Для начала создайте… header.php Файл, будет…<head>Часть контента, а также элементы заголовка были перемещены в другое место.

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1009>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            ) );
            ?&gt;
    </nav>
</header>

Далее создайте footer.php Документ.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>

</body>
</html>

Теперь нам нужно создать “мозг” этой темы (то есть центральную часть, отвечающую за её управление и координацию). functions.php Файл. Здесь мы настроим функции поддержки тем, определим местоположение регистрации блюд, а также добавим стилевые таблицы и скрипты.

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', '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(), array(), '1.0' );
    // 主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' );

В заключение, переработайте свой код. index.phpДля включения заголовка и футера используйте теги шаблона WordPress.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Добавление стилей и интерактивных функций

Теперь скелет темы уже готов, и пришло время добавить к нему стиль и интерактивные элементы. Во-первых,style.cssПосле комментариев в заголовке файла добавьте немного базового CSS-кода, чтобы улучшить внешний вид вашего тематического дизайна.

Общий хостинг InterServer
Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.
Логотип InterServer. страница доступа 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

Для обработки навигации на мобильных устройствах мы можем создать простой JavaScript-файл. Создайте его в корневой директории темы (theme root directory). /js/navigation.js。

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

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

И добавьте соответствующий стиль в CSS:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

резюме

После выполнения вышеуказанных шагов мы создали базовую, но полноценную по структуре тему для WordPress. Мы начали с понимания основных файлов темы и постепенно разработали её содержимое.style.cssиindex.phpЗатем путем разделения на части…header.php、footer.phpи мощныйfunctions.phpФайлы позволили сделать структуру темы более модульной и удобной для обслуживания. В конце мы добавили базовые стили и простые элементы интерактивности на JavaScript, чтобы улучшить пользовательский опыт.

Эта тема обладает основными характеристиками современных тем для WordPress: поддержкой тегов для заголовков, изображений, навигационных меню, а также начальными элементами реагирующего (адаптивного) дизайна. Исходя из этого, вы можете продолжить развивать и улучшать её функционал.single.php、page.phpМожно использовать ещё множество шаблонов файлов, внедрять более сложные CSS-фреймворки (например, Bootstrap), или применять REST-API WordPress для создания более динамичного пользовательского интерфейса. Мир разработки тем для сайтов огромен и увлекателен; ключ к успеху — это практика и постоянное улучшение своих навыков.

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

Почему мой тематический дизайн не отображается в списке тем в разделе “Темы” на заднем плане (в системе управления)?

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

Как добавить область для вставки виджетов (widgets) в мой тематический дизайн (theme)?

Вам нужно…functions.phpВ документе используютсяregister_sidebar()Функция предназначена для регистрации инструментов (приложений), которые будут отображаться в специальной области на сайте. После регистрации вы сможете использовать эти инструменты в соответствующих шаблонах файлов (например, в файле, содержащем структуру страницы).sidebar.phpилиfooter.phpИспользуйте его в своём резюме.dynamic_sidebar()Это функция, предназначенная для её вызова. Такой подход является стандартным способом расширения функционала боковой панели или футера темы.

函数 get_template_part() 有什么用？

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

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

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

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

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

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

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

Теги.