Из каких файлов состоит блочная тема в WordPress?

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

Давайте рассмотрим основные файлы и папки, из которых состоит блочная тема.

1. style.css

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

Пример заголовка в style.css:

/*
Theme Name: My Block Theme
Theme URI: https://example.com
Author: John Doe
Author URI: https://example.com
Description: Блочная тема для WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: my-block-theme
*/

2. theme.json

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

Пример theme.json:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#3498db"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#2ecc71"
        }
      ]
    },
    "typography": {
      "fontSize": [
        {
          "name": "Small",
          "slug": "small",
          "size": "12px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "36px"
        }
      ]
    }
  }
}

3. index.php

Файл index.php — это стандартный файл WordPress, который используется как резервный шаблон для отображения содержимого. В блочных темах он может содержать только базовые элементы, поскольку основная работа выполняется через блоки и шаблоны.

4. Папка parts/

Эта папка предназначена для хранения шаблонных частей (template parts), таких как шапка (header), подвал (footer) или боковая панель (sidebar). Эти файлы создаются в виде отдельных блоков и могут быть использованы в разных частях сайта. Примеры файлов в папке parts/:

  • header.html
  • footer.html
  • sidebar.html

Каждый из этих файлов содержит HTML-разметку блоков, которые можно настраивать через редактор блоков.

5. Папка templates/

Файлы в папке templates/ — это основные шаблоны страниц сайта. Здесь хранятся такие файлы, как index.html, single.html и другие шаблоны, используемые для отображения различных типов контента (например, страниц блога, отдельных записей, архивов и т. д.).

Пример файлов в папке templates/:

  • index.html — основной шаблон для всех страниц.
  • single.html — шаблон для отдельных записей.
  • archive.html — шаблон для архивов записей.

6. functions.php

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

Пример кода в functions.php:

<?php
function my_block_theme_setup() {
    // Поддержка миниатюр
    add_theme_support( 'post-thumbnails' );
    
    // Поддержка стилей для редактора блоков
    add_theme_support( 'editor-styles' );
}
add_action( 'after_setup_theme', 'my_block_theme_setup' );

7. block-templates/ и block-template-parts/

Эти папки специфичны для блочных тем и используются для шаблонов и частей шаблонов, созданных непосредственно через редактор блоков. block-templates/ хранит шаблоны страниц, а block-template-parts/ — шаблонные части. Эти файлы можно редактировать через редактор шаблонов или вручную.

8. assets/

Это необязательная папка, в которой можно хранить файлы стилей, скрипты и другие статические ресурсы (например, изображения или шрифты). В зависимости от структуры темы, папка assets/ может содержать:

  • style.css или style.scss для кастомных стилей.
  • scripts.js для кастомных скриптов.

9. README.md

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

Почитаем еще?: