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 TO M I Z E R
W O R D C A M P S Ã O PA U L O 2 0 1 5

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

O Q U E É O
C U S TO 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-ofﬁcially-approved-for-merge-into-
wordpress-4-3 e 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
oﬁcial 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/

O B Á S I C O D O
C U S TO 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(
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 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 ?

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 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' ),
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' => '',
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 ﬁla,
que será lida pelos programas.”

Obrigado!
Dúvidas?
https://github.com/nicholasio/
MasteringCustomizerWCSP2015

Dominando o customizer

Mais conteúdo relacionado

Mais procurados

Destaque

Dominando o customizer