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

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

Настройка среды разработки и создание инфраструктуры

Прежде чем начать писать первую строку кода, необходимо создать эффективную среду локального разработки. Мы рекомендуем использовать такие инструменты, как Local by Flywheel, XAMPP или MAMP, чтобы быстро настроить локальный сервер с поддержкой PHP, MySQL, Apache и Nginx.

Необходимые файлы для создания темы:

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

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

Типичный… style.css Пример заголовка файла следующий:

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

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

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

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

Понимание иерархии шаблонов

WordPress использует сложную систему уровней шаблонов для определения того, какой шаблон должен быть использован при обработке различных типов запросов. Например, при запросе к статье в блоге WordPress последовательно ищет подходящий шаблон. single-post.php、single.phpИ наконец, самое главное. index.phpПонимание иерархических отношений между различными элементами сайта (главная страница, страницы статей, категории, архивы статей и т. д.) является ключом к эффективному разработческому процессу. Это позволяет создавать специализированные шаблоны для разных типов контента, обеспечивая при этом удобство их отображения пользователем.

Основной шаблонный файл и цикл тем (Core template file and theme cycle)

Функционал темы в основном реализуется с помощью серии PHP-шаблонных файлов. Каждый из этих файлов отвечает за конкретную часть веб-сайта.

Создание верхней и нижней частей веб-сайта

Модульнизация кода, используемого на всех страницах, является первым шагом на пути к профессиональному развитию программиста.header.php Файлы обычно содержат объявления типов документов, Регионы (для загрузки файлов CSS и JS, настройки мета-тегов) и общая область в верхней части веб-сайта (например, логотип и главная навигация). Вы можете использовать эти элементы для организации структуры сайта. get_header() Функция может быть использована в любом шаблоне.

Аналогичным образом…footer.php Файл содержит общий контент, расположенный в нижней части веб-сайта (например, информацию об авторских правах, нижний меню), а также элементы, обозначающие окончание страницы. 、 Метки, через… get_footer() Введение функций.

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

Освоение основного цикла работы WordPress

Основной цикл (The Loop) является сердцем любой темы для WordPress; он отвечает за извлечение и отображение содержимого статей из базы данных. Его базовая структура выглядит следующим образом:

<h2></h2>
    <div class="entry-content">
        
    </div>

    <p><?php _e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>

Внутри цикла вы можете использовать ряд шаблонных тегов (Template Tags) для отображения информации о статье. Например: the_title() Выведите заголовок,the_content() Пожалуйста, предоставьте полный текст, который нужно перевести с китайского языка на русский. Только тогда я смогу выполнить задание.the_excerpt() Вывести резюме.the_permalink() Получить ссылку на статью.the_post_thumbnail() Отображение специальных изображений и т. д.

Разработка тематических и пользовательских функций

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

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

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

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

Включить основные функции темы

Через add_theme_support() Функции: вы можете указать, какие основные функции WordPress ваша тема поддерживает. Обычно это делается в… functions.php Процесс завершён. Например, код для включения специальных изображений к статьям и использования пользовательского логотипа выглядит следующим образом:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo', array(
        'height' => 100,
        'width'  => 400,
    ) );
    add_theme_support( 'title-tag' ); // 让 WordPress 管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Создание меню и области боковой панели

WordPress позволяет пользователям визуально управлять навигационным меню через панель администрирования. Вам необходимо… functions.php Используйте это в Китае. register_nav_menus() Функция предназначена для регистрации местоположений элементов навигации, таких как “главная навигация” и “нижняя навигация”. Затем эти данные используются в файле шаблона. header.phpИспользуйте его в своём резюме. wp_nav_menu() Функция предназначена для её отображения.

Боковая панель (или также называемая “зона инструментов”) также требует регистрации. Используйте её. register_sidebar() Область определения функций позволяет пользователям в режиме работы “Внешний вид -> Приложения” перетаскивать различные приложения в эти области. В шаблонах это используется для настройки интерфейса. dynamic_sidebar() Функция предназначена для вывода содержимого области с мини-приложениями (инструментами).

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

Включение скриптов и таблиц стилей

Правильный способ включения ресурсов крайне важен. Никогда не следует напрямую указывать их адреса в файлы-шаблоны. или Маркировки. Ваши CSS- и JavaScript-файлы следует разместить в соответствующих местах проекта, чтобы их можно было легко настроить и использовать. Обычно это делается в специальных директориях или файлах конфигурации. wp_enqueue_scripts Загрузка плагинов осуществляется по очереди с использованием специальных механизмов управления очередью. Это гарантирует правильное установление зависимостей между плагинами и предотвращает возможные конфликты между ними.

function my_theme_scripts() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

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

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

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

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

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

Разработка пользовательских шаблонов страниц

Вы можете создать уникальный дизайн для конкретной страницы. Для этого достаточно добавить специальный комментарий в начало любого шаблона. После этого система WordPress будет распознавать этот шаблон как один из вариантов при создании или редактировании страницы. Например, чтобы создать шаблон под названием “Полноэкранная страница” («Full-width page»), выполните следующие действия:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板
 */
get_header(); ?>
// ... 全宽布局的代码 ...
<?php get_footer(); ?>

Реализация формата статей и пользовательских типов статей

Форматы статей (Post Formats), такие как “Журнал”, “Галерея”, “Видео” и другие, позволяют придавать различным типам блог-постов уникальный внешний вид. Их использование способствует улучшению читаемости и визуальной привлекательности контента. add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’ ) ) Чтобы включить это функциональное возможность и использовать её в шаблонах, необходимо выполнить следующие шаги: get_post_format() Используйте теги условий для управления стилем элементов интерфейса.

Для более сложных элементов контента, таких как “продукты” или “коллекции работ”, необходимо создать пользовательские типы статей (Custom Post Types). Обычно это делается с помощью настроек в панели управления сайтом или с использованием специальных плагинов. register_post_type() Функции, находящиеся в плагинах или темах (plugins/themes), выполняют определенные задачи в рамках работы этих компонентов. functions.php Эта работа позволяет добавить совершенно новый модуль управления контентом в интерфейс бэкенда WordPress.

Интеграция API Customiser

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

резюме

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

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

Для работы над разработкой тем (templates) обязательно нужно владеть PHP?

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

Почему мои изменения темы исчезли после обновления?

Это произошло потому, что вы напрямую изменили файлы сторонней темы, которая используется в вашем проекте. При выходе новой версии этой темы все ваши изменения будут стерты. Правильным подходом является создание дочерней темы (Child Theme). Дочерняя тема содержит только те изменения, которые вы сделали самостоятельно. style.css、functions.php Вместе с шаблонными файлами ваш проект наследует все функции родительской темы, и при обновлении родительской темы ваши пользовательские настройки останутся сохранены.

Каково особое назначение файла functions.php?

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

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

Реализация поддержки нескольких языков в теме (интернационализация и локализация) – это хорошая практика. Вам нужно сделать две вещи: во-первых, во всех местах в теме, где требуется перевод текста, использовать функции перевода WordPress (например, …). __()、_e()Они упаковываются в соответствующие контейнеры, и для каждого из них указывается место хранения или маршрут доставки. style.css Текстовый домен (Text Domain), определенный в коде. Затем с помощью таких инструментов, как Poedit, генерируются переводы строк на основе данных, содержащихся в коде. .pot Шаблонные файлы, и на их основе создаются версии на разных языках. .po и .mo Переводите документы.