dominando o customizer

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

https://github.com/nicholasio

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


A 10up está contratando!

10up.com


http://10up.com


O Q U E É O C U S T O M I Z E R ?



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


https://wordpress.org/news/2012/06/green/

https://make.wordpress.org/core/2014/04/17/live-widget-previews-widget-management-in-the-customizer-in-wordpress-3-9/

https://make.wordpress.org/core/2015/06/03/feature-plugin-merge-proposal-menu-customizer/

http://wptavern.com/menu-customizer-officially-approved-for-merge-into-wordpress-4-3

http://wptavern.com/wordpress-core-contributors-call-for-user-testing-on-the-menu-customizer-plugin


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/


https://make.wordpress.org/themes/2015/04/22/details-on-the-new-theme-settings-customizer-guideline/


O B Á S I C O D O C U S T O M I Z E R



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)



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



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.



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



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



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');



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 );



E S E E U P R E C I S A R D E …



… 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 ?



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 …



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 }



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



N Ã O E S Q U E Ç A D A S E G U R A N Ç A !



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 }


- 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.”

http://www.1bit.com.br/content.1bit/bom_programador


Obrigado!

Dúvidas?

https://github.com/nicholasio/MasteringCustomizerWCSP2015


dominando o customizer

Technology