O documento apresenta uma palestra sobre customização no WordPress. Resume os principais pontos sobre como usar o Customizer para personalizar temas de forma dinâmica e interativa, incrementando a experiência do usuário. O palestrante também mostra como criar controles customizados e garantir a segurança dos dados.
1. Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
D O M I N A N D O O
C U S TO M I Z E R
W O R D C A M P S Ã O PA U L O 2 0 1 5
2. 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
6. 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
7. 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/
9. 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)
12. 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
13. 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
14. 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');
15. 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 );
17. Nícholas André • @nicholas_io • #WordCampSP • https://github.com/nicholasio
… U M C O N T R O L E C U S TO 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 TO M I Z A D O C O M U M
E D I TO R W Y S I W Y G ?
… U M C O N T R O L E
C U S TO M I Z A D O PA R A O
R E Q U I S I TO X , Y O U Z ?
18. 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 …
19. 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 }
20. 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 TO 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
21. 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 !
22. 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 }
23. - 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.”