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 - WordUp Łódź

630 views

Published on

Prezentacja opisująca ekran personalizacji motywu od strony programistycznej z uwzględnieniem zmian w WordPressie 4.0

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Wykorzystanie możliwości ekranu personalizacji motywu - WordUp Łódź

  1. 1. Wykorzystanie możliwości ekranu personalizacji motywu Tomasz Dziuda
  2. 2. Dlaczego warto z niego korzystać?
  3. 3. • Łatwa implementacja opcji motywu
  4. 4. • Łatwa implementacja opcji motywu • Podgląd zmian strony “na żywo”
  5. 5. • Łatwa implementacja opcji motywu • Podgląd zmian strony “na żywo” • Możliwość łatwego przetestowania opcji motywu
  6. 6. • Łatwa implementacja opcji motywu • Podgląd zmian strony “na żywo” • Możliwość łatwego przetestowania opcji motywu • Użytkownik nie musi uczyć się sposobu konfiguracji motywu
  7. 7. Zarządzanie widżetami
  8. 8. Panel widżetów pojawi się tylko gdy wyświetlana strona zawiera panele boczne
  9. 9. Ważne pojęcia
  10. 10. Menadżer Personalizacji
  11. 11. Menadżer Personalizacji Panel
  12. 12. Menadżer Personalizacji Panel Sekcja
  13. 13. Menadżer Personalizacji Panel Sekcja Kontrolka
  14. 14. Menadżer Personalizacji Panel Sekcja Kontrolka Ustawienie
  15. 15. Menadżer Personalizacji Panel Sekcja Kontrolka Kontekst Ustawienie
  16. 16. Menadżer Personalizacji
  17. 17. • Znany szerzej jako $wp_customize
  18. 18. • Znany szerzej jako $wp_customize • Pozwala zarządzać elementami ekranu personalizacji
  19. 19. • 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
  20. 20. • 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).
  21. 21. Ustawienie
  22. 22. $wp_customize->add_setting( ! ! ! ! ! ! );
  23. 23. $wp_customize->add_setting( ‘mytheme_bgcolor’, ! ! ! ! ! );
  24. 24. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ! ! ) );
  25. 25. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ! ) );
  26. 26. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ‘type’ => ‘theme_mod’, ! ) );
  27. 27. $wp_customize->add_setting( ‘mytheme_bgcolor’, array( ‘default’ => ‘#fff’, ‘sanitize_callback’ => ‘sanitize_hex_color’, ‘type’ => ‘theme_mod’, ‘transport’ => ‘refresh’ ) );
  28. 28. Panele, Sekcje i Kontrolki
  29. 29. $wp_customize->add_panel( ! ! ! ! ! );
  30. 30. $wp_customize->add_panel( ‘panel_name’, ! ! ! ! );
  31. 31. $wp_customize->add_panel( ‘panel_name’, array( ‘priority’ => 10, ‘title’ => ‘My Panel’, ‘description’ => ‘Simple panel description’ ) );
  32. 32. $wp_customize->add_section( ! ! ! ! ! ! );
  33. 33. $wp_customize->add_section( 'section_name', ! ! ! ! ! );
  34. 34. $wp_customize->add_section( 'section_name', array( ‘priority' => 10, ‘title' => ‘My Section', ‘description' => ‘Section description', 'panel' => 'panel_name' ) );
  35. 35. $wp_customize->add_section( 'section_name', array( ‘priority' => 10, ‘title' => ‘My Section', ‘description' => ‘Section description', 'panel' => 'panel_name' ) );
  36. 36. $wp_customize->add_control( ! ! ! ! ! ! );
  37. 37. $wp_customize->add_control( 'setting_name', ! ! ! ! ! ! );
  38. 38. $wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description' ) );
  39. 39. $wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description' ) );
  40. 40. Modyfikacja istniejących elementów
  41. 41. $wp_customize->get_section(‘colors')->description = __( 'Background may only be visible on wide screens.’, ‘twentyfourteen' );
  42. 42. $wp_customize->get_setting(‘blogname')->transport ! = 'postMessage';
  43. 43. $wp_customize->remove_control('blogname')
  44. 44. Kontekst
  45. 45. • Kontekst określamy tylko dla kontrolek
  46. 46. • Kontekst określamy tylko dla kontrolek • Kontekst działa oddolnie na sekcje i panele
  47. 47. • 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
  48. 48. $wp_customize->add_control( 'setting_name', array( 'type' => 'text', ‘section' => ‘section_name', ‘priority' => 10, ‘label' => ‘Option label', 'description' => ‘Option description’, ! ) );
  49. 49. $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' ) );
  50. 50. Jak wykorzystać kontekst?
  51. 51. • Ukrywanie nadmiaru opcji
  52. 52. • Ukrywanie nadmiaru opcji • Opcje dedykowane dla konkretnych podstron
  53. 53. • Ukrywanie nadmiaru opcji • Opcje dedykowane dla konkretnych podstron • Określanie zależności pomiędzy opcjami
  54. 54. function mytheme_show_font_field($control) { ! }
  55. 55. function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font'); ! }
  56. 56. function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font'); ! return $option->value() == 'google'; }
  57. 57. Ważne akcje
  58. 58. • customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji
  59. 59. • customize_register - wykorzystywana do konfiguracji opcji ekranu personalizacji • wp_head - używana do wyświetlania kodu modyfikującego stronę na bazie opcji motywu
  60. 60. • 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
  61. 61. • 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
  62. 62. Rodzaje kontrolek
  63. 63. text radio checkbox textarea select dropdown-pages
  64. 64. WP_Customize_Image_Control WP_Customize_Color_Control
  65. 65. A gdy potrzebujemy więcej kontrolek?
  66. 66. $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‘ ) ) );
  67. 67. $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‘ ) ) );
  68. 68. Choć jest mały problem…
  69. 69. Własne kontrolki
  70. 70. class My_Customize_Textarea_Control extends WP_Customize_Control { ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }
  71. 71. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }
  72. 72. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> ! ! ! ! ! ! ! ! ! ! ! ! ! ! <?php } }
  73. 73. 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 } }
  74. 74. 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 } }
  75. 75. 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 } }
  76. 76. 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 } }
  77. 77. $wp_customize->add_control( ! ! ! ! ! ! ! ! ! );
  78. 78. $wp_customize->add_control( new My_Customize_Textarea_Control( ! ! ! ! ! ! ! ) );
  79. 79. $wp_customize->add_control( new My_Customize_Textarea_Control( $wp_customize, ‘theme_copyright_text’, ! ! ! ! ! ) );
  80. 80. $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 ) ) );
  81. 81. Podgląd zmian na żywo
  82. 82. $wp_customize->add_setting( 'portfolio_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ) );
  83. 83. $wp_customize->add_setting( 'portfolio_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ) );
  84. 84. (function($){ ! ! ! ! ! ! ! })(jQuery);
  85. 85. (function($){ wp.customize( 'portfolio_primary_color', function(value) { ! ! } ); })(jQuery);
  86. 86. (function($){ wp.customize( 'portfolio_primary_color', function(value) { value.bind(function(to) { }); } ); })(jQuery);
  87. 87. (function($){ wp.customize( 'portfolio_primary_color', function(value) { value.bind(function(to) { jQuery('a').css('color', to || '#5cc1a9'); }); } ); })(jQuery);
  88. 88. Porada optymalizacyjna
  89. 89. wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { ! ! ! ! ! ! ! ! } ); });
  90. 90. wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; ! ! ! ! ! } ); });
  91. 91. wp.customize( 'portfolio_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; ! ! ! ! ! } ); });
  92. 92. 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(); } ! } ); });
  93. 93. 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>')); } ); });
  94. 94. Kontakt Lead Developer @ GavickPro @dziudek http://dziudek.pl dziudek@gmail.com
  95. 95. Pytania ?

×