# Темы



# Темы: введение

Два вида тем: классические (поддерживают все версии WP, php-js-html) и блочные (с версии 5.9, WYSIWYG-конструктор). Есть гибридные, но это моветон.

**Создание новой блочной темы:**

Либо модифицируя во встроенном редакторе существующую тему, либо используя плагин

**Экспорт тем**

**Экспорт блочных тем через стандартный экспортер:**

При редактировании любой страницы темы нажать Настройки - Export Zip. Тема сохранится в zip файле, который импортируется в другой проект.

<details id="bkmrk-%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D1%83%D0%BD%D0%BA%D1%82%D0%B0-%D0%BC%D0%B5"><summary>Размещение пункта меню Export Zip</summary>

[![export_theme.jpg](http://bobrobotirk.ru/uploads/images/gallery/2024-07/scaled-1680-/export-theme.jpg)](http://bobrobotirk.ru/uploads/images/gallery/2024-07/export-theme.jpg)

</details>**Экспорт блочной темы через плагин Create Block Theme (**[Плагины](http://bobrobotirk.ru/books/wordpress/page/spisok-plaginov "Плагины")**)**

Очень похоже на стандартный экспорт.

**Изменение имени темы**

При экспорте обновленной темы сохраняется название предыдущей темы. Для изменения после экспорта нужно:

- Распаковать архив.
- Переименовать созданную папку
- В корне созданной папки открыть style.css и изменить параметры имени шаблона, адреса размещения шаблона, имени разработчика, адреса сайта разработчика: ```css
    /*
    Theme Name: Twenty Twenty-Four
    Theme URI: https://wordpress.org/themes/twentytwentyfour/
    Author: the WordPress team
    Author URI: https://wordpress.org
    ...
    ```
- Желательно добавить в корень файл screenshot.\[png|jpg\] для отображения скрина темы
- Заархивировать папку

**Структура проекта шаблона**

```bash
parts/
  footer.html
  header.html
patterns/
  example.php
styles/
  example.json
templates/
  404.html
  archive.html
  index.html (required)
  singular.html
README.txt
functions.php
screenshot.png
style.css (required)
theme.json
```

**style.css**

**Метаданные шаблона:**

Записываются между открывающих и закрывающих комментариев /\* \*/

<table border="1" id="bkmrk-%D0%9F%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80-%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 17.1695%;"></col><col style="width: 82.8305%;"></col></colgroup><thead><tr><td class="align-center">Параметр</td><td class="align-center">Определение</td></tr></thead><tbody><tr><td>Theme name:</td><td>Название темы</td></tr><tr><td>Theme URI:</td><td>Адрес страницы темы</td></tr><tr><td>Description:</td><td>Описание темы</td></tr><tr><td>Version:</td><td>Версия в формате X.X или X.X.X</td></tr><tr><td>Author:</td><td>Имя автора или организации - автора темы</td></tr><tr><td>Author URI:</td><td>Адрес автора</td></tr><tr><td>Tags:</td><td>Разделенные запятыми теги. [Здесь](https://make.wordpress.org/themes/handbook/review/required/theme-tags/) размещены теги для размещения в официальном хранилище, но для своих тем может быть другая система.</td></tr><tr><td>Text Domain:</td><td>Дословно: Строка, используемая в текстовом домене для переводов. Хз что такое практически. Но данное имя используется при названии папки темы, а также префикс при инклуде CSS JS</td></tr><tr><td>Domain Path:</td><td>Связано с переводом.</td></tr><tr><td>Tested up to:</td><td>Максимальный номер версии WP, на котором тестировался шаблон</td></tr><tr><td>Requires at least:</td><td>Минимальная версия, на которой тестировался шаблон.</td></tr><tr><td>Requires PHP:</td><td>Минимальная требуемая версия PHP</td></tr><tr><td>License: Licence URI:</td><td>Название и адрес лицензии.</td></tr><tr><td>Template:</td><td>Название темы-родителя (обычно совпадает с названием папки). Используется при написании темы-потомка.</td></tr></tbody></table>

**Специфичные стили шаблона**

Глобально применяемые стили. Обычно для этого используют файл theme.json но иногда этого не хватает.

index.html Шаблон по-умолчанию для страниц.

**theme.json**

Файл настроек глобальных переменных, стилей шаблона. Структура файла:

```json
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {},
	"patterns": []
}
```

**version:** версия json-схемы у файла. Сейчас 2.  
**$schema:** адрес схемы, для поддержки редакторами.  
**settings:** какие элементы управления блоками отображаются, настройки пресетов и многого другого.  
**styles:** применения цветов, размеров шрифтов, пользовательского CSS и других стилей к веб-сайту и блокам.  
**customTemplates:** Метаданные для пользовательских шаблонов, определенных в папке /templates вашей темы.  
**templateParts:** Метаданные для частей шаблона, определенных в папке /parts вашей темы.  
**patterns:** массив шаблонных элементов, которые должны быть зарегистрированы из каталога шаблонов.

Раздел styles

Поддерживаемые уровни

- Глобальный, добавляется на верхний уровень иерархии styles ```json
    {
    	"version": 2,
    	"styles": {
    		"color": {
    			"text": "#000000",
    			"background": "#f5f1ea"
    		}
    	}
    }
    ```
- Элементы ```json
    {
    	"version": 2,
    	"styles": {
    		"elements": {
    			"button": {
    				"color": {
    					"text": "#ffffff",
    					"background": "#aa3f33"
    				}
    			}
    		}
    	}
    }
    ```
    
    Поддерживаемые элементы:
    
    
    - button
    - caption
    - cite
    - heading
    - h1 - h6
    - link
- Блоки

**Добавление включений (assets).**

Функции получения адресов:

- [`get_stylesheet_uri()`](https://developer.wordpress.org/reference/functions/get_stylesheet_uri/): Возвращает адрес до файла `style.css` активной темы.
- [`get_theme_file_uri( $file )`](https://developer.wordpress.org/reference/functions/get_theme_file_uri/): Возвращает URL активной темы, с необязательным параметром `$file`. Отдает URL родительской темы если в дочерней нет файла.
- [`get_parent_theme_file_uri( $file )`](https://developer.wordpress.org/reference/functions/get_parent_theme_file_uri/): Отдает URL родительской темы с необязательным параметром `$file`.

**Внедрение общего CSS**

Необходима в файл functions.php добавить хук на событие wp\_enqueue\_scripts. Функция, выполняющаяся при вызове, должна содержать одну или более функцию wp\_enqueue\_style

```php
add_action( 'wp_enqueue_scripts', 'your_name_of_function' );
```

```php
wp_enqueue_style( 
	string $handle, 
	string $src           = '', 
	string[] $deps        = array(), 
	string|bool|null $ver = false, 
	string $media         = 'all'
);
```

**$handle** имя или ID файла стиля, префикс должен быть имя темы (параметр Text Domain в настройках).  
**$src** URL файла стиля.  
**$deps** массив файлов стилей, от которых зависит включаемый стиль.  
**$ver** версия  
**$media** для какого типа данных используется этот стиль, например all (default), screen, print, handheld.

Пример:

В файл functions.php добавляем код:

```php
add_action( 'wp_enqueue_scripts', 'theme_slug_enqueue_styles' );

function theme_slug_enqueue_styles() {
	wp_enqueue_style( 
		'theme-slug-style', 
		get_stylesheet_uri()
	);
    wp_enqueue_style( 
		'theme-slug-primary',
		get_parent_theme_file_uri( 'assets/css/primary.css' )
	);
}
```

**Внедрение inline CSS (точно не догнал)**

Используется функция

```php
wp_add_inline_style( 
	string $handle, 
	string $data 
);
```

- **$handle** уже существующий ID файла стиля (добавленный ранее при помощи wp\_enqueue\_style)
- **$data** фильтр для добавления в страницы

[Внедрение стилей и JS](https://developer.wordpress.org/themes/core-concepts/including-assets/)

**Внедрение JS**

Аналогично стилям, только функция

```php
wp_enqueue_script( 
	string $handle, 
	string $src           = '', 
	string[] $deps        = array(), 
	string|bool|null $ver = false, 
	array|bool $in_footer = false
);
```

- **$handle:** имя или ID файла стиля, префикс должен быть имя темы (параметр Text Domain в настройках).
- **$src:** URL файла стиля
- **$deps:** Массив имен скриптов, от которых зависит данный скрипт
- **$ver:** версия
- **$in\_footer:** Определяет точку загрузки скрипта и тип загрузки (синхронных/асинхронный). Массив значений: 
    - strategy: 'defer' (по умолчанию) или 'async'
    - in\_footer: Логическое, false - в header

Пример:

```php
add_action( 'wp_enqueue_scripts', 'theme_slug_enqueue_scripts' );

function theme_slug_enqueue_scripts() {
	wp_enqueue_script( 
		'theme-slug-navigation',
		get_parent_theme_file_uri( 'assets/js/navigation.js' ),
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);
}
```

Также может быть inline, editor.

**Внедрение изображений**

Внедрение в шаблон изображений напрямую встречается нечасто, но пример для внедрения из родительского или дочернего:

```php
<img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/img/example.webp' ) ); ?>" alt="" />
<img src="<?php echo esc_url( get_theme_file_uri( 'assets/img/example.webp' ) ); ?>" alt="" />
```

# Темы: разметка

Каждый шаблон/блок/часть состоит из функциональных блоков.

Редактирование: Внешний вид-Редактор-Шаблоны-Нужный шаблон-Три точки справа-Редактор кода

Общая структура функционального блока:

```html
<!-- wp:namespace/slug {"align":"full"} /-->
```

- **Prefix:** Префикс wp: определяет, что это не комментарий
- **Namespace:** Пространство имен блока (при использовании core блоков, пространство имен не используется)
- **Slug:** имя файла блока
- **Block Settings:** JSON для настройки блока

Например, шаблон страницы с header, footer

```html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:template-part {"slug":"loop","align":"full"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
```

**Создание нового шаблона**

Создаваемый шаблон: content-canvas

- Создать пустой файл content-canvas.html в templates ```bash
    docker exec -it id_cont bash #в случае докера
    cat /dev/null > content-canvas.html
    ```
- Зарегистрировать шаблон в themes.json ```json
    {
    	"customTemplates": [
    		{
    			"name": "content-canvas",
    			"title": "Content Canvas",
    			"postTypes": [
    				"page",
    				"post"
    			]
    		}
    	]
    }
    ```
- Редактировать в редакторе кода, например: ```html
    <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
    
    <!-- wp:group {"tagName":"main","layout":{"type":"default"}} -->
    <main class="wp-block-group">
    	<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
    </main>
    <!-- /wp:group -->
    
    <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
    ```

Через редактор кода можно к одному элементу применить нужный класс.