Разработка тем для WordPress: от основ до продвинутых техник
Разработка тем WordPress на PHP: практическое руководство
Создание тем для WordPress - ключевой навык для кастомизации сайта. В этой части разбираются основные подходы и их реализация с примерами кода.
Как создать дочернюю тему для безопасного изменения родительской темы?
Дочерняя тема позволяет вносить изменения, не затрагивая оригинальную тему, что упрощает обновления. Создайте папку в wp-content/themes/ (например, my-child-theme) и два файла: style.css и functions.php.
/*
Theme Name: My Child Theme
Template: twentytwentythree
*/
<?php
// functions.php
add_action('wp_enqueue_scripts', 'my_child_theme_styles');
function my_child_theme_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
}
После активации дочерняя тема унаследует файлы родительской, но вы сможете переопределять шаблоны, добавляя в дочернюю тему файлы с теми же именами.
Типичная ошибка: неправильное имя в Template (должно совпадать с папкой родительской темы). Если тема не отображается - проверьте синтаксис style.css.
Как создать тему с нуля, используя стартовую тему Underscores?
Underscores (или просто _s) - минималистичная базовая тема, оптимизированная под стандарты WordPress. Скачайте архив с underscores.me, задав название, или клонируйте репозиторий. После установки добавьте свои стили и функционал.
// Пример переопределения сайдбара в functions.php дочерней темы на основе _s
function my_child_widgets_init() {
register_sidebar(array(
'name' => 'Боковая колонка',
'id' => 'sidebar-1',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
));
}
add_action('widgets_init', 'my_child_widgets_init');
Цель:
создать полностью кастомизированную тему без лишних зависимостей.Ошибка: забыли подключить файл functions.php дочерней темы - используйте require_once внутри родительского functions.php (но в дочерней теме это не нужно, WordPress подключает его автоматически).
Как использовать фреймворк Genesis для ускорения разработки?
Genesis - премиум фреймворк тем с мощной системой хуков. Установите родительскую тему Genesis, а дочернюю создайте по её шаблону. Пример добавления контента перед заголовком через хуки:
add_action('genesis_before_entry', 'custom_before_entry_content');
function custom_before_entry_content() {
echo '<p class="fw-bold">Дополнительный текст перед записью</p>';
}
Случаи использования: быстрая разработка с готовой SEO-оптимизацией и доступностью.
Проблема: при отключении родительской темы все дочерние перестают работать. Всегда используйте дочернюю тему поверх Genesis.
Как создать тему на базе Sage (Acorn) с современной сборкой?
Sage (ранее Roots) - стартовый шаблон на основе Laravel Blade и Webpack. Установите через Composer:
composer create-project roots/sage your-theme-nameЗатем настройте окружение (.env) и запустите сборку. Пример контроллера для главной страницы (файл app/controllers/App.php):
<?php
namespace App;
use Timber\Timber;
class FrontPage extends Controller
{
public function index()
{
$context = Timber::context();
$context['posts'] = new \Timber\PostQuery();
Timber::render('pages/front-page.twig', $context);
}
}
Для работы требуется Timber (плагин для Twig). Такой подход подходит для сложных проектов с модульной архитектурой.
Ошибка: если не установлен Node.js и Composer, сборка не запустится. Убедитесь в наличии зависимостей.
Расширенные примеры разработки тем WordPress
Дополнительные сценарии с подробными шагами и кодом.
Кастомный тип записи и таксономия
Создайте тип записи portfolio и таксономию project_category. Разместите в functions.php темы.
function create_portfolio_post_type() {
register_post_type('portfolio', [
'labels' => [
'name' => 'Портфолио',
'singular_name' => 'Работа',
],
'public' => true,
'has_archive' => true,
'rewrite' => ['slug' => 'portfolio'],
'supports' => ['title', 'editor', 'thumbnail'],
]);
}
add_action('init', 'create_portfolio_post_type');
function create_project_taxonomy() {
register_taxonomy('project_category', 'portfolio', [
'labels' => [
'name' => 'Категории проектов',
'singular_name' => 'Категория',
],
'hierarchical' => true,
'rewrite' => ['slug' => 'project-category'],
]);
}
add_action('init', 'create_project_taxonomy');
После активации в админке появится новый раздел «Портфолио», внутри можно добавлять записи и назначать категории.
Создание произвольного виджета
Добавьте виджет, выводящий последние записи портфолио.
class Portfolio_Widget extends WP_Widget {
function __construct() {
parent::__construct(
'portfolio_widget',
'Портфолио виджет',
['description' => 'Выводит последние работы из портфолио']
);
}
public function widget($args, $instance) {
$query = new WP_Query(['post_type' => 'portfolio', 'posts_per_page' => 5]);
echo $args['before_widget'];
if ($query->have_posts()) {
echo '<ul>';
while ($query->have_posts()) {
$query->the_post();
echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
}
echo '</ul>';
}
echo $args['after_widget'];
}
public function form($instance) {
// Поле настроек можно добавить по необходимости
}
}
add_action('widgets_init', function() {
register_widget('Portfolio_Widget');
});
Внешний интерфейс виджета отобразится в боковой колонке после его добавления.
Шорткод для вставки галереи изображений
Создайте шорткод [portfolio_gallery ids="1,2,3"].
function portfolio_gallery_shortcode($atts) {
$atts = shortcode_atts(['ids' => ''], $atts);
$ids = explode(',', $atts['ids']);
$output = '<div class="portfolio-gallery">';
foreach ($ids as $id) {
$img = wp_get_attachment_image($id, 'medium');
if ($img) {
$output .= '<div class="gallery-item">'.$img.'</div>';
}
}
$output .= '</div>';
return $output;
}
add_shortcode('portfolio_gallery', 'portfolio_gallery_shortcode');
Использование: [portfolio_gallery ids="42,15,88"] выведет три миниатюры.Настройка кастомных полей через Customizer
Добавьте поле для логотипа в хедер.
function mytheme_customize_register($wp_customize) {
$wp_customize->add_section('header_section', [
'title' => 'Заголовок',
'priority' => 30,
]);
$wp_customize->add_setting('header_logo', [
'default' => '',
'sanitize_callback' => 'esc_url_raw',
]);
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'header_logo', [
'label' => 'Логотип',
'section' => 'header_section',
'settings' => 'header_logo',
]));
}
add_action('customize_register', 'mytheme_customize_register');
// Вывод в header.php
// <img src="<?php echo get_theme_mod('header_logo', ''); ?>" alt="Логотип">
В админке появится раздел «Настройки темы» -> «Заголовок» с загрузкой изображения.
Добавление поддержки блоков Gutenberg
Зарегистрируйте блок «Цитата» с динамическим рендерингом.
// В functions.php
function register_custom_block() {
wp_register_script(
'custom-block',
get_template_directory_uri() . '/blocks/custom-block.js',
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(get_template_directory() . '/blocks/custom-block.js')
);
register_block_type('mytheme/custom-block', array(
'editor_script' => 'custom-block',
'render_callback' => 'render_custom_block',
));
}
add_action('init', 'register_custom_block');
function render_custom_block($attributes, $content) {
$className = isset($attributes['className']) ? $attributes['className'] : '';
return '<div class="custom-block '.esc_attr($className).'">'.esc_html($attributes['quote']).'</div>';
}
// blocks/custom-block.js
( function( blocks, element ) {
var el = element.createElement;
blocks.registerBlockType( 'mytheme/custom-block', {
title: 'Цитата',
icon: 'format-quote',
category: 'widgets',
attributes: {
quote: { type: 'string', default: 'Ваша цитата' }
},
edit: function( props ) {
return el( 'p', { className: 'custom-block-edit' }, props.attributes.quote );
},
save: function() {
return null; // динамический рендер
}
} );
} )( window.wp.blocks, window.wp.element );
В редакторе появится блок «Цитата», а на фронтенде он отобразится через PHP.