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

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

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
0
Liczba 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

Menadżer Personalizacji
Panel

Panel
Sekcja

Panel
Sekcja
Kontrolka

Panel
Sekcja
Kontrolka
Ustawienie

Panel
Sekcja
Kontrolka
Kontekst Ustawienie

• 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

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

$wp_customizer->add_X(
!
!
!
!
!
!
);

!
!
!
!
!
!
);
X = setting, panel, section, control

‘name’,
!
!
!
!
!
);

‘name’,
array(
‘setting_1’ => ‘value’,
‘setting_2’ => ‘value’,
…
‘setting_N’ => ‘value’
)
);

$wp_customizer->get_X(‘name’)
!

$wp_customizer->get_X(‘name’)
!
$wp_customizer->remove_X(‘name’)

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

‘mytheme_bgcolor’,
!
!
!
!
!
);

array(
‘default’ => ‘#fff’,
!
!
)
);

array(
‘sanitize_callback’ => ‘sanitize_hex_color’,
!
)
);

array(
‘type’ => ‘theme_mod’,
!
)
);

array(
‘type’ => ‘theme_mod’,
‘transport’ => ‘refresh’
)
);

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

‘panel_name’,
!
!
!
!
);

‘panel_name’,
array(
‘priority’ => 10,
‘title’ => ‘My Panel’,
‘description’ => ‘Simple panel description’
)
);

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

'section_name',
!
!
!
!
!
);

'section_name',
array(
‘priority' => 10,
‘title' => ‘My Section',
‘description' => ‘Section description',
'panel' => 'panel_name'
)
);

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

'setting_name',
!
!
!
!
!
!
);

'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 działa oddolnie na sekcje i panele

• Kontekst działa oddolnie na sekcje i panele
• Sekcja bez kontrolek będzie niewidoczna
tak samo jak panel bez sekcji

'setting_name',
array(
'type' => 'text',
‘priority' => 10,
'description' => ‘Option description’,
!
)
);

'setting_name',
array(
'type' => 'text',
‘priority' => 10,
'description' => ‘Option description’,
'active_callback' => 'is_front_page'
)
);

• 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) {
!
}

$option = $control->manager->get_setting(‘mytheme_font');
!
}

$option = $control->manager->get_setting(‘mytheme_font');
!
return $option->value() == 'google';
}

• 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_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

text
radio
checkbox
textarea
select
dropdown-pages

WP_Customize_Image_Control WP_Customize_Color_Control

A gdy potrzebujemy
więcej kontrolek?

‘mytheme_layout_width’,
array(
'type' => 'range',
'section' => 'layout',
'label' => ‘Layout width',
'input_attrs' => array(
'min' => 720,
'max' => 1280,
'step' => 1,
'class' => ‘layout-width-control‘
)
)
);

źródło: http://caniuse.com/#search=date

class My_Customize_Textarea_Control extends WP_Customize_Control {
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
}

public $type = 'textarea';
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
}

public function render_content() {
?>
!
!
!
!
!
!
!
!
!
!
!
!
!
!
<?php
}
}

?>
<label>
<?php if(!empty($this->label)) : ?>
<span class=“customize-control-title">
<?php echo esc_html( $this->label ); ?>
</span>
<?php endif; ?>
!
!
!
!
!
!
!
</label>
<?php
}
}

?>
<label>
</span>
<?php endif; ?>
<?php if(!empty($this->description)) : ?>
<span class="description customize-control-description”>
<?php echo $this->description ; ?>
</span>
<?php endif; ?>
!
!
</label>
<?php
}
}

?>
<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
}
}

!
!
!
!
!
!
!
!
!
);

new My_Customize_Textarea_Control(
!
!
!
!
!
!
!
)
);

$wp_customize,
‘theme_copyright_text’,
!
!
!
!
!
)
);

$wp_customize,
‘theme_copyright_text’,
array(
'label' => __(‘Copyright text', 'theme'),
'section' => 'features',
'settings' => ‘theme_copyright_text’,
'priority' => 2
)
)
);

'portfolio_primary_color',
array(
'default' => '#5cc1a9',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
'sanitize_callback' => 'sanitize_hex_color'
)
);

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

(function($){
wp.customize(
function(value) {
!
!
}
);
})(jQuery);

(function($){
wp.customize(
function(value) {
value.bind(function(to) {
});
}
);
})(jQuery);

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

wp.customize(
function(value) {
value.bind( function( to ) {
!
!
!
!
!
!
!
!
}
);
});

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

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

wp.customize(
function(value) {
to = to || '#5cc1a9';
if($('#new-css').length) {
$('#new-css').remove();
}
!
}
);
});

wp.customize(
function(value) {
to = to || '#5cc1a9';
if($('#new-css').length) {
$('#new-css').remove();
}
$(document).find('head')
.append($('<style id="new-css">' + new_css + '</style>'));
}
);
});

Prezentacja ta dostępna jest na licencji GPL:
!
http://www.gnu.org/copyleft/gpl.html

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (11)

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

Similaire à Wykorzystanie możliwości ekranu personalizacji motywu - WordCamp Polska (6)

Plus de Tomasz Dziuda

Plus de Tomasz Dziuda (20)

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