Из чего состоит тема? Зачем нужна дочерняя тема? Что такое иерархия шаблонов? Какие есть тонкости подключения CSS & JS? Для чего не стоит использовать functions.php?
3. План
3
1. Содержимое WordPress темы
a. Файлы шаблонов
b. Иерархия шаблонов
2. CSS & JS
a. Тонкости подключения
b. Полезные функции
3. О functions.php
a. Что не стоит добавлять в functions.php?
b. Какие альтернативы существуют?
4. Кастомные шаблоны. Продвинутое назначение шаблона
5. Зачем нужна дочерняя тема и как её создать?
6. Правила разработки и отладка в WordPress
5. style.css
5
/*
Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and
designed for clarity...
Version: 1.0
License: GNU General Public License v2 or later
*/
/* Theme styles are here */
...
13. 13
Функции регистрации CSS & JS
wp_register_style(
$handle, // *идентификатор
$src, // *URL к файлу стилей
$depends, // массив идентификаторов стилей, от которых зависит регистрируемый
$version, // номер версии
$media // медиа-тип ('all', 'screen', 'handheld' или 'print')
);
wp_register_script(
$handle, // *идентификатор
$src, // *URL к скрипту
$depends, // массив идентификаторов скриптов, от которых зависит регистрируемый
$version, // номер версии
$in_footer // где выводить скрипт ('wp_head' или 'wp_footer')?
);
Функции подключения CSS & JS
wp_enqueue_style( $handle );
wp_enqueue_script( $handle );
http://codex.wordpress.org/Function_Reference/wp_register_style
http://codex.wordpress.org/Function_Reference/wp_register_script
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
16. CSS: Полезные функции
16
Добавление inline-стилей ( <style>/* inline styles*/</style> ) :
wp_add_inline_style( 'my-style', "h2 { font-family: { $font_family }; }" );
Был ли CSS файл зарегистрирован / добавлен в очередь / выведен / ожидает вывода:
wp_style_is( 'my-style', 'registered' /* or 'enqueued', 'done', 'to_do' */ );
Подключение стилей для Internet Explorer :
wp_style_add_data( 'my-style-ie', 'conditional', 'lt IE 9' );
Удаление CSS файла из очереди вывода стилей :
wp_dequeue_style( 'my-style' );
Отмена регистрации CSS файла :
wp_deregister_style( 'my-style' );
17. JS: полезные функции
17
Локализация JavaScript :
wp_localize_script( 'my-script', 'object_name', array(
'count' => 5,
'color' => $color
)
);
Был ли JS файл зарегистрирован / добавлен в очередь / выведен / ожидает вывода:
wp_script_is( 'my-style', 'registered' /* or 'enqueued', 'done', 'to_do' */ );
Удаление JS файла из очереди вывода скриптов :
wp_dequeue_script( 'my-script' );
Отмена регистрации JS файла :
wp_deregister_script( 'my-script' );
18. О functions.php...
18
● Лежит в корне темы: /wp-content/themes/my-theme/functions.php
● Загружается при запросе любой страницы (включая админку)
● Выполняется только тогда, когда тема активирована
Позволяет:
● Определять дополнительные функции
● Переопределять существующие функции
● Устанавливать различные параметры для ядра WordPress
● Изменять поведение Wordpress через хуки и фильтры
19. Когда использовать functions.php
19
● Объявление сайдбаров для виджетов темы
● Определение путей к файлам локализации темы
● Включение поддержки темой различных Wordpress фич
('post-formats', 'post-thumbnails', 'widgets', 'menus' ...)
● Подключение скриптов и стилей для темы
● Создание раздела с настройками темы
● Дополнительные функции используемые в шаблонах темы
● Регистрация новых размеров миниатюр для темы
20. Когда не использовать functions.php
20
● Код счетчиков Google Analytics или Яндекс.Метрики
● Добавление кастомных типов контента и таксономий
● Регистрация дополнительные ролей и возможностей пользователей
● Добавление шорткодов
21. Если не в functions.php, то куда?
21
Regular Plugin Must Use Plugin
25. Дочерняя WP тема
“A child theme is a theme that inherits the functionality
and styling of another theme, called the parent theme.
Child themes are the recommended way of modifying
an existing theme.”
- The WordPress Codex
http://codex.wordpress.org/Child_Themes
25
26. Дочерняя Wordpress тема:
● имеет родительскую тему
● лежит в папке /wp-content/themes/ с остальными темами
● наследует внешний вид и весь функционал родительской темы
… и применяется если необходимо:
● вносить изменения в родительскую тему
● кастомизировать дизайн родительской темы
● расширить возможности родительской темы новым функционалом
26
/wp-content
/themes
/twentyfifteen
/twentyfifteen-child
31. Стандарты кодирования
31
● повышаем читаемость своего кода
● упрощаем чтение и понимание исходников WordPress
● говорим с другими разработчиками на одном языке
https://make.wordpress.org/core/handbook/coding-standards/php/
https://make.wordpress.org/core/handbook/coding-standards/javascript/
https://make.wordpress.org/core/handbook/coding-standards/html/
https://make.wordpress.org/core/handbook/coding-standards/css/
32. Debugging in WordPress
32
// Включаем режим отладки в wp-config.php
define( 'WP_DEBUG', true );
http://codex.wordpress.org/Debugging_in_WordPress
33. Логирование ошибок
33
// Включаем логирование в wp-config.php
define( 'WP_DEBUG', true );
define('WP_DEBUG_LOG' , true);
// Выключаем отображение ошибок на сайте
define('WP_DEBUG_DISPLAY' , false);
34. CSS & JS debug
34
// Подключаем dev версии JS & CSS файлов
define('SCRIPT_DEBUG' , true);
35. Плагин Debug Bar
35
● Notices / Warnings
● потребляемая память
● выполненные SQL запросы
https://wordpress.org/plugins/debug-bar/
● состояние объектного кэширования
● информация о запросе WP_Query
● использование устаревших функций