Upload
-
View
308
Download
2
Embed Size (px)
Citation preview
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: [email protected]
Skype: alhanastarwind
Facebook: https://www.facebook.com/alhanastarwind