Wykorzystanie możliwości ekranu personalizacji motywu

Tomasz Dziuda

WordUp Kraków Jesień@2014

Dlaczego warto z niego korzystać?

Podgląd zmian strony “na żywo”

Łatwa implementacja opcji motywu

Możliwość łatwego przetestowania opcji motywu bez wpływu na wygląd strony

Użytkownik nie musi uczyć się od podstaw sposobu konfiguracji motywu

Zarządzanie widżetami

Panel widżetów pojawi się tylko gdy wyświetlana strona zawiera panele boczne

Ważne pojęcia

Menadżer Personalizacji

Menadżer Personalizacji

Panel

Menadżer Personalizacji

Panel

Sekcja

Menadżer Personalizacji

Panel

Sekcja

Kontrolka

Menadżer Personalizacji

Panel

Sekcja

Kontrolka

Ustawienie

Menadżer Personalizacji

Panel

Sekcja

Kontrolka

Kontekst Ustawienie

Menadżer Personalizacji

• Znany szerzej jako $wp_customize

• Znany szerzej jako $wp_customize

• Pozwala zarządzać elementami ekranu personalizacji

• Znany szerzej jako $wp_customize

• Pozwala zarządzać elementami ekranu personalizacji

• Tworzy automatycznie domyślne sekcje ekranu personalizacji: colors, title_tagline, header_image, background_image, nav, static_front_page

• Znany szerzej jako $wp_customize

• Pozwala zarządzać elementami ekranu personalizacji

• Tworzy automatycznie domyślne sekcje ekranu personalizacji: colors, title_tagline, header_image, background_image, nav, static_front_page (o ile są one wspierane przez motyw).

Dodawanie elementów

$wp_customizer->add_X( !

!

!

!

!

!

);

$wp_customizer->add_X( ‘name’, !

!

!

!

!

);

$wp_customizer->add_X( ‘name’, array( ‘setting_1’ => ‘value’, ‘setting_2’ => ‘value’, … ‘setting_N’ => ‘value’ ));

$wp_customizer->get_X(‘name’)!

!

!

!

$wp_customizer->get_X(‘name’)!

$wp_customizer->remove_X(‘name’)!

!

$wp_customizer->get_X(‘name’)!

$wp_customizer->remove_X(‘name’)!

!

X = setting, panel, section, control

Ustawienie

$wp_customize->add_setting( !!!!!!);

$wp_customize->add_setting( ‘mytheme_bgcolor’, !!!!!);

$wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, !! ));

$wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ! ));

$wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ‘type’ => ‘theme_mod’,! ));

$wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ‘type’ => ‘theme_mod’, ‘transport’ => ‘refresh’ ));

Panele, Sekcje i Kontrolki

$wp_customize->add_panel( !!!!!);

$wp_customize->add_panel( ‘panel_name’, !!!!);

$wp_customize->add_panel( ‘panel_name’, array( ‘priority’ => 10, ‘title’ => ‘My Panel’, ‘description’ => ‘Simple panel description’ ));

$wp_customize->add_section( !

!

!

!

!

!

);

$wp_customize->add_section( 'section_name', !

!

!

!

!

);

