1.
Wykorzystanie możliwości
ekranu personalizacji motywu
Tomasz Dziuda

2.
Dlaczego warto z niego
korzystać?

3.
• Łatwa implementacja opcji motywu

4.
• Łatwa implementacja opcji motywu
• Podgląd zmian strony “na żywo”

5.
• Łatwa implementacja opcji motywu
• Podgląd zmian strony “na żywo”
• Możliwość łatwego przetestowania opcji
motywu

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.
Zarządzanie widżetami

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

9.
Ważne pojęcia

10.
Menadżer Personalizacji

11.
Menadżer Personalizacji
Panel

12.
Menadżer Personalizacji
Panel
Sekcja

13.
Menadżer Personalizacji
Panel
Sekcja
Kontrolka

14.
Menadżer Personalizacji
Panel
Sekcja
Kontrolka
Ustawienie

15.
Menadżer Personalizacji
Panel
Sekcja
Kontrolka
Kontekst Ustawienie

16.
Menadżer Personalizacji

17.
• Znany szerzej jako $wp_customize

18.
• Znany szerzej jako $wp_customize
• Pozwala zarządzać elementami ekranu personalizacji

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.
• 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.
Ustawienie

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

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

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

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

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

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

28.
Panele, Sekcje i Kontrolki

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

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

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

32.
$wp_customize->add_section(
!
!
!
!
!
!
);

33.
$wp_customize->add_section(
'section_name',
!
!
!
!
!
);

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

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

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

37.
$wp_customize->add_control(
'setting_name',
!
!
!
!
!
!
);

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

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

40.
Modyfikacja istniejących
elementów

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

42.
$wp_customize->get_setting(‘blogname')->transport
!
= 'postMessage';

43.
$wp_customize->remove_control('blogname')

44.
Kontekst

45.
• Kontekst określamy tylko dla kontrolek

46.
• Kontekst określamy tylko dla kontrolek
• Kontekst działa oddolnie na sekcje i panele

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.
$wp_customize->add_control(
'setting_name',
array(
'type' => 'text',
‘section' => ‘section_name',
‘priority' => 10,
‘label' => ‘Option label',
'description' => ‘Option description’,
!
)
);

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.
Jak wykorzystać
kontekst?

51.
• Ukrywanie nadmiaru opcji

52.
• Ukrywanie nadmiaru opcji
• Opcje dedykowane dla konkretnych
podstron

53.
• Ukrywanie nadmiaru opcji
• Opcje dedykowane dla konkretnych
podstron
• Określanie zależności pomiędzy opcjami

54.
function mytheme_show_font_field($control) {
!
}

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

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

57.
Ważne akcje

58.
• customize_register - wykorzystywana do
konfiguracji opcji ekranu personalizacji

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.
• 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.
• 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.
Rodzaje kontrolek

63.
text
radio
checkbox
textarea
select
dropdown-pages

64.
WP_Customize_Image_Control WP_Customize_Color_Control

65.
A gdy potrzebujemy
więcej kontrolek?

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.
$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.
Choć jest mały
problem…

69.
Własne kontrolki

70.
class My_Customize_Textarea_Control extends WP_Customize_Control {
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
}

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

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

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.
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.
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.
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.
$wp_customize->add_control(
!
!
!
!
!
!
!
!
!
);

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

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

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.
Podgląd zmian na żywo

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

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

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

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

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

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

88.
Porada optymalizacyjna

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

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

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

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.
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.
Kontakt
Lead Developer @ GavickPro
@dziudek
http://dziudek.pl
dziudek@gmail.com

95.
Pytania ?