�ݺ�ߣ

Створення власної стартової теми
Тонієвич Андрій

Що таке стартова тема?
Стартова тема – це основа для створення проекту на WordPress. Вона часто включає:
- Код для ініціалізації областей меню та віджетів
- Створення нових типів записів та таксономій
- Функції для обробки подій та фільтрації даних
- Реєстрація стилів, скриптів та розмірів мініатюр
- Код для обробки AJAX-запитів
- Модулі для виводу навігації по сторінкам та по сайту в цілому
- Функції для вирішення типових задач на зразок обрізки тексту, виводу заголовків,
роботи з деревами категорій та багато іншого

Підходи до організації коду
1. Весь функціонал теми розміщується в файлі functions.php
2. Код розподіляється по окремим великим файлам без чіткого розділення по
задачам та без явних обмежень
3. Весь код розбивається на незалежні модулі в окремих файлах. Один модуль має
містити весь необхідний функціонал для реалізації основної задачі. Для обміну
даними використовується спеціальний інтерфейс

Навіщо розбивати код на незалежні модулі?
1. Незалежний модуль набагато простіше розробляти і тестувати
2. Модулі відчутно легше переносити в інші проекти
3. Цей підхід дозволяє тримати під контролем складність проекту
4. Розбивка на модулі надає більше гнучкості при розробці та тестуванні проекту

Стартова тема Twee
Короткий опис роботи:
1. В functions.php підключається файл init.php
2. Ініціалізація починається з включення файлу loader.php, який в свою чергу підключає
налаштування теми в settings.php, а також всі модулі в папках core, ajax та modules.
Модулі з віджетами підключаються трохи пізніше
3. Налаштування теми встановлюються та зчитуються за допомогою функцій
tw_get_setting() та tw_set_setting()
4. Далі в init.php запускається процес ініціалізації теми, додавання областей меню,
підключення перекладу, реєстрація вказаних розмірів мініатюр, типів записів і
таксономій, областей для віджетів і стилів редактора. Реєстрація стилів та скриптів
(assets) має свої особливості та здійснюється окремо в модулі assets.php
Репозиторій проекту: https://github.com/TwistedAndy/wp-theme

Створення віджетів
Для спрощення створення віджетів в стартовій темі Twee присутній клас Twisted_Widget.
Він дозволяє в автоматично виводити необхідні поля в налаштуваннях та виконувати їх перевірку.
Для реалізації віджета необхідно:
1. Створити новий файл /includes/widgets/name.php
2. Описати клас Twisted_Widget_Name, що наслідує Twisted_Widget
3. Вказати необхідні налаштування в полі fields
4. Реалізувати конструктор:
$settings['widgets'] = array( 
'posts' => false, 
'name' => true 
);
function __construct() { 
parent::__construct('twisted_widget_name', ‘Назва віджету', array('description' => ‘Короткий опис')); 
}
5. Підключити віджет в settings.php:

Приклад віджета
class Twisted_Widget_Comments extends Twisted_Widget { 
 
public $fields = array( 
'title' => array( 
'name' => 'Заголовок', 
'value' => 'Останні коментарі', 
'type' => 'text', 
'filter' => 'widget_title' 
), 
'number' => array( 
'name' => 'Кількість коментарів', 
'value' => 5, 
'type' => 'number' 
), 
); 
 
function __construct() { 
parent::__construct('twisted_widget_comments', 'Останні коментарі', array('description' => 'Останні коментарі з фото')); 
} 
 
public function widget($args, $instance) { 
 
$instance = $this->fields_load($instance, false); 
 
echo $args['before_widget']; 
 
if ($instance['title']) echo $args['before_title'] . $instance['title'] . $args['after_title']; 
 
$items = get_comments(array('status' => 'approve', 'number' => $instance['number'])); 
 
/* Тут код самого віждета */ 
 
echo $args['after_widget']; 
 
} 
 
}
Можливі значення типу поля:
• text
• textarea
• select
• checkbox
• radio

