Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wykorzystanie możliwości ekranu personalizacji motywu - WordCamp Polska

1,465 views

Published on

Rozszerzona wersja mojej prelekcji o ekranie personalizacji motywu, przygotowana na WordCamp Polska.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Wykorzystanie możliwości ekranu personalizacji motywu - WordCamp Polska

  1. 1. Wykorzystanie możliwości ekranu personalizacji motywu Tomasz Dziuda WordCamp Polska @ Warszawa 2014
  2. 2. Tomasz Dziuda Lead Developer @ @dziudek http://dziudek.pl dziudek@gavick.com
  3. 3. Dlaczego warto z niego korzystać?
  4. 4. Podgląd zmian strony “na żywo”
  5. 5. Łatwa implementacja opcji motywu
  6. 6. Możliwość łatwego przetestowania opcji motywu bez wpływu na wygląd strony
  7. 7. Użytkownik nie musi uczyć się od podstaw sposobu konfiguracji motywu
  8. 8. Zarządzanie widżetami
  9. 9. Panel widżetów pojawi się tylko gdy wyświetlana strona zawiera panele boczne
  10. 10. 4 porady życiowe dla Was ode mnie
  11. 11. Przyrost liczby opcji powoduje wykładniczy wzrost szans na pytania od klienta 1 0 Liczba opcji
  12. 12. Oddanie pełnej kontroli użytkownikowi nad kolorami, prawie zawsze kończy się tragicznie
  13. 13. Kokpit przyjmie wszystko, użytkownik niekoniecznie
  14. 14. Rozwiązania zaimplementowane w oficjalnym API działają lepiej
  15. 15. Ważne pojęcia
  16. 16. Menadżer Personalizacji
  17. 17. Menadżer Personalizacji Panel
  18. 18. Menadżer Personalizacji Panel Sekcja
  19. 19. Menadżer Personalizacji Panel Sekcja Kontrolka
  20. 20. Menadżer Personalizacji Panel Sekcja Kontrolka Ustawienie
  21. 21. Menadżer Personalizacji Panel Sekcja Kontrolka Kontekst Ustawienie
  22. 22. Menadżer Personalizacji
  23. 23. • Znany szerzej jako $wp_customize
  24. 24. • Znany szerzej jako $wp_customize • Pozwala zarządzać elementami ekranu personalizacji
  25. 25. • 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
  26. 26. • 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).
  27. 27. Dodawanie elementów
  28. 28. $wp_customizer->add_X( ! ! ! ! ! ! );
  29. 29. $wp_customizer->add_X( ! ! ! ! ! ! ); X = setting, panel, section, control
  30. 30. $wp_customizer->add_X( ‘name’, ! ! ! ! ! ); X = setting, panel, section, control
  31. 31. $wp_customizer->add_X( ‘name’, array( ‘setting_1’ => ‘value’, ‘setting_2’ => ‘value’, … ‘setting_N’ => ‘value’ ) ); X = setting, panel, section, control
  32. 32. $wp_customizer->get_X(‘name’) !
  33. 33. $wp_customizer->get_X(‘name’) ! $wp_customizer->remove_X(‘name’)
  34. 34. Ustawienie
  35. 35. $wp_customize->add_setting( ! ! ! ! ! ! );
  36. 36. $wp_customize->add_setting( ‘mytheme_bgcolor’, ! ! ! ! ! );
  37. 37. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ! ! ) );
  38. 38. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ! ) );
  39. 39. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ‘type’ => ‘theme_mod’, ! ) );
  40. 40. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ‘type’ => ‘theme_mod’, ‘transport’ => ‘refresh’ ) );
  41. 41. Sekcja sekcji panelem
  42. 42. $wp_customize->add_panel( ! ! ! ! ! );
  43. 43. $wp_customize->add_panel( ‘panel_name’, ! ! ! ! );
  44. 44. $wp_customize->add_panel( ‘panel_name’, array( ‘priority’ => 10, ‘title’ => ‘My Panel’, ‘description’ => ‘Simple panel description’ ) );
  45. 45. $wp_customize->add_section( ! ! ! ! ! ! );
  46. 46. $wp_customize->add_section( 'section_name', ! ! ! ! ! );
  47. 47. $wp_customize->add_section( 'section_name', array( ‘priority' => 10, ‘title' => ‘My Section', ‘description' => ‘Section description', 'panel' => 'panel_name' ) );
  48. 48. $wp_customize->add_section( 'section_name', array( ‘priority' => 10, ‘title' => ‘My Section', ‘description' => ‘Section description', 'panel' => 'panel_name' ) );
  49. 49. $wp_customize->add_control( ! ! ! ! ! ! );
  50. 50. $wp_customize->add_control( 'setting_name', ! ! ! ! ! ! );
  51. 51. $wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description' ) );
  52. 52. $wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description' ) );
  53. 53. Modyfikacja istniejących elementów
  54. 54. $wp_customize->get_section(‘colors')->description = __( 'Background may only be visible on wide screens.’, ‘twentyfourteen' );
  55. 55. $wp_customize->get_setting(‘blogname')->transport ! = 'postMessage';
  56. 56. $wp_customize->remove_control('blogname')
  57. 57. Kontrolka kontrolce kontrolką - czyli Kontekst
  58. 58. • Kontekst określamy tylko dla kontrolek
  59. 59. • Kontekst określamy tylko dla kontrolek • Kontekst działa oddolnie na sekcje i panele
  60. 60. • 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
  61. 61. $wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description’, ! ) );
  62. 62. $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' ) );
  63. 63. Jak wykorzystać kontekst?
  64. 64. • Ukrywanie nadmiaru opcji
  65. 65. • Ukrywanie nadmiaru opcji • Opcje dedykowane dla konkretnych podstron
  66. 66. • Ukrywanie nadmiaru opcji • Opcje dedykowane dla konkretnych podstron • Określanie zależności pomiędzy opcjami
  67. 67. function mytheme_show_font_field($control) { ! }
  68. 68. function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font'); ! }
  69. 69. function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font'); ! return $option->value() == 'google'; }
  70. 70. Ważne akcje
  71. 71. • customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji
  72. 72. • customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji • wp_head - używana do wyświetlania kodu modyfikującego stronę na bazie opcji motywu
  73. 73. • 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
  74. 74. • 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
  75. 75. Rodzaje kontrolek
  76. 76. text radio checkbox textarea select dropdown-pages
  77. 77. WP_Customize_Image_Control WP_Customize_Color_Control
  78. 78. A gdy potrzebujemy więcej kontrolek?
  79. 79. $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‘ ) ) );
  80. 80. $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‘ ) ) );
  81. 81. $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‘ ) ) );
  82. 82. Choć jest mały problem…
  83. 83. źródło: http://caniuse.com/#search=date
  84. 84. Własne kontrolki
  85. 85. class My_Customize_Textarea_Control extends WP_Customize_Control { ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }
  86. 86. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }
  87. 87. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> ! ! ! ! ! ! ! ! ! ! ! ! ! ! <?php } }
  88. 88. 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 } }
  89. 89. 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 } }
  90. 90. 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 } }
  91. 91. 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 } }
  92. 92. $wp_customize->add_control( ! ! ! ! ! ! ! ! ! );
  93. 93. $wp_customize->add_control( new My_Customize_Textarea_Control( ! ! ! ! ! ! ! ) );
  94. 94. $wp_customize->add_control( new My_Customize_Textarea_Control( $wp_customize, ‘theme_copyright_text’, ! ! ! ! ! ) );
  95. 95. $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 ) ) );
  96. 96. Podgląd zmian na żywo
  97. 97. $wp_customize->add_setting( 'portfolio_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ) );
  98. 98. $wp_customize->add_setting( 'portfolio_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ) );
  99. 99. (function($){ ! ! ! ! ! ! ! })(jQuery);
  100. 100. (function($){ wp.customize( 'portfolio_primary_color', function(value) { ! ! } ); })(jQuery);
  101. 101. (function($){ wp.customize( 'portfolio_primary_color', function(value) { value.bind(function(to) { }); } ); })(jQuery);
  102. 102. (function($){ wp.customize( 'portfolio_primary_color', function(value) { value.bind(function(to) { jQuery('a').css('color', to || '#5cc1a9'); }); } ); })(jQuery);
  103. 103. Porada optymalizacyjna
  104. 104. wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { ! ! ! ! ! ! ! ! } ); });
  105. 105. wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; ! ! ! ! ! } ); });
  106. 106. wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; ! ! ! ! ! } ); });
  107. 107. 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(); } ! } ); });
  108. 108. 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>')); } ); });
  109. 109. Pytania ?
  110. 110. Prezentacja ta dostępna jest na licencji GPL: ! http://www.gnu.org/copyleft/gpl.html

×