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

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

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

Подготовка и настройка окружения

Прежде чем начать писать какой-либо код, вам нужна подходящая среда разработки. Это включает локальную серверную среду (например, XAMPP, Local by Flywheel или MAMP), а также редактор кода (например, VS Code, Sublime Text или PHPStorm). Убедитесь, что в вашей локальной среде установлены PHP, MySQL и Apache/Nginx.

Далее вам нужно на локальном сервереwp-content/themes/В каталоге создайте новую папку. Название этой папки — имя вашей темы, напримерmy-first-themeЭто “дом” для всех ваших файлов тем.

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

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

Создать заголовочный файл с информацией о теме

style.cssБлок комментариев в верхней части файла является ключевым для распознавания темы WordPress. Пожалуйста, создайте в папке вашей темыstyle.css, и впишите следующее:

Ультахост (UltaHost) – хостинг-провайдер, предоставляющий услуги хостинга для сайтов, построенных на платформе WordPress.
Гарантия возврата средств в течение 30 дней, неограниченная пропускная способность интернет-канала и объем баз данных, бесплатная защита от DDoS-атак. При покупке на срок 3 лет предоставляется скидка в размере 501 ТБ до 4 ТБ.
UltaHost ЛОГО страница доступа 
/*
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: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Эта информация будет отображаться в админ-панели WordPress на странице “Внешний вид” -> “Темы”.Text DomainИспользуется для интернационализации и является ключевым идентификатором для последующей загрузки файлов перевода.

Создать базовый шаблон индекса

Далее создайте основные файлы темыindex.phpДаже если в этом файле пока только одна строка кода, он всё равно позволит WordPress распознать и активировать вашу тему.

<h1>Привет, мир тем WordPress!</h1>

get_header()иget_footer()Это функции шаблонов WordPress, которые пытаются загрузить файлы с определенными именами.header.phpиfooter.phpЭто файлы, которые необходимо создать позже. Хотя мы их пока не создали, стандартной практикой является указание их названий заранее. Теперь вы можете зайти в облачную консоль WordPress, перейти в раздел “Внешний вид” -> “Темы” и найти там тему “My First Theme”, после чего активировать её. Обновите страницу главной страницы сайта – вы увидите сообщение “Hello, WordPress Theme World!”.

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

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

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

Наиболее универсальным шаблоном является…index.phpЭто финальный вариант дизайна для всех страниц. Однако для более точного контроля внешнего вида отдельных страниц нам следует создать более детализированные шаблоны. Давайте сначала создадим три самых основных и важных файла:header.php、footer.phpиfunctions.php。

Создать шаблон шапки сайта

header.phpФайл обычно содержит заголовок HTML-документа (<head>) и общие области в верхней части сайта, такие как логотип и навигационное меню. Создать одинheader.phpФайл:

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1004>
    <header id="site-header">
        <div class="container">
            <h1><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
            <p></p>
            <nav>
                'primary',
                    'menu_id'        =&gt; 'primary-menu',
                ) );
                ?&gt;
            </nav>
        </div>
    </header>
    <main id="main-content">

Вот несколько ключевых функций:wp_head()Хуки позволяют ядру WordPress, плагинам и темам самостоятельно добавлять<head>Вставьте в этот раздел необходимый код (например, ссылки на таблицы стилей);body_class()Будет выводиться ряд имён CSS-классов, что удобно для управления стилями в зависимости от разных страниц;wp_nav_menu()Используется для отображения навигационного меню.

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

Создать шаблон подвала сайта

footer.phpФайл обычно содержит общий нижний колонтитул сайта, например информацию об авторских правах, и закрываетheader.phpОткрытые вкладки. Создатьfooter.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . Все права защищены.</p>
        </div>
    </footer>
    
</body>
</html>

wp_footer()иwp_head()Подобно, это важный хук, используемый для</body>Вставьте скрипт или код перед тегом.

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

Рекомендуемое чтение Как выбрать и настроить тему для WordPress, подходящую для работы с системой SEO?。

<article>
        <h2></h2>
        <div></div>
    </article>

    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

Этот фрагмент кода представляет собой основной цикл темы WordPress (The Loop): он проверяет, есть ли на текущей странице записи, а затем в цикле выводит заголовок и содержимое каждой записи.

Расширить функциональность темы через файл функций

functions.phpЭто “Центр управления” вашего тематического дизайна. Он не является шаблонным файлом, а PHP-файлом, который автоматически загружается при инициализации темы. Здесь вы можете добавлять функции поддержки темы, настраивать расположение меню, стили таблиц и скрипты и т. д. Создайте его.functions.php：

Общий хостинг InterServer
Общий хостинг $2.50 USD в месяц, первый месяц $0.1 USD промо-код tryinterserver, 461 скрипт облачных приложений, установка в один клик.
Логотип InterServer. страница доступа 
<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Этот файл с функциями выполняет несколько важных задач: 1) путем…add_theme_support()Включена функция, часто используемая в современных темах WordPress; 2) с помощьюregister_nav_menus()Вы зарегистрировали местоположение ресторана, так что теперь мы можем использовать это информационное средство для...header.phpВызванный изнутри…primaryМеню можно настроить в разделе “Внешний вид” -> “Меню” в режиме разработки (backend). 3) Используйте это настроение для изменения внешнего вида меню.wp_enqueue_style()Функция корректно и безопасным с точки зрения зависимостей образом ставит таблицу стилей в очередь.

Создать отдельный шаблон статьи

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

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        
    </header>
    <div class="entry-content">
        
    </div>
</article>

Этот шаблон более подробно отображает информацию о статье, такую как дата публикации и изображение записи, если оно задано.post_class()Функция выводит CSS-класс, соответствующий типу статьи.

Добавить базовые стили и адаптивный дизайн

Теперь, когда у вашей темы уже есть каркас и базовая функциональность, пришло время сделать её красивой. Мы собираемся добавитьstyle.cssДобавьте немного базового CSS и убедитесь, что он имеет адаптивный дизайн.

Вашемstyle.cssК файлу (под заголовком информации о теме) добавьте следующие стили:

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

Эти стили обеспечивают чёткий, современный визуальный эффект и базовую адаптивную компоновку на устройствах с небольшими экранами. Вы можете создать/assets/css/custom.cssфайл для хранения дополнительных пользовательских стилей, он уже вfunctions.phpБыл поставлен в очередь на загрузку.

резюме

Следуя шагам из этой статьи, вы уже успешно создали полноценную и структурированную тему WordPress, начав с пустой папки. Вы познакомились с самыми основными файлами разработки тем.style.cssиindex.phpизучили концепцию иерархии шаблонов и создалиheader.php、footer.php、single.phpи другие основные файлы шаблонов. Вы также черезfunctions.phpФайл предоставляет поддержку функциональности и возможности управления ресурсами для вашей темы; в конце концов, с помощью CSS ему придается визуальный вид (форма и стиль).

Это всего лишь отправная точка. Далее вы можете изучить создание дополнительных файлов шаблонов (например,page.php、archive.php、404.phpВы должны глубоко изучить систему хуков (Hooks), действий (Actions) и фильтров (Filters) в WordPress, а также разобраться, как настроить ваш тематический дизайн (theme) для работы с виджетами (Widgets) и инструментами настройки (Customizer). Практикуясь и исследуя новые возможности, вы сможете стать опытным разработчиком тематических решений для WordPress.

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

Как изменить логотип темы?

Вheader.phpВ файле найдите строку кода, которая отображает заголовок веб-сайта. Вы можете использовать…

Замена метокbloginfo( ‘name’ )И добавьте ссылку на вашу логотип-фотографию. Более профессиональным подходом будет…functions.phpИспользуйте это в Китае.add_theme_support( ‘custom-logo’ )для поддержки функции загрузки логотипа в настройщике WordPress.

Почему моё навигационное меню не отображается?

Сначала убедитесь, что вы ужеfunctions.phpЧерезregister_nav_menus()Зарегистрированные области меню (напримерprimaryЗатем вам нужно войти в админ-панель WordPress и перейти на страницу “Внешний вид” -> “Меню”. Создайте новое меню, выберите нужные пункты и в разделе “Область отображения” отметьте зарегистрированное место меню, например “Основное меню”, затем сохраните меню.

Как добавить боковую панель для темы?

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

Операции в файле functions.php обязательно должны быть подключены через хуки?

Да, в большинстве случаев, чтобы гарантировать, что код будет выполнен в нужный момент, следует разместить функциональный код внутри функций и использовать специальные механизмы (так называемые «хаки» или «функции-хендлеры») для управления его выполнением.after_setup_theme、wp_enqueue_scripts）смонтировать. Написать прямо вfunctions.phpКод в глобальной области видимости может выполниться в неподходящий момент или привести к ошибкам.

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

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

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

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

Теги.