Навігація по сторінкам
Параметри виводу навігації по сторінкам (pagination) можна налаштувати в settings.php:
Повний список параметрів можна знайти в файлі з модулем: /includes/modules/pagination.php
Для виводу мініатюр можна використовувати функцію:
tw_pagination($args = array(), $query = false);
$args – массив параметрів, що перезаписують налаштування в самій темі. З важливого варто відмітити
параметр ‘type’, що може приймати значення ‘post’ для сторінок з записами, ‘comments’ для навігації по
коментарям та ‘page’ для навігації по статичній сторінці.
$query – об'єкт WP_Query. Це буває корисно, коли потрібно вивести навігацію для власного циклу
'pagination' => array( 
'prev' => '◄', 
'next' => '►', 
'first' => false, 
'last' => false, 
),

Навігація по сайту
Параметри виводу навігації по сайту (breadcrumbs) можна налаштувати в settings.php:
Повний список параметрів можна знайти в файлі з модулем: /includes/modules/breadcrumbs.php
Для виводу навігації використовувати функцію:
tw_breadcrumbs($separator = '', $before = '<div class="breadcrumbs">', $after = '</div>’)
З особливостей варто відмітити параметр microdata. Якщо його встановити рівним ‘json’, то модуль буде автоматично генерувати
мікророзмітку в форматі JSON-LD та додавати її в секцію head сайту. Також підтримується додавання мікророзмітки безпосередньо в
блок з навігацією (значення ‘inline’)
 
'breadcrumbs' => array( 
'microdata' => 'json', 
'include_archive' => false, 
'include_current' => true 
),

Зображення та мініатюри у WordPress
Особливості реалізації:
1. Всі зображення виділені в окремий тип записів attachment
2. Розміри мініатюр реєструються за допомогою функції add_image_size()
3. Мініатюри генеруються при додаванні нового зображення для всіх зареєстрованих розмірів
4. Для виводу мініатюр використовуються функції get_the_post_thumbnail(),
wp_get_attachment_image() та інші
Основні проблеми:
1. При великій кількості розмірів зображень стає дуже багато
2. Не завжди можливо отримати зображення чітко у вказаному розмірі через особливості роботи
функції image_downsize()
3. Додаткові розміри зображень за умовчанням не відображаються в редакторі
4. В деяких випадках вивід мініатюри може вимагати додаткової обробки

Робота з мініатюрами в Twee
Розміри мініатюр вказуються в settings.php:
Для виводу мініатюр можна зручно функцію:
tw_thumb($image, $size = '', $before = '', $after = '', $atts = array(), $search_in_content = false);
$image – це ID об'єкту зображення, об'єкт WP_Post або масив поля з зображенням ACF
$size – розмір зображення у вигляді тексту чи масиву
$before та $after – вміст до та після зображення
$atts – масив з атрибутами. Він також може містити параметр ‘link’ з розміром зображення чи ‘url’ для посилання на запис (якщо $image – це WP_Post). У цьому
випадку зображення буде поміщене в посилання з класом, що переданий в параметрі ‘link_class’
$search_in_content – шукати зображення в тексті запису
$settings['thumbs'] = array( 
'post' => array( 
'label' => 'Рубрика', 
'width' => 240, 
'height' => 180, 
'thumb' => true, 
'crop' => array('center', 'center') 
), 
'slide' => array( 
'width' => 500, 
'height' => 360, 
'hidden' => true 
) 
);

Стилі та скрипти у WordPress
Особливості реалізації:
1. Стилі та скрипти реєструються за допомогою функцій wp_register_sctipt() та
wp_register_style()
2. Підключення здійснюється через wp_enqueue_script() та wp_enqueue_style()
3. Для скриптів можна передати додаткові дані через wp_localize_sctipt()
Основні проблеми:
1. Неможливо об'єднати стилі, скрипти та додаткові дані в один набір (asset)
2. Під одним іменем можна зареєструвати лише один стиль чи скрипт
3. Підключення скриптів та передача даних через wp_localize_script() ускладнюється тим, що
скрипти реєструються набагато раніше ніж ініціалізується сама тема
4. Треба уважно підходити до вибору назви, щоб уникнути конфліктів із зареєстрованими стилями
та скриптами

Робота зі скриптами та стилями в Twee
Скрипти, стилі та додаткові дані об'єднуються в набори (asset). Їх конфігурація може бути описана
1. В settings.php:
$settings['assets'] = array( 
‘asset_name' => array( 
'deps' => array('jquery'), 
'style' => array( 
'css/style.css', 
), 
'script' => array( 
'scripts/theme.js', 
), 
'localize' => array( 
'ajaxurl' => admin_url('admin-ajax.php') 
), 
'footer' => true, 
'display' => true 
), 
);
2. В файлах /assets/plugin/asset_name/index.php:
return array( 
'jquery.formstyler.css', 
'jquery.formstyler.theme.css' 
), 
'script' => 'jquery.formstyler.min.js', 
);
В процесі ініціалізації теми налаштування об'єднуються, приводяться до єдиного вигляду, реєструються в WordPress та по необхідності
підключаються. Конфігурація в settings.php має вищий пріоритет.

