WordPress Customizerдля «чайников»

Добавь немножко магии в свою тему ;-)

Стоит ли заморачиваться?▪ Собираем все настройки темы в одном месте. Пользователи

больше не путаются в куче полей нестандартной страницы настроек темы.

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

▪ Поддерживаются почти все распространенные типы полей. Если же вам чего-то не хватает, то вы всегда можете создать свой тип поля.

▪ Просто использовать. Для сравнения можно открыть код страницы настроек почти любой премиум-темы

Первые шаги▪ Обновляем WordPress минимум до версии 3.4. А лучше до

свежайшей доступной.

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

▪ Подключаемся к базовому WP Customizer:

add_action( 'customize_register', 'themename_customize_register' );

▪ Составляем для себя схему наших дополнительных настроек.

Что можно добавлять?Панели

В качестве примера можно привести панель виджетов, присутствующую уже в базовом варианте Customizer. Панели раскрываются для редактирования в отдельном «слайде». Панель может содержать один или несколько разделов.

Разделы

Объединяют группу полей. Если вы не хотите создавать отдельный раздел для ваших полей, то вы можете добавить их к существующим.

Отдельные поля

Добавляем параметры$wp_customize->add_setting( 'your_setting_id', array(

//* Можно поменять с дефолтного значения (theme_mod) на option.

'type' => 'theme_mod',//* Права настройки у пользователей.

'capability' => 'edit_theme_options',//* Для включения в теме с помощью функции add_theme_support( 'theme_support_setting_id' ).

'theme_supports' => '',//* Дефолтное значение для этого поля.

'default' => '',//* Протокол изменения настройки в превью.

'transport' => 'postMessage',//* Функция для валидации информации перед записью в БД, можно использовать встроенные,

например esc_html и esc_url.

'sanitize_callback' => '',) );

theme_mod vs optiontheme_mod связан с активной в данный момент темой, option связан с сайтом в целом.

Twenty Fifteen:

theme_mod link_color = #fff;

option background_color = #000;

Twenty Fourteen:

theme_mod link_color = #ccc;

option background_color = #555;

Twenty Fifteen:

theme_mod link_color = #fff;

option background_color = #555;

https://gist.github.com/anonymous/d98a46d00d52d40e7dec

get_theme_mod при выполнении вызывает get_option

'your_setting_id'$wp_customize->add_setting( 'atvarmor_header[worktime]', array('type' => 'theme_mod'

) );

$wp_customize->add_setting( 'atvarmor_header_worktime', array('type' => 'theme_mod'

) );

$wp_customize->add_setting( 'worktime', array('type' => 'option'

) );

Добавляем панели$wp_customize->add_panel( 'your_panel_id', array(

//* Приоритет, можно менять для того чтобы переставлять панели местами.

'priority' => 160,

//* Права настройки у пользователей.

'capability' => 'edit_theme_options',

//* Для включения в теме с помощью функции add_theme_support( 'theme_support_setting_id' ).

'theme_supports' => '',

//* Заголовок для панели.

'title' => '',

//* Дополнительное описание под заголовком.

'description' => '',

//* Тип панели. Можно добавить любое слово, оно отразится в классе для этой панели и примет вид control-panel-default при значении default.

'type' => 'default',

) );

Добавляем разделы$wp_customize->add_section( 'your_section_id', array(//* Приоритет, можно менять для того чтобы переставлять секции местами.

'priority' => 160,//* ID "панели", в которую стоит поместить секцию.

'panel' => '',//* Права настройки у пользователей.

'capability' => 'edit_theme_options',

//* Для включения в теме с помощью функции add_theme_support( 'theme_support_setting_id' ).

'theme_supports' => '',//* Заголовок для секции.

'title' => '',//* Дополнительное описание под заголовком.

'description' => '',//* Тип секции. Можно добавить любое слово, оно отразится в классе для этой секции и примет вид control-section-default при значении default.

'type' => 'default',) );

Добавляем поля: text & textarea$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'your_setting_id', array(//* ID настройки, которую контролирует этот элемент.

'settings' => 'your_setting_id',//* Приоритет, можно менять для того чтобы переставлять поля местами.

'priority' => 10,//* ID секции, в которую стоит поместить поле.

'section' => '',//* Заголовок для элемента.

'label' => '',//* Дополнительное описание под заголовком.

'description' => '',//* Тип элемента. Может быть нескольких вариантов: checkbox, radio, select, textarea, dropdown-pages.

'type' => 'text',//* Массив вариантов для radio и select типов.

'choices' => '',) );

