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

Подготовительные работы перед началом

Прежде чем приступать к написанию кода, необходимо убедиться, что среда разработки готова к использованию. Во-первых, вам понадобится локальная серверная среда — например, XAMPP, MAMP или Docker. Во-вторых, неотъемлемой частью работы является наличие кодового редактора; Visual Studio Code или PHPStorm являются отличными вариантами. Самое важное — установить последнюю версию WordPress и проверить, что она работает корректно.

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

В папке с темами WordPress существуют два файла, которые являются обязательными и необходимыми для запуска темы в минимальном объеме:style.cssиindex.phpБез них WordPress не сможет распознать ваш тематический дизайн в списке тем в разделе “Внешний вид” → “Темы” в режиме администрирования.

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

Понимание основной структуры файлов темы

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

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

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

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

Стильные таблицы и объявления информации о темах

style.cssФайлы используются не только для хранения CSS-стилей; их раздел с комментариями в начале служит WordPress для считывания метаданных (meta data) темы. Этот раздел должен находиться в самом начале файла и соответствовать определенному формату.

/*
Theme Name: 我的第一个主题
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
*/

“Text Domain” используется для обеспечения поддержки международных языков и является важным идентификатором для последующего загрузка файлов с переводами. После ввода всех необходимых данных обновите страницу настроек темы в панели управления WordPress, и вы должны увидеть миниатюру темы под названием “Моя первая тема”.

Какова роль основного шаблона файла?

index.phpЭто основной шаблон вашей темы, а также стандартный шаблон для возврата к предыдущей версии сайта. Когда WordPress не может найти более конкретный шаблон (например,single.phpилиpage.phpКогда это необходимо, используется следующий подход (или инструмент/метод).index.phpЕго основная структура включает в себя вызов заголовочного файла WordPress, основного блока содержимого и финального блока кода.

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

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

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

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

Разделить шаблоны шапки и подвала

Создатьheader.phpФайл содержит информацию о типе документа, а также код HTML-страницы.Части веб-сайта, а также его заголовки и навигационные элементы. Использовать (Use).wp_head()Эти «хаки» (механизмы автоматической настройки) обеспечивают правильное внедрение необходимых скриптов и стилей как в плагины, так и в основную часть системы WordPress.

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1003>

<header>
    <h1><a href="/ru/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

Создатьfooter.phpФайл содержит информацию о футере веб-сайта; в конце файла выполняется соответствующий вызов (то есть происходит обработка данных, связанных с футером).wp_footer()Крючок.

<footer>
    <p>©</p>
</footer>

</body>
</html>

Таким образом,index.phpВ этом случае мы сможем использовать…get_header()иget_footer()Для их использования необходимо ввести соответствующие функции.

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

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

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

Создание функционального файла

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

Ниже приведён…functions.phpОдин из базовых примеров:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的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_enqueue_scripts' );
?>

Создать больше файлов шаблонов.

Чтобы различные типы страниц имели более подходящий дизайн и структуру, нам необходимо создать больше специализированных шаблонов.

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

Страница статьи и шаблон страницы

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

page.phpПредназначен для отображения статических страниц. Как правило, он не отображает такую метаданные, как категории и теги, а сосредотачивается в основном на самом содержимом страницы.

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

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

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

Шаблон списка архивированных статей

archive.phpИспользуется для отображения категорий, тегов, авторов, дат и другой информации на архивных страницах. Вы можете использовать условные теги, такие как…is_category()、is_tag()Необходимо различать разные типы архивов и отображать соответствующие их названия.

Создать страницу с ошибкой 404.

404.phpЭто страница, которая отображается, когда пользователь пытается зайти по недоступному URL-адресу. Хорошая страница ошибки 404 должна содержать информативное и дружелюбное сообщение, поле для поиска и ссылки на главную страницу, чтобы помочь пользователю найти нужный контент.

резюме

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

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

Почему мой тематический файл (типа `###`) не отображается в меню настроек WordPress?
Пожалуйста, сначала проверьте, находится ли ваша папка с темами в правильном месте.wp-content/themes/В каталоге. Во-вторых, убедитесь, что в папке содержатся необходимые файлы.style.cssиindex.phpФайл. Наконец, откройте его.style.cssУбедитесь, что блок с аннотациями к теме файла в верхней части имеет полностью корректный формат, особенно…Theme Name:Эта строка.

Как добавить поддержку пользовательского логотипа для моей темы?

Вам необходимо сделать что-то в рамках данной темы (то есть в соответствии с требованиями или направлением, определенными этой темой).functions.phpДля включения этой функции добавьте строку кода в файл. Используйте следующий формат:add_theme_support( ‘custom-logo’ )Функция. После её активации пользователи смогут загружать и настраивать логотип в разделе “Внешний вид” -> “Настройки” -> “Идентификатор сайта”. Вам также потребуется…header.phpИспользуйте это в подходящем месте.the_custom_logo()Функция предназначена для её отображения.

В чем разница между файлом functions.php, который находится в корневой директории проекта, и плагинами?

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

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

Вам необходимо выполнить две вещи. Во-первых, во время разработки обязательно используйте функции перевода для всех строк, предназначенных для пользователей. Например…__( ‘文本’, ‘my-first-theme’ )или_e( ‘文本’, ‘my-first-theme’ )И убедитесь, что…‘my-first-theme’иstyle.cssВо-первых, необходимо убедиться, что указанный “Text Domain” совпадает с тем, который используется в вашем проекте. Во-вторых, с помощью таких инструментов, как Poedit, необходимо извлечь все строки, подлежащие переводу, из кода вашей темы и создать список для перевода..potФайлы затем переводчики преобразуют в версии на соответствующих языках..poИ после компиляции.moФайл должен быть помещен в соответствующий раздел темы (theme)./languages/Внутри каталога.