dominando o customizer
TRANSCRIPT
![Page 1: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/1.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
D O M I N A N D O O C U S T O M I Z E R
W O R D C A M P S Ã O PA U L O 2 0 1 5
![Page 2: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/2.jpg)
Q U E M S O U E U ?
• Web Engineer at 10up
• WordPress core contributor & Plugin Developer
• Instrutor de cursos sobre WordPress e PHP no MXCursos/iMasters
![Page 3: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/3.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
A 10up está contratando!
10up.com
![Page 4: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/4.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
O Q U E É O C U S T O M I Z E R ?
![Page 5: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/5.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
![Page 6: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/6.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
U M P O U C O D E H I S T Ó R I A
• O Customizer, antes chamado Theme Customizer, surgiu na versão 3.4 do WordPress (em 13 de Junho de 2012).
• https://wordpress.org/news/2012/06/green/
• Mudou totalmente a forma de customizar temas no WordPress.
• Widgets Management: 3.9
• https://make.wordpress.org/core/2014/04/17/live-widget-previews-widget-management-in-the-customizer-in-wordpress-3-9/
• Menus: 4.3
• https://make.wordpress.org/core/2015/06/03/feature-plugin-merge-proposal-menu-customizer/
• #WPDrama: http://wptavern.com/menu-customizer-officially-approved-for-merge-into-wordpress-4-3 e http://wptavern.com/wordpress-core-contributors-call-for-user-testing-on-the-menu-customizer-plugin
![Page 7: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/7.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
U M P O U C O D E H I S T Ó R I A
• Em 22 de Abril de 2015, o uso do customizer se tornou obrigatório para todos os temas do repositório oficial do WordPress que precisem de páginas de opções.
• Experiência consistente para os usuários
• Padronização do processo de revisão de temas
• https://make.wordpress.org/themes/2015/04/22/details-on-the-new-theme-settings-customizer-guideline/
![Page 8: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/8.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
O B Á S I C O D O C U S T O M I Z E R
![Page 9: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/9.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
C O M O P E R S I S T I R O S D A D O S
• WordPress possui três formas básicas para persistir informações no banco de dados.
• Theme Mod - utiliza as funções set_theme_mod() e get_theme_mod(). É o padrão do Customizer.
• As informações são salvas a nível do tema e os dados desaparecem ao trocar o tema (mas os dados continuam salvos).
• Settings API - utiliza a tabela wp_options para armazenas as informações (add_option(), update_option(), delete_option())
• Abordagem 1 - Uma opção por registro
• Abordagem 2 - Todas as opções em único registro (array serializado)
![Page 10: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/10.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
E X E M P L O 1 1 <?php 2 3 add_action( 'customize_register' , 'wordcamp_sp_example_1' ); 4 5 function wordcamp_sp_example_1( $wp_customize ) { 6 7 $wp_customize->add_section( 'wordcamp_sp_footer', array( 8 'title' => esc_html__( 'Footer', 'wordcamp_sp' ), 9 'capability' => 'edit_theme_options', 10 'description' => esc_html__( 'Your description here...', 'wordcamp_sp' ), 11 'prioriry' => 120 12 ) 13 ); 14 15 $wp_customize->add_setting( 'wordcamp_sp_copyright', array( 16 'type' => 'theme_mod', 17 'capability' => 'edit_theme_options' 18 ) 19 ); 20 21 $wp_customize->add_control( 'wordcamp_sp_copyright_control', array( 22 'label' => esc_html__( 'Copyright text', 'wordcamp_sp' ), 23 'section' => 'wordcamp_sp_footer', 24 'settings' => 'wordcamp_sp_copyright', 25 'type' => 'text' 26 ) 27 ); 28 } 29
![Page 11: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/11.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
E X E M P L O 1 - E X I B I N D O N O T E M A
1 <footer class="footer"> 2 <p>© <?php echo esc_html( get_theme_mod( 'wordcamp_sp_copyright' ) ); ?></p> 3 </footer>
Nunca esqueça de “escapar” os dados antes de exibi-los no tema.
![Page 12: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/12.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
I N C R E M E N TA N D O A E X P E R I Ê N C I A D O U S U Á R I O
![Page 13: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/13.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
C O M O O P R E V I E W F U N C I O N A
• Por padrão, o WordPress vai realizar um full-page refresh para atualizar o preview com os dados inseridos
• Além de contra-produtivo, essa abordagem degrada o desempenho.
• Com JavaScript conseguimos evitar esse full-page refresh além de simular as mudanças que o usuário está fazendo em tempo real!
• + usabilidade
• + rapidez
• + perfomance
![Page 14: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/14.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
E X E M P L O 3 - P O S T M E S S A G E
1 <?php 2 3 $wp_customize->add_setting( 'wordcamp_sp_copyright', array( 4 'type' => 'theme_mod', 5 'capability' => 'edit_theme_options', 6 'transport' => 'postMessage' 7 ) 8 ); 9 10 function live_preview() { 11 wp_enqueue_script( 12 'mastering-customizer-customizer-preview', 13 MASTERING_CUSTOMIZER_TEMPLATE_URL . '/assets/js/customizer.js', 14 array( 'customize-preview' ), 15 '10', 16 true 17 ); 18 } 19 add_action( 'customize_preview_init', 'live_preview');
![Page 15: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/15.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
E X E M P L O 3 - P O S T M E S S A G E
1 (function( $ ) { 2 "use strict"; 3 4 wp.customize( 'wordcamp_sp_copyright' , function( value ) { 5 value.bind( function( to ) { 6 $( '.footer p' ).html(to); 7 } ); 8 }); 9 10 11 })( jQuery );
![Page 16: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/16.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
E S E E U P R E C I S A R D E …
![Page 17: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/17.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
… U M C O N T R O L E C U S T O M I Z A D O PA R A S E L E C I O N A R O S P O S T S Q U E S E R Ã O E X I B I D O S N A P Á G I N A I N I C I A L ?
… U M C O N T R O L E C U S T O M I Z A D O C O M U M E D I T O R W Y S I W Y G ?
… U M C O N T R O L E C U S T O M I Z A D O PA R A O R E Q U I S I T O X , Y O U Z ?
![Page 18: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/18.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
C O N S T R U A - O !
O U P R O C U R E A L G U É M J Á O F E Z …
![Page 19: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/19.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
C R I A N D O S E U S P R Ó P R I O S C O N T R O L E S• Criar um novo controle é tão fácil quanto extender
uma classe. 1 <?php 2 3 class Example_Customize_Textarea_Control extends WP_Customize_Control { 4 public $type = 'textarea'; 5 6 public function render_content() { 7 ?> 8 <label> 9 <span class="customize-control-title"> 10 <?php echo esc_html( $this->label ); ?> 11 </span> 12 <textarea rows="5" style="width:100%;" <?php $this->link(); ?>> 13 <?php echo esc_textarea( $this->value() ); ?> 14 </textarea> 15 </label> 16 <?php 17 } 18 }
![Page 20: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/20.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
A D I C I O N A N D O C O N T R O L E S C U S T O M I Z A D O S
1 <?php 2 add_action( 'customize_register' , 'wordcamp_sp_example_4' ); 3 4 function wordcamp_sp_example_4( $wp_customize ) { 5 6 $wp_customize->add_section( 'wordcamp_sp_footer', array( 7 'title' => esc_html__( 'Footer', 'wordcamp_sp' ), 8 'capability' => 'edit_theme_options', 9 'description' => esc_html__( 'Your description here...', 'wordcamp_sp' ), 10 'prioriry' => 120 11 ) 12 ); 13 14 $wp_customize->add_setting( 'textarea_setting', array( 15 'default' => esc_html__( 'Some default text for the textarea', 'wordcamp_sp' ), 16 ) 17 ); 18 19 $wp_customize->add_control( 20 new Example_Customize_Textarea_Control( $wp_customize, 'textarea_setting', 21 array( 22 'label' => esc_html__( 'Custom Textarea', 'wordcamp_sp' ), 23 'section' => 'wordcamp_sp_footer', 24 'settings' => 'textarea_setting', 25 ) 26 ) 27 ); 28 } 29
![Page 21: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/21.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
N Ã O E S Q U E Ç A D A S E G U R A N Ç A !
![Page 22: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/22.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
S A N I T I Z AT I O N• Use o parâmetro ‘sanitize_callback’ para deinir uma função
customizada para realizar a higienização dos dados inseridos.
1 <?php 2 ... 3 $wp_customize->add_setting( 4 // $id 5 'contact_email', 6 // $args 7 array( 8 'default' => '', 9 'type' => 'theme_mod', 10 'capability' => 'edit_theme_options', 11 'sanitize_callback' => 'theme_slug_sanitize_email' 12 ) 13 ); 14 ... 15 function theme_slug_sanitize_email( $email, $setting ) { 16 $email = sanitize_email( $email ); 17 18 // If $email is a valid email, return it; otherwise, return the default. 19 return ( ! null( $email ) ? $email : $setting->default ); 20 }
![Page 23: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/23.jpg)
- R O D R I G O S T R A U S S - H T T P : / / W W W. 1 B I T. C O M . B R / C O N T E N T. 1 B I T /B O M _ P R O G R A M A D O R
“Um programador sabe que quando ele pressiona a tecla "A", aparece a letra "A" na tela. Um bom
programador vai além, e sabe que resumidamente, ao pressionar a tecla "A", o teclado vai disparar um sinal
elétrico que quando chegar no computador, vai disparar uma interrupção de processador, que será
tratada por um driver que colocará isso em uma fila, que será lida pelos programas.”
![Page 24: Dominando o customizer](https://reader030.vdocuments.us/reader030/viewer/2022021422/587f3e631a28ab43318b5155/html5/thumbnails/24.jpg)
Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
Obrigado!
Dúvidas?
https://github.com/nicholasio/MasteringCustomizerWCSP2015