Добавляем поля: checkbox$wp_customize->add_control( 'hide_copyright', array(

'type' => 'checkbox',

'label' => 'Hide copyright text',

'section' => 'example_section_one',

) );

Добавляем поля: radio$wp_customize->add_control( 'logo_placement', array(

'type' => 'radio',

'label' => 'Logo placement',

'section' => 'example_section_one',

'choices' => array(

'left' => 'Left',

'right' => 'Right',

'center' => 'Center',

)

) );

Добавляем поля: select$wp_customize->add_control( 'powered_by', array(

'type' => 'select',

'label' => 'This site is powered by:',

'section' => 'example_section_one',

'choices' => array(

'wordpress' => 'WordPress',

'hamsters' => 'Hamsters',

'jet-fuel' => 'Jet Fuel',

'nuclear-energy' => 'Nuclear Energy',

),

) );

Санитизация: text, textarea, checkboxfunction example_sanitize_text( $input ) {

return wp_kses_post( force_balance_tags( $input ) );

}

function example_sanitize_checkbox( $input ) {

if ( $input == 1 ) { return 1; }

else { return ''; }

}

Санитизация: radiofunction example_sanitize_logo_placement( $input ) {

$valid = array(

'left' => 'Left',

'right' => 'Right',

'center' => 'Center',

);

if ( array_key_exists( $input, $valid ) ) { return $input; }

else { return ''; }

}

Санитизация: selectfunction example_sanitize_powered_by( $input ) {

$valid = array(

'wordpress' => 'WordPress',

'hamsters' => 'Hamsters',

'jet-fuel' => 'Jet Fuel',

'nuclear-energy' => 'Nuclear Energy',

);

if ( array_key_exists( $input, $valid ) ) { return $input; }

else { return ''; }

}

Можно создавать экземпляр разных классов:▪ WP_Customize_Control (по умолчанию)

▪ WP_Customize_Color_Control

▪ WP_Customize_Upload_Control

▪ WP_Customize_Image_Control

▪ WP_Customize_Background_Image_Control

▪ WP_Customize_Header_Image_Control

Расширенные поля: список страниц$wp_customize->add_setting( 'page-setting', array( 'sanitize_callback' => 'example_sanitize_integer', )); $wp_customize->add_control( 'page-setting', array( 'type' => 'dropdown-pages', 'label' => 'Choose a page:', 'section' => 'example_section_one', ));

function example_sanitize_integer( $input ) { if( is_numeric( $input ) ) { return intval( $input ); }}

Расширенные поля: палитра$wp_customize->add_setting( 'color-setting', array( 'default' => '#000000', 'sanitize_callback' => 'sanitize_hex_color', ));

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color-setting', array( 'label' => 'Color Setting', 'section' => 'example_section_one', 'settings' => 'color-setting', ) ));

Расширенные поля: upload$wp_customize->add_setting( 'file-upload' ); $wp_customize->add_control(

new WP_Customize_Upload_Control( $wp_customize, 'file-upload', array( 'label' => 'File Upload', 'section' => 'example_section_one', 'settings' => 'file-upload' ) ));

$wp_customize->add_setting( 'img-upload' ); $wp_customize->add_control(

new WP_Customize_Image_Control( $wp_customize, 'img-upload', array( 'label' => 'Image Upload', 'section' => 'example_section_one', 'settings' => 'img-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_customize->add_setting( 'textarea' ); $wp_customize->add_control( new Example_Customize_Textarea_Control( $wp_customize, 'textarea', array( 'label' => 'Textarea', 'section' => 'example_section_one', 'settings' => 'textarea' ) ));

'transport' => 'postMessage' vs 'transport' => 'refresh'

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'featured-background', array( 'label' => 'Featured Background', 'section' => 'colors', 'settings' => 'featured-background' ) ));

if ( $wp_customize->is_preview() && ! is_admin() ) { add_action(

'wp_footer','example_customize_preview',21

);}

function example_customize_preview() { ?> <script type="text/javascript"> ( function( $ ) { wp.customize(

'featured-background',function( value ) {

value.bind(function(to) { $('#featured').css('background-color',

to ); });});

})( jQuery ) </script> <?php}

Использованные материалы▪ http://themefoundation.com/wordpress-theme-customizer/

▪ http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/

▪ https://codex.wordpress.org/Theme_Customization_API

▪ https://uwebdesign.ru/wordpress-customizer/

▪ http://wordpress.stackexchange.com/questions/155072/get-option-vs-get-theme-mod-why-is-one-slower

Спасибо за внимание!E-mail: goryayeva@gmail.com

Skype: alhanastarwind

Facebook: https://www.facebook.com/alhanastarwind