Первая тема WordPress

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Первая тема WordPress

Создадим дочернюю тему поверх стандартной Twenty Twenty-Four — безопасный способ кастомизации: обновления родительской темы не затирают ваш код.

Обзор CMS: WordPress.

---

Локальная установка

Варианты:

• Local WP, DDEV, Docker;
• хостинг с PHP + MySQL и установщиком на https://site/wp-admin/install.php.

После установки в админке: Внешний вид → Темы — активируйте Twenty Twenty-Four (или другую блочную тему по умолчанию).

---

Структура дочерней темы

Каталог: wp-content/themes/ituniverse-child/

ituniverse-child/
  style.css
  functions.php
  index.php

style.css (обязательные метаданные)

/*
Theme Name: IT Universe Child
Template: twentytwentyfour
Version: 1.0.0
Description: Учебная дочерняя тема
*/

/* Дополнительные стили */
.site-title a {
  color: #2563eb;
}

Template должен совпадать с папкой родительской темы (twentytwentyfour).

functions.php

<?php

add_action('wp_enqueue_scripts', function () {
    $parent = 'twentytwentyfour-style';
    wp_enqueue_style($parent, get_template_directory_uri() . '/style.css');
    wp_enqueue_style(
        'ituniverse-child',
        get_stylesheet_uri(),
        [$parent],
        wp_get_theme()->get('Version')
    );
});

add_action('after_setup_theme', function () {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
});

index.php

Минимальный fallback-шаблон (для классических тем; у block-тем иногда достаточно theme.json, но index.php не помешает):

<?php get_header(); ?>

<main class="wp-block-group" style="padding:2rem">
  <h1><?php bloginfo('name'); ?></h1>
  <p><?php bloginfo('description'); ?></p>

  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
      <article <?php post_class(); ?>>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_excerpt(); ?>
      </article>
    <?php endwhile; ?>
  <?php else : ?>
    <p>Записей пока нет.</p>
  <?php endif; ?>
</main>

<?php get_footer(); ?>

Активируйте тему: Внешний вид → Темы → IT Universe Child → Активировать.

---

Свой виджет в подвале (хук)

functions.php:

add_action('wp_footer', function () {
    echo '<p style="text-align:center">Учебная тема · ' . esc_html(date('Y')) . '</p>';
});

esc_html() — экранирование вывода (защита от XSS).

---

Плагин «Hello» (опционально)

wp-content/plugins/ituniverse-hello/ituniverse-hello.php:

<?php
/**
 * Plugin Name: IT Universe Hello
 * Description: Учебный плагин
 * Version: 1.0.0
 */

add_shortcode('hello', function ($atts) {
    $name = isset($atts['name']) ? sanitize_text_field($atts['name']) : 'мир';
    return '<p>Привет, ' . esc_html($name) . '!</p>';
});

В редакторе записи: [hello name="WordPress"].

Активация: Плагины → IT Universe Hello.

---

Отладка

В wp-config.php (только локально):

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Лог: wp-content/debug.log.

---

Дальше

• theme.json и блочные шаблоны (FSE);
• CPT для портфолио;
• PHPUnit для плагинов с бизнес-логикой;
• Laravel — если проект перерастает CMS.

---