CheIT Start Theme

Інформація про тему

Структура папок

• frontend/assets/ – css, js, зображення, js бібліотеки, шрифти...

  • backend/ - якщо BE розробнику необхідні свої стилі (поза стандартною збіркою)

    • css/

    • js/

  • css/

  • images/

  • js/

  • libs/

  • fonts/

• acf-blocks – Папка зi згенерованими ACF блоками

• acf-options – Папка зi згенерованими ACF сторінками опцій

• acf-pages – Папка зi згенерованими page templates та ACF полями

• includes – основний функціонал теми

  • config – конфігурація теми

    • config.php – конфігураційний масив з усіма налаштуваннями теми

    • styles-and-script.php – підключення стилів і скриптов

  • core - ядро теми

    • setup-theme.php – встановлення теми

    • functions.php – функції ядра та ajax обробники

    • GENERAL_CLI.php – WP CLI команди для теми

    • security.php – безпекові заходи

  • modules – модулі (наприклад налаштування пошуку, шорткоди чи змiна структури меню)

  • acf.php – зміна функціональності плагіну ACF Pro

  • helpers.php – допоміжні функції

• template-parts

• 404.php

• footer.php

• functions.php

• header.php

• index.php

• page.php

• screenshot.png

• search.php

• single.php

• style.css

WP CLI команди для роботи з темою

Створення acf блоків для гутенберг (add_block)

Приклад

wp general add_block "Hero" --fields="Title test",description:textarea,list:repeater[text,descr:textarea],checklist:checkbox[first,last],bg:image,sel:select[A,B,C]

Структура папок

• acf-blocks

  • назва-блоку

    • index.php - Шаблон блоку (створюється автоматично)

    • preview.jpg - прев'ю блоку (яке відображається в редакторі Gutenberg). Приблизна ширина посадкового місця прев'ю 450px

      

      

    • block.json - структура блоку

Приклад файлу block.json

{
	"name": "acf/Назва-блоку",
	"title": "Назва блоку",
	"description": "Опис блоку",
	"version": "1.0.0",
	"category": "sections",
	"icon": "admin-page",
	"example": {
		"attributes": {
			"mode": "preview",
			"data": { "preview": true }
		}
	},
	"acf": {
		"mode": "edit",
		"postTypes": ["page","post"],
		"renderTemplate": "index.php"
	},
	"custom_scripts": [ "/js/{FileName}.min.js" ],
	"custom_styles": [ "/css/{FileName}.min.css" ]
}

Custom recourses

Створення сторінок з шаблоном і ACF полями (add_page)

Приклад

wp general add_page "Contact us" --fields=title,description:textarea

Опис

Буде створений шаблон, сама сторінка з назначеним цим шаблоном, створені ACF поля для цієї сторінки та підключений код ACF до цього темплейту.

Структура папок

• acf-pages

  • Назва сторінки

    • template.php - Шаблон сторінки

    • index.php - Додаткові поля сторінки

ACF поля для add_page, add_option, add_block

Атрибути

--fields

Формат

Назва-поля:Тип-поля (якщо тип поля не вказаний то тип поля ставиться text, якщо назва поля складається з більш ніж одного слова то воно обромляється подвійними лапками)

Типи полів

textarea - Текстове поле

editor - Текстове поле

email - Email

link - Link

repeater[тут так само описуються поля]

checkbox[A,B,C] - де A B C - список

radio[A,B,C] - де A B C - список

select[A,B,C] - де A B C - option

image - Зображення

true_false - True-false чекбокс

Деякi особливостi

Створення власних Post Types та Taxonomies

Створення сторінок ACF опцій

Для зручності в admin bar було додано веидення поточних сторінок (зі збереженням ієрархії)

ACF блоки

Під час генерації ACF блоку необхідно в файлi block.json вказати йому зрозумілу назву, зрозумілий опис і завантажити прев'ю (в ідеальному випадку було б чудово і ще вказати відповідну іконку).

Назва ACF блоку

Опис ACF блоку

Превью блока

Додавання SVG іконок

Якщо необхідно вставити svg іконку, яка не потребує редагування із адміністративної частини сайту, то необхідно вивести шаблон:

template-parts/partials/social-icons.php

Наприклад для іконки search.svg

get_template_part('template-parts/partials/sprite', 'icon', [ 'icon' => 'search' ]); 

В цьому випадку скрипт підвантажить зібраний sprite.svg

<svg class="icon icon_search">
	<use href="../wp-content/themes/general/frontend/assets/icons/sprite.svg?v=1.0#search"></use>
</svg>

Якщо необіходно дадати можливість вибору іконки в адміністративній частині файлу (як показує практика - для роботи з полями типу repeater):

• Обов'язково створити поле під назвою theme_icons і вибрати тип select, checkbox або radio

• В цьому випадку спрацює метод che_acf_load_field_theme_icons із файлу includes/acf.php

• Для значень цього поля (choises) автоматично підтягнуться усі існуючі іконки *.svg із папки frontend/src/icons/, після чього можно буде вибрати необхідну іконку. Якщо будуть додані нові іконки, то вони також покажуться у списку значень.

Для зручності і наглядності підвантажуються самі іконки для всіх типів полів

Робота із зображеннями

При роботі із зображеннями може виникнути необхідність додати проміжні розміри зображень для різних брейкпоінтів - розмірів екрану. Наприклад, на великих екранах у вас є 4 зображення в ряд, розміром 300x300px, а на мобільній версії вони перебудовуються в колонку і зображення розтягується на 100%. В цьому випадку, якщо ви явно вказали розмір ['300', ‘300’] - ви отримаєте зображення поганої якості на екранах більшої роздільної здатності, ніж розмір зображення.

Аби цього уникнути, можна використати параметр ['custom_srcset'] де через крапку з комою вказати бажані розміри зображень для різних розмірів екрану. У цьому випадку WordPress згенерує зображення за вашими розмірами і обиратиме для завантаження оптимальне з наявних.

Наприклад

echo wp_get_attachment_image($image['ID'], [300, 300], false, ['custom_srcset' => '750,700;550,500']

functions.php

Додавання своїх констант

define( 'MY_CONSTANT', 'MY_CONSTANT_VALUE' );

Підключення *.php файлів. Файли, які підключаються, мають бути "спеціалізованими", наприклад:

• для модифікації функціоналу WooCommerce

• створення завантажувача CSV-файлів на сторінці налаштувань

require_once THEME_MODULES_DIR . '/woo-customize.php';
require_once THEME_MODULES_DIR . '/csv-loader.php';

wp-config.php

Для перевірок робочого оточення необхідно використовувати функцію wp_get_environment_type:

• Для локального сайту Local WP автоматично проставляє значення local

• Для stage сайту автоматично встановиться значення staging

• Для production сайту необхідно буде вручну вказати значення production

$is_local      = strpos( $server_name, 'local' ) !== false;
$is_cheapgroup = strpos( $server_name, 'cheitgroup' ) !== false;

Покращення теми

Якщо у Вас є ідея як можна поліпшити\оптимізувати тему, то Ви можете запропонувати це наступним чином:

1. Склонувати проект (або оновити до актуального стану поточний)

2. З гілки stage створити нову гілку (назва гілки - короткий опис поліпшення, наприклад change-block-preview)

3. Зробити коміт та опублікувати гілку

4. Створити merge request у гілку stage та додати інформацію в поле Description (якщо це необхiдно)

5. Якщо код пройде рев'ю Тех\Тим Лідом, Ваш merge request буде схвалено. Пiсля цього покращення буде автоматично опубліковано в архіві теми