Customizer: зачем он нужен и что с ним делать?

Дмитрий Романенко

deco.agency

текущая ситуация с конфигураторами тем

Хаос, каждый пишет и

делает как ему

вздумается

На рассмотрение

- полезность, удобство, быстрый старт и легкость использования

- ООП и создание собственных елементов, наследование существующих

- механизм визуального конструктора чего-либо с коробки

полезность, удобство, быстрый старт и легкость использования

Все просто, только докрути педали и поехали Удобство в написании из готового до превращения в желаемое

https://codex.wordpress.org/Theme_Customization_API

Копипаст js и кода php, кастомайзер готов к воплощению ваших желаний

Доступ к сохраненной опции из темы

Создаем елемент управления

$wp_customize->add_control(

'copyright_textbox',

array(

'label' => 'Copyright text',

'section' => 'example_section_one',

'type' => 'text',

)

);

Вывод в нашей теме

echo get_theme_mod( 'copyright_textbox', 'Значение по умолчания' );

ООП и создание собственных элементов, наследование существующихНе стандартные элементы используют ООП для

реализации функционала

$wp_customize->add_control(

new WP_Customize_Upload_Control(

$wp_customize,

'file-upload',

array(

'label' => 'Загрузка файлов',

'section' => 'example_section_one',

'settings' => 'file-upload'

)

)

);

/**

* Добавляет поддержку текстовой области в настройщик тем

*/

class Example_Customize_Textarea_Control extends

WP_Customize_Control {

public $type = 'textarea';

public function render_content() {

?>

<label>

<span class="customize-control-title">

<?php echo esc_html( $this->label ); ?></span>

<textarea rows="5" style="width:100%;"

<?php $this->link(); ?>>

<?php echo esc_textarea( $this->value() ); ?>

</textarea></label>

<?php

}

}

wp-includes\class-wp-customize-control.php

- базовые классы элементов

управления в кастомайзере

WP_Customize_Control - базовый

класс для всех елементов:

WP_Customize_Color_ControlWP_Customize_Media_ControlWP_Customize_Upload_ControlWP_Customize_Image_ControlWP_Customize_Background_Image_ControlWP_Customize_Header_Image_ControlWP_Customize_Theme_ControlWP_Widget_Area_Customize_ControlWP_Widget_Form_Customize_Control

WP_Customize_Media_Control - базовый класс для элементов загрузки файлов.

Пример

class WP_Customize_Upload_Control extends WP_Customize_Media_Control { ... } - загрузка файлов без учета расширения

class WP_Customize_Image_Control extends WP_Customize_Upload_Control - загрузка изображений

и каждый класс использует предыдущий, также Вы можете самостоятельно унаследоваться и доработать свой мега класс элемента

механизм визуального конструктора чего-либо с коробки

На примере расмотрим интересный плагин Edit WordPress Email Templates in the Customizer

Использовано

- полностью использует Customizer- обычный и респонсив варианты- тестовая отправка мейла- возможность поменять мейл и прочее- использованы базовые элементы управления Customizer- live обновление визульного представления

Не доработано- выбор привязки к какому типу отправляемых email- редактирование контента в режиме редактора

Спасибо за внимание

https://github.com/bueltge/Wordpress-Theme-Customizer-Custom-Controls - классы кастомных елементов управления

http://onwp.ru/uroki/theme-customizer-wordpress-ischerpyvayushhee-rukovodstvo-razrabotchika.html - понятное мини руководство

http://wptavern.com/edit-wordpress-email-templates-in-the-customizer - Edit WordPress Email Templates in the Customizer

Полезные ссылки

WordPress developer deco.agencyДмитрий Романенкоdim.romanenko@gmail.com