Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WP Customizer для "чайников"

4,320 views

Published on

Описание функций для работы с Customizer в темах WordPress

Published in: Internet

WP Customizer для "чайников"

  1. 1. WordPress Customizer для «чайников» Добавь немножко магии в свою тему ;-)
  2. 2. Стоит ли заморачиваться? ▪ Собираем все настройки темы в одном месте. Пользователи больше не путаются в куче полей нестандартной страницы настроек темы. ▪ Все измененные данные сразу показываются на сайте. Больше не нужно сотню раз обновлять страницу в соседней вкладке, чтобы проверить, как заголовок вписался в блок. ▪ Поддерживаются почти все распространенные типы полей. Если же вам чего-то не хватает, то вы всегда можете создать свой тип поля. ▪ Просто использовать. Для сравнения можно открыть код страницы настроек почти любой премиум-темы 
  3. 3. Первые шаги ▪ Обновляем WordPress минимум до версии 3.4. А лучше до свежайшей доступной. ▪ …тут продолжительный рассказ про то, как важно вовремя обновлять ядро, темы и плагины вашего сайта… ▪ Подключаемся к базовому WP Customizer: add_action( 'customize_register', 'themename_customize_register' ); ▪ Составляем для себя схему наших дополнительных настроек.
  4. 4. Что можно добавлять? Панели В качестве примера можно привести панель виджетов, присутствующую уже в базовом варианте Customizer. Панели раскрываются для редактирования в отдельном «слайде». Панель может содержать один или несколько разделов. Разделы Объединяют группу полей. Если вы не хотите создавать отдельный раздел для ваших полей, то вы можете добавить их к существующим. Отдельные поля
  5. 5. Добавляем параметры $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' => '', ) );
  6. 6. theme_mod vs option theme_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
  7. 7. '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' ) );
  8. 8. Добавляем панели $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', ) );
  9. 9. Добавляем разделы $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', ) );
  10. 10. Добавляем поля: 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' => '', ) );
  11. 11. Добавляем поля: checkbox $wp_customize->add_control( 'hide_copyright', array( 'type' => 'checkbox', 'label' => 'Hide copyright text', 'section' => 'example_section_one', ) );
  12. 12. Добавляем поля: 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', ) ) );
  13. 13. Добавляем поля: 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', ), ) );
  14. 14. Санитизация: text, textarea, checkbox function example_sanitize_text( $input ) { return wp_kses_post( force_balance_tags( $input ) ); } function example_sanitize_checkbox( $input ) { if ( $input == 1 ) { return 1; } else { return ''; } }
  15. 15. Санитизация: radio function example_sanitize_logo_placement( $input ) { $valid = array( 'left' => 'Left', 'right' => 'Right', 'center' => 'Center', ); if ( array_key_exists( $input, $valid ) ) { return $input; } else { return ''; } }
  16. 16. Санитизация: select function 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 ''; } }
  17. 17. Можно создавать экземпляр разных классов: ▪ 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
  18. 18. Расширенные поля: список страниц $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 ); } }
  19. 19. Расширенные поля: палитра $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', ) ) );
  20. 20. Расширенные поля: 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' ) ) );
  21. 21. Нестандартные поля: все как захотите  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' ) ) );
  22. 22. '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 }
  23. 23. Использованные материалы ▪ 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
  24. 24. Спасибо за внимание! E-mail: goryayeva@gmail.com Skype: alhanastarwind Facebook: https://www.facebook.com/alhanastarwind

×