Post on 06-Jul-2015
description
Wykorzystanie możliwości ekranu personalizacji motywu
Tomasz Dziuda
WordCamp Polska @ Warszawa 2014
Tomasz Dziuda
Lead Developer @
@dziudek
http://dziudek.pl
dziudek@gavick.com
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
4 porady życiowe dla Was ode mnie
Przyrost liczby opcji powoduje wykładniczy wzrost szans na pytania od klienta
1
0Liczba opcji
Oddanie pełnej kontroli użytkownikowi nad kolorami, prawie zawsze kończy się tragicznie
Kokpit przyjmie wszystko, użytkownik niekoniecznie
Rozwiązania zaimplementowane w oficjalnym API działają lepiej
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( !
!
!
!
!
!
);
X = setting, panel, section, control
$wp_customizer->add_X( ‘name’, !
!
!
!
!
);
X = setting, panel, section, control
$wp_customizer->add_X( ‘name’, array( ‘setting_1’ => ‘value’, ‘setting_2’ => ‘value’, … ‘setting_N’ => ‘value’ ));
X = setting, panel, section, control
$wp_customizer->get_X(‘name’)!
$wp_customizer->get_X(‘name’)!
$wp_customizer->remove_X(‘name’)
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’ ));
Sekcja sekcji panelem
$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')
Kontrolka kontrolce kontrolką - czyli
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>')); } );});
Pytania ?
Prezentacja ta dostępna jest na licencji GPL: !
http://www.gnu.org/copyleft/gpl.html