Конфігурація
Налаштування набору скриптів та стилів представляють собою масив:
array( 
'deps' => array('jquery'), 
'jquery.formstyler.css', 
'jquery.formstyler.theme.css' 
), 
'script' => 'jquery.formstyler.min.js', 
'localize' => function() { 
return array( 
'id' => get_the_ID(), 
'title' => get_the_title() 
); 
}, 
'display' => function() { 
if (is_single()) { 
return true; 
} else { 
return false; 
} 
}, 
'prefix' => 'tw_', 
'version' => null, 
'footer' => true 
);
Опис конфігурації:
deps – масив з переліком залежностей
style - шлях до стилю чи масив зі стилями
script – шлях до скрипту чи масив зі скриптами. Стилі та скрипти підключаються
у тому порядку, в якому вони вказані
localize – масив або функція, що повертає масив з даними для скриптів
display – булеве значення або функцію, що його повертає. Вказує чи потрібно
підключати скрипт
prefix – префікс, з яким будуть реєструватися скрипти та стилі
version – версія скриптів та стилів
footer – вивід скрипті в кінці сторінки

Способи використання
1. Створюється папка /assets/plugins/asset_name
2. В папку поміщаються всі необхідні скрипти та стилі, а також index.php з конфігурацією
3. Для їх підключення на всіх сторінках можна встановити параметр display рівним true або перезаписати його в settings.php:
'asset_name' => array( 
'display' => true 
)
'asset_name' => true
або просто
4. Для підключення на певних сторінках можна використовувати один із способів:
- в параметрі display вказати функцію:
'display' => function(){ 
if (is_single()) { 
return true; 
} else { 
return false; 
} 
}
- підключити їх вручну в шаблоні за допомогою:
tw_enqueue_asset(‘asset_name’);

Конструктор сторінок
Для створення власного конструктора сторінок необхідно:
1. Встановити Advanced Custom Fields Pro
2. Додати нове поле з типом Flexible Content та іменем field_name
3. Вказати декілька блоків з власними шаблонами (layout)
4. Створити папку blocks і помістити туди декілька файлів з іменами шаблонів з
налаштувань поля field_name
5. В коді теми в потрібному місці помістити:
<?php tw_get_blocks('field_name'); ?>
В блоках можна використовувати функцію tw_enqueue_asset() для підключення необхідних скриптів та стилів

Дякую за увагу!
Twee: https://github.com/TwistedAndy/wp-theme
Facebook: https://www.facebook.com/toniyevych
LinkedIn: https://www.linkedin.com/in/toniievych/
E-mail: toniyevych@gmail.com

�ݺ�ߣ

WordPress meetup Kyiv - Starting theme

Recommended

More Related Content

Similar to WordPress meetup Kyiv - Starting theme (6)

WordPress meetup Kyiv - Starting theme