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