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

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

Для начала работы над проектом по разработке темы для WordPress необходимо сначала настроить подходящую рабочую среду. Это включает в себя не только локальный сервер для разработки, но и создание четкой структуры проекта, а также использование современных инструментов для разработки.

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

Стандартная и четкая структура каталога тем является основой для обеспечения удобства обслуживания проекта (т. е. его поддержки и модификаций в будущем). В случае с WordPress это особенно важно, поскольку система предусматривает определенные правила организации контента.wp-content/themesВнутри каталога создайте папку с названием, соответствующим вашей теме. Например:my-modern-themeВ этой папке вам необходимо создать два основных файла:style.cssиindex.phpСреди них,style.cssЭто не только таблицы стилей, но и метаданные, отражающие тематику проекта. Остальные файлы и каталоги, например, те, в которых хранятся скрипты на JavaScript, также играют важную роль в функционировании системы./jsМесто, где хранятся шаблонные компоненты./template-partsМесто, где хранятся шаблоны страниц./page-templatesМожно постепенно создавать необходимые элементы в процессе разработки.

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

Информация о заголовке таблицы стилей темы

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

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

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

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

/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
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-modern-theme
*/

Среди них…Text DomainЭто элемент, предназначенный для поддержки международной версии сайта (иностранных языков); он служит текстовым полем для последующих функций перевода. После того, как эта информация будет определена, ваша тема появится в списке тем в разделе “Внешний вид” -> “Темы” в интерфейсе управления WordPress.

Импорт файлов с основными функциями

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

Создайте файл в корневом каталоге темы.functions.phpФайл. На начальном этапе мы можем добавить в него некоторые базовые функции. Вы можете это сделать следующим образом:add_theme_support()Функции предназначены для объявления возможностей, поддерживаемых данным сервисом (темой): миниатюры статей (Featured Image), пользовательские логотипы, HTML5-теги и т. д.

Создание основного шаблонного файла

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

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

Самый базовый файл шаблона —index.phpЭто шаблон, используемый в качестве «конечного пункта возврата» для всех страниц. Однако для более точного контроля над отображением контента нам следует создать более специфические шаблоны. Например, шаблон, предназначенный для отображения списка статей блога.home.phpилиindex.phpИспользуется для отображения отдельной статьи.single.phpИспользуется для отображения статических страниц.page.phpА также для отображения категорий статей, тегов и другой информации на архивных страницах.archive.phpКроме того,header.phpиfooter.phpДля разделения кода, отвечающего за верхнюю и нижнюю части веб-сайта, используется следующий подход:get_header()иget_footer()Функции вызываются в различных шаблонах, что позволяет повторно использовать код.

Создать шаблон заголовка (header template)

header.phpФайлы обычно содержат HTML-документы.<head>Структура разделов и начала страниц, такая как идентификатор сайта и главный навигационный меню, является важной частью их оформления. Ключевым шагом при создании такой структуры является…<head>Вызов внутри…wp_head()Хук (hook) – это механизм, используемый в ядре WordPress, плагинах и темах для генерации необходимого CSS-кода, JavaScript-скриптов и метаданных.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Реализация циклического просмотра статей

Циклическое обновление контента является основным механизмом вывода динамического контента в WordPress.index.php、single.phpВ таких шаблонах мы используем…if ( have_posts() ) : while ( have_posts() ) : the_post();Пройдитесь по всем статьям и отобразите их.

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

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

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

<div id="primary" class="content-area">
    <main id="main" 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>
</div>

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

Реализация реагирующего дизайна и стилей (responsive design and styling)

Современные веб-дизайнерские решения должны быть реагирующими (responsive), то есть способны обеспечивать качественный пользовательский опыт на экранах различных размеров – от мобильных устройств до настольных компьютеров. Это достигается с помощью таких технологий, как CSS-медиаквери (CSS media queries), модели гибких блоков (Flexbox) и сетчатого оформления (CSS Grid).

Во-первых, вfunctions.phpИспользовать правильно…wp_enqueue_style()Функция добавляет ваш основной стильный файл в очередь обработки. Обязательно убедитесь, что при вызове функции учитываются стили, встроенные в WordPress.dashicons。

Рекомендуемое чтение Полное руководство по использованию Tailwind CSS: от основ до мастерства современного веб-разработчика。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

CSS-стратегия, ориентированная на мобильные устройства

При написании CSS следует придерживаться стратегии, ориентированной на мобильные устройства (“mobile-first”). Это означает, что сначала необходимо разработать базовые стили для устройств с маленькими экранами (например, смартфонов), а затем с помощью медиаквери (media queries) добавлять дополнительные стили и настройки макета для устройств с более крупными экранами (планшеты, настольные компьютеры).

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Обработка реагирующих на разрешение изображений (респонсивных изображений)

WordPress предоставляет мощную поддержку реагирующих изображений (респонсивных изображений). Их можно использовать для создания сайтов, которые хорошо отображаются на разных устройствах и экранах.the_post_thumbnail()Вы вызываете функцию и передаете необходимые параметры размеров, и WordPress автоматически генерирует отображаемый контент с указанными размерами.srcsetиsizesАтрибута `

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

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

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

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

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

Добавление функции выбора темы и возможности настройки параметров.

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

Регистрация в навигационном меню

Вfunctions.phpИспользуйте это в Китае.register_nav_menus()Функция позволяет определить, какие позиции в меню поддерживаются вашим тематическим дизайном. После этого пользователи могут назначать элементы меню в эти позиции в разделе “Внешний вид” -> “Меню” в настройках системы.

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

Создать область виджетов

Раздел с мини-приложениями (боковая панель) позволяет пользователям настраивать структуру страницы, перетаскивая соответствующие мини-приложения в нужные места.register_sidebar()Функции регистрируются специальным образом. Обычно создаётся несколько зон для размещения мини-приложений (так называемых “толкательных элементов” – widgets): для главной боковой панели, области нижнего колонтекста и т. д.

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>'перед заголовком '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_modern_theme_widgets_init' );

После регистрации вы сможете использовать шаблонные файлы (например,…)sidebar.phpИспользуйте его в своём резюме.dynamic_sidebar( 'sidebar-1' )Для отображения данной области достаточно выполнить вызов функции.

Интегрированный API-инструмента для создания пользовательских настроек

Плагин WordPress Customizer позволяет пользователям настраивать параметры темы в реальном времени, прямо в превью. С помощью API этого плагина можно добавлять простые настройки, такие как выбор цветов или загрузка логотипа. Для этого необходимо использовать соответствующие инструменты и функции, предоставляемые Customizerом.$wp_customize->add_setting()и$wp_customize->add_control()Метод.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

Затем…header.phpВ данном контексте можно использовать следующий подход: «Внутри можно пройти через…» („Inside, you can pass through…“).get_theme_mod( 'header_textcolor' )Получите это значение и примените его с использованием встроенных стилей (inline styles) или других способов.

резюме

Разработка с нуля современной реактивной темы для WordPress представляет собой систематический процесс, требующий от разработчика не только знания PHP и основных API WordPress, но и владения HTML5, CSS3 (особенно технологиями Flexbox, Grid и медиаквери) и JavaScript. Весь процесс основан на принципах модульности и удобства обслуживания: начиная с создания среды разработки и определения параметров темы, разработчик постепенно создает PHP-файлы, следующие определенной структуре (уровням шаблонов), и реализует основные функции для работы с контентом (в частности, циклы отображения статей). Затем, с использованием подхода “мобильность прежде всего” и технологий реактивных изображений, обеспечивается отличное отображение сайта на всех устройствах. Наконец, с помощью мощных функциональных API WordPress добавляются навигационные меню, разделы с полезными инструментами и возможности для настройки, предоставляющие пользователям широкие возможности для индивидуальной настройки темы. Следуя этим шагам, вы сможете создать профессиональную, эффективную и легкую в обслуживании тему для WordPress.

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

Для разработки тем для WordPress необходимо овладеть следующими ключевыми технологиями:

Для создания полноценной темы для WordPress необходимо овладеть рядом ключевых технологий. Во-первых, это PHP – язык программирования, на котором написан сам WordPress; все шаблонные файлы и логика функций зависят от него. Затем это HTML5 и CSS3, которые используются для создания структуры и стиля страниц; особенно важны медиаквери для реагирования на разные устройства, а также современные модели размещения элементов (например, Flexbox и Grid). Также важно иметь базовые знания JavaScript для реализации интерактивных элементов. Наконец, необходимо глубоко понимать основные концепции WordPress, такие как иерархия шаблонов, циклы обработки статей, хуки (Hooks) и фильтры (Filters).

Что делает параметр `Text Domain` в файле `style.css`?

Text DomainЭто ключевой идентификатор, отвечающий за интернационализацию и локализацию темы. Его функция – создать уникальное пространство имен для всех переводимых строк в вашей теме. В коде, когда вы используете такие инструменты…__('Hello World', 'my-modern-theme')или_e('Read More', 'my-modern-theme')В такой функции перевода второй параметр представляет собой текстовый блок. Это обеспечивает, что инструменты перевода (например, Poedit) смогут правильно идентифицировать и извлечь строки, относящиеся к вашей теме, что в свою очередь позволяет создать качественный перевод..poи.moПереводите файлы таким образом, чтобы их содержимое могло быть легко переведено на любой язык.

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

Чтобы тема поддерживала миниатюры статей (также называемые изображениями-заголовками), вам необходимо внести соответствующие изменения в настройки темы.functions.phpДобавьте в файл соответствующее заявление о поддержке используемых тем.add_theme_support()Функция, и передать её параметры.'post-thumbnails'Параметры. Их можно активировать для всех типов статей или указать, чтобы они применялись только к определенным типам статей (например, к статьям о…).postиpageЭта функция должна быть активирована.

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

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

Почему рекомендуется использовать функцию get_template_part?

get_template_part()Функции являются одной из лучших практик при разработке тем для WordPress, позволяющих повторно использовать код и создавать модульную структуру программы. Они используются в основном для разделения часто используемого кода шаблонов (например, HTML-структуры, отвечающей за отображение содержимого статей) на отдельные файлы-компоненты. Это имеет несколько значительных преимуществ: в первую очередь, это повышает читаемость и удобство обслуживания кода. Основной файл шаблона (например,index.phpСтруктура стала гораздо более лаконичной; кроме того, была улучшена гибкость системы – теперь возможно загружать различные файлы компонентов в зависимости от условий (например, типа статьи).get_template_part( 'template-parts/content', 'page' )Будет осуществлено приоритетное загрузочное выполнение.content-page.phpВ-четвертых, это облегчает изменение внешнего вида родительской темы путем использования дочерних тем: для этого достаточно предоставить файл с тем же именем, содержащий необходимые изменения.