$wp_customize->add_section( 'section_name', array( ‘priority' => 10, ‘title' => ‘My Section', ‘description' => ‘Section description', 'panel' => 'panel_name' ));

$wp_customize->add_section( 'section_name', array( ‘priority' => 10, ‘title' => ‘My Section', ‘description' => ‘Section description', 'panel' => 'panel_name' ));

$wp_customize->add_control( !

!

!

!

!

!

);

$wp_customize->add_control( 'setting_name', !

!

!

!

!

!

);

$wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description' ) );

$wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description' ) );

Modyfikacja istniejących elementów

$wp_customize->get_section(‘colors')->description = __( 'Background may only be visible on wide screens.’, ‘twentyfourteen');

$wp_customize->get_setting(‘blogname')->transport!

= 'postMessage';

$wp_customize->remove_control('blogname')

Kontekst

• Kontekst określamy tylko dla kontrolek

• Kontekst określamy tylko dla kontrolek

• Kontekst działa oddolnie na sekcje i panele

• Kontekst określamy tylko dla kontrolek

• Kontekst działa oddolnie na sekcje i panele

• Sekcja bez kontrolek będzie niewidoczna tak samo jak panel bez sekcji

$wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description’,!

) );

$wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description’, 'active_callback' => 'is_front_page' ) );

Jak wykorzystać kontekst?

• Ukrywanie nadmiaru opcji

• Ukrywanie nadmiaru opcji

• Opcje dedykowane dla konkretnych podstron

• Ukrywanie nadmiaru opcji

• Opcje dedykowane dla konkretnych podstron

• Określanie zależności pomiędzy opcjami

function mytheme_show_font_field($control) { ! }

function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font');! }

function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font');! return $option->value() == 'google';}

Ważne akcje

• customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji

• customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji

• wp_head - używana do wyświetlania kodu modyfikującego stronę na bazie opcji motywu

• customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji

• wp_head - używana do wyświetlania kodu modyfikującego stronę na bazie opcji motywu

• customize_preview_init - może być wykorzystana do wyświetlania kodu potrzebnego jedynie w ekranie personalizacji

• customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji

• wp_head - używana do wyświetlania kodu modyfikującego stronę na bazie opcji motywu

• customize_preview_init - może być wykorzystana do wyświetlania kodu potrzebnego jedynie w ekranie personalizacji

• customize_controls_enqueue_scripts - pozwala dodać skrypty i style dla ekranu personalizacji

Rodzaje kontrolek

text

radio

checkbox

textarea

select

dropdown-pages

WP_Customize_Color_ControlWP_Customize_Image_Control

A gdy potrzebujemy więcej kontrolek?

$wp_customize->add_control( ‘mytheme_layout_width’, array( 'type' => 'range', 'section' => 'layout', 'label' => ‘Layout width', 'input_attrs' => array( 'min' => 720, 'max' => 1280, 'step' => 1, 'class' => ‘layout-width-control‘ ) ) );

$wp_customize->add_control( ‘mytheme_layout_width’, array( 'type' => 'range', 'section' => 'layout', 'label' => ‘Layout width', 'input_attrs' => array( 'min' => 720, 'max' => 1280, 'step' => 1, 'class' => ‘layout-width-control‘ ) ) );

$wp_customize->add_control( ‘mytheme_layout_width’, array( 'type' => 'range', 'section' => 'layout', 'label' => ‘Layout width', 'input_attrs' => array( 'min' => 720, 'max' => 1280, 'step' => 1, 'class' => ‘layout-width-control‘ ) ) );

Choć jest mały problem…

Własne kontrolki

class My_Customize_Textarea_Control extends WP_Customize_Control { !!!!!!!!!!!!!!!!!!!}

class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; !!!!!!!!!!!!!!!!!!}

class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> !!!!!!!!!!!!!! <?php }}

class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> !!!!!!! </label> <?php }}

class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> <?php if(!empty($this->description)) : ?> <span class="description customize-control-description”> <?php echo $this->description ; ?> </span> <?php endif; ?> !! </label> <?php }}

class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> <?php if(!empty($this->description)) : ?> <span class="description customize-control-description”> <?php echo $this->description ; ?> </span> <?php endif; ?> <textarea rows=“5" cols=“20” <?php $this->link(); ?>> <?php echo esc_textarea($this->value()); ?> </textarea> </label> <?php }}

class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> <?php if(!empty($this->description)) : ?> <span class="description customize-control-description”> <?php echo $this->description ; ?> </span> <?php endif; ?> <textarea rows=“5" cols=“20” <?php $this->link(); ?>> <?php echo esc_textarea($this->value()); ?> </textarea> </label> <?php }}

$wp_customize->add_control( !!!!!!!!!);

$wp_customize->add_control( new My_Customize_Textarea_Control( !!!!!!! ));

$wp_customize->add_control( new My_Customize_Textarea_Control( $wp_customize, ‘theme_copyright_text’, !!!!! ));

$wp_customize->add_control( new My_Customize_Textarea_Control( $wp_customize, ‘theme_copyright_text’, array( 'label' => __(‘Copyright text', 'theme'), 'section' => 'features', 'settings' => ‘theme_copyright_text’, 'priority' => 2 ) ));

Podgląd zmian na żywo

$wp_customize->add_setting( 'portfolio_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ));

$wp_customize->add_setting( 'portfolio_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ));

(function($){ !!!!!!!})(jQuery);

(function($){ wp.customize( 'portfolio_primary_color', function(value) { !! } );})(jQuery);

(function($){ wp.customize( 'portfolio_primary_color', function(value) { value.bind(function(to) { }); } );})(jQuery);

(function($){ wp.customize( 'portfolio_primary_color', function(value) { value.bind(function(to) { jQuery('a').css('color', to || '#5cc1a9'); }); } );})(jQuery);

Porada optymalizacyjna

wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { !!!!!!!! } );});

wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; !!!!! } );});

wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; !!!!! } );});

wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; if($('#new-css').length) { $('#new-css').remove(); } ! } );});

wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; if($('#new-css').length) { $('#new-css').remove(); } $(document).find('head') .append($('<style id="new-css">' + new_css + '</style>')); } );});

Kontakt

Lead Developer @ GavickPro

@dziudek

http://dziudek.pl

dziudek@gmail.com

Pytania ?