WordPress Theme Customizer Boilerplate
  1. 1. Wprowadzenie do dostosowywania motywów WordPress
  2. 2). Interakcja z programem WordPress Customizer
  3. 3). Teraz czytam: WordPress Theme Customizer Boilerplate
  4. 4. Rozszerzenie szablonu dostosowywania motywu WordPress
  5. 5. Szablon niestandardowego szablonu dostosowywania – opcje warunkowe, motywy podrzędne i wtyczki

Aktualizacja: ten artykuł został zredagowany 19 lutego 2013 r., Aby odzwierciedlić zmiany wprowadzone w szablonie dostosowywania motywu.


Mam nadzieję, że przeczytałeś i spodobały Ci się pierwsze dwa posty z serii Theme Customizer – Wprowadzenie do WordPress Theme Customizer i Interakcja z Theme Customizer. Teraz nadszedł czas, aby przejść do dania głównego i zacząć montować płytkę Theme Customizer, której będziesz mógł używać w swoich motywach. Ten post zawiera kilka długich bloków kodu, więc zwróć uwagę na wbudowane komentarze.

Uwaga: Jeśli wolisz od razu skorzystać z szablonu, możesz go pobrać z Github i zmienić pola w tablicy $ options, podpinając hak filtra „thsp_cbp_options_array”.

Co tworzymy

Struktura katalogu Boilerplate programu Customizer Theme

Struktura katalogu Boilerplate programu Customizer Theme

  • customizer.php – To jest główny plik szablonów Theme Customizer, ten, który dodaje sekcje, ustawienia i elementy sterujące przy użyciu danych z tablicy opcji
  • custom-controls.php – Niestandardowe klasy kontroli i hak akcji, który pozwala dodawać własne niestandardowe elementy sterujące
  • helpers.php – Funkcje pomocnicze, używane do pobierania opcji motywu, ustawień domyślnych opcji itp.
  • options.php – Przykładowe opcje i zaczep filtra, który pozwala edytować tablicę opcji i używać własnych pól
  • customizer-controls.css – Podstawowy CSS dla niestandardowego sterowania radiowego zastępującego obraz

Cały pomysł polega na tym, aby móc skopiować te pliki do podkatalogu w katalogu motywów, dołączyć plik customizer.php z pliku functions.php i zmienić wszystko, co chcesz, w tym zwłaszcza tablicę opcji, za pomocą haczyków Theme Customizer Boilerplate (wyjaśnione w części 4). Aktualizacja: Wcześniej po prostu edytowałeś options.php, ale użycie haków sprawia, że ​​wszystko jest dużo czystsze.

A teraz użyjmy prawdziwego przykładu – dodamy kontrolkę tekstową do nowej sekcji Dostosowywania motywów. Tablica jest umieszczana w funkcji pomocniczej i ma do niej zastosowany filtr po zwróceniu. W ten sposób możesz dodać więcej opcji z motywu podrzędnego lub wtyczki. Oto on:

/ **
* Funkcja pomocnika, która zawiera szereg opcji motywu.
*
* @return tablica $ options Tablica opcji motywu
* @ wykorzystuje thsp_get_theme_customizer_fields () zdefiniowane w customizer / helpers.php
* /
funkcja thsp_get_theme_customizer_fields () {

/ *
* Korzystanie z funkcji pomocnika w celu uzyskania domyślnej wymaganej zdolności
* /
$ wymagany_kapability = thsp_settings_page_capability ();

$ options = tablica (


// Identyfikator sekcji
'new_customizer_section' => tablica (

/ *
* Sprawdzamy, czy jest to istniejąca sekcja
* lub nowy, który należy zarejestrować
* /
„exist_section” => false,
/ *
* Argumenty dotyczące sekcji
* Kodeks - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => tablica (
„title” => __ („New Title Title”, „my_theme_textdomain”),
„description” => __ („Nowy opis sekcji”, „my_theme_textdomain”),
„priorytet” => 10
),

/ *
* Tablica „pól” zawiera wszystkie pola, które muszą być
* dodane do tej sekcji
* /
„fields” => tablica (

/ *
* ==========
* ==========
* Pole tekstowe
* ==========
* ==========
* /
// identyfikator pola
'new_text_field' => tablica (
/ *
* Ustawianie powiązanych argumentów
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => tablica (
„default” => __ („Domyślna wartość tekstowa”, „my_theme_textdomain”),
„typ” => „opcja”,
„capability” => $ wymagany_kapitał,
„transport” => „odśwież”,
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Argumenty związane z kontrolą
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => tablica (
„label” => __ („Nowa etykieta kontroli tekstu”, „my_theme_textdomain”),
„type” => „text”, // Kontrola pola tekstowego
„priorytet” => 1
)
)

)

),

);

/ *
* Zaczep filtra „thsp_customizer_options” pozwoli ci
* dodaj / usuń niektóre z tych opcji z motywu podrzędnego
* /
zwróć Apply_filters ('thsp_customizer_options', $ options);

}

Aktualizacja: Tablica pozostaje taka sama, ale teraz możesz także przekazać tablicę opcji do haka filtru, więcej szczegółów w części 4.

Na pierwszy rzut oka wygląda na skomplikowany, ale pozwól mi wyjaśnić.

The Opcje $ tablica składa się z sekcji (tylko w tym przypadku – new_customizer_section), każda sekcja ma swoje argumenty, pola i wartość logiczną (istniejąca_sekcja), aby wskazać, czy jest to nowa sekcja, lub po prostu dodajemy niektóre pola do istniejącej jeden. Tablica argumentów jest identyczna z tym, co przekazujesz $ wp_customize-> add_section metoda. Tablica pól jest nieco bardziej złożona.

Aktualizacja: tablica opcji w argumentach kontrolnych jest teraz tablicą wielowymiarową.

Każde pole składa się z ustawienia Customizer i kontrolki Customizer. Właśnie dlatego mamy tablice setting_args i control_args. Są prawie dokładnie takie same jak tablice argumentów, które przekazujesz $ wp_customize-> add_setting i $ wp_customize-> add_control metody. Jedyną różnicą jest tablica „wyborów” w argumentach kontrolnych, $ wp_customize-> add_control wymaga, aby była to prosta para klucz => tablica wartości i zamiast tego używamy tablicy wielowymiarowej.

W ten sposób można przekazać więcej danych do każdej opcji, więc jeśli na przykład ładujesz czcionki Google do swojego motywu, będziesz mieć ciągi znaków, które pozwolą załadować prawidłową czcionkę w tablicy opcji . Możesz zobaczyć przykład tego motyw korzystający z niestandardowego szablonu Boiler.

Jeśli więc znasz już te trzy metody, wszystko jest bardzo znane.

Dodanie kontrolki pola wyboru jest prawie takie samo, wystarczy zmienić „typ” na „pole wyboru” w tablicy „control_args”:

/ *
* ==============
* Pole wyboru
* ==============
* /
'new_checkbox_field' => tablica (
'setting_args' => tablica (
„default” => true,
„typ” => „opcja”,
„capability” => $ wymagany_kapitał,
„transport” => „odśwież”,
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => tablica (
„label” => __ („Nowa etykieta sterowania radiowego”, „my_theme_textdomain”),
„type” => „checkbox”, // Pole kontrolne Checkbox
„priorytet” => 2
)
),

Sterowanie radiem i wybierz są prawie takie same, wystarczy podać podane opcje:

/ *
* ===========
* ===========
* Pole radiowe
* ===========
* ===========
* /
'new_radio_field' => tablica (
'setting_args' => tablica (
„default” => „opcja-2”,
„typ” => „opcja”,
„capability” => $ thsp_cbp_capability,
„transport” => „odśwież”,
),
'control_args' => tablica (
„label” => __ („Nowa etykieta sterowania radiowego”, „my_theme_textdomain”),
„type” => „radio”, // Sterowanie radiowe
„wybory” => tablica (
„opcja-1” => tablica (
„label” => __ („Opcja 1”, „my_theme_textdomain”)
),
„opcja-2” => tablica (
„label” => __ („Opcja 2”, „my_theme_textdomain”)
),
„opcja-3” => tablica (
„label” => __ („Opcja 3”, „my_theme_textdomain”)
)
),
„priorytet” => 3
)
),

/ *
* ============
* ============
* Wybierz pole
* ============
* ============
* /
'new_select_field' => tablica (
'setting_args' => tablica (
„default” => „opcja-3”,
„typ” => „opcja”,
„capability” => $ thsp_cbp_capability,
„transport” => „odśwież”,
),
'control_args' => tablica (
„label” => __ („Nowa etykieta pola wyboru”, „my_theme_textdomain”),
„type” => „select”, // Wybierz sterowanie
„wybory” => tablica (
„opcja-1” => tablica (
„label” => __ („Opcja 1”, „my_theme_textdomain”)
),
„opcja-2” => tablica (
„label” => __ („Opcja 2”, „my_theme_textdomain”)
),
„opcja-3” => tablica (
„label” => __ („Opcja 3”, „my_theme_textdomain”)
)
),
„priorytet” => 4
)
)

I wreszcie dwa złożone typy kontroli wbudowane w WordPress – przesyłanie plików i przesyłanie obrazów:

/ *
* ===========
* ===========
* Udostępnianie pliku
* ===========
* ===========
* /
'new_file_upload_field' => tablica (
'setting_args' => tablica (
„default” => ”,
„typ” => „opcja”,
„capability” => $ thsp_cbp_capability,
„transport” => „odśwież”,
),
'control_args' => tablica (
„label” => __ („Przesyłanie pliku”, „my_theme_textdomain”),
„type” => „upload”, // Kontrola pola przesyłania plików
„priorytet” => 5
)
),

/ *
* ============
* ============
* Przesyłanie obrazu
* ============
* ============
* /
'new_image_upload_field' => tablica (
'setting_args' => tablica (
„default” => ”,
„typ” => „opcja”,
„capability” => $ thsp_cbp_capability,
„transport” => „odśwież”,
),
'control_args' => tablica (
„label” => __ („Przesyłanie obrazu”, „my_theme_textdomain”),
„type” => „image”, // Kontrola pola przesyłania obrazu
„priorytet” => 6
)
)

Zauważ, że użyłem „Typ” => „opcja” w ustawianiu argumentów dla wszystkich tych pól. Umożliwi to przechowywanie wszystkich wartości w bazie danych jako jednej wartości. Alternatywą jest „Type” => „theme_mod” ale na razie trzymajmy się „opcji”.

Korzystanie z tablicy opcji w celu dodania sekcji, ustawień i elementów sterujących dostosowywania

Jeśli nie masz pewności, jak wchodzić w interakcje z programem WordPress Theme Customizer, przejdź i sprawdź, bo właśnie to będziemy robić teraz. Jedyną różnicą jest to, że zamiast dodawać sekcje, ustawienia i elementy sterujące pojedynczo, zautomatyzujemy proces za pomocą stworzonej przez nas szeregowanej tablicy. Przejdźmy do tego:

funkcja thsp_cbp_customize_register ($ wp_customize) {

/ **
* Niestandardowe elementy sterujące
* /
wymagają (nazwa katalogu (__ PLIK__). '/custom-controls.php');


/ *
* Uzyskaj wszystkie pola za pomocą funkcji pomocnika
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Uzyskaj nazwę pozycji DB, pod którą będą przechowywane opcje
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Pętlę przez tablicę i dodaj sekcje Customizer
* /
foreach ($ thsp_section as $ thsp_section_key => $ thsp_section_value) {

/ **
* W razie potrzeby dodaje sekcję Customizer
* /
if (! $ thsp_section_value ['exist_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Dodaj sekcję
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // end if

/ *
* Pętla przez tablicę „pól” w każdej sekcji
* i dodaj ustawienia i elementy sterujące
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach ($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value) {

/ *
* Sprawdź, czy do opcji zapisano opcję „opcja” lub „theme_mod”
*
* Jeśli nic nie jest ustawione, metoda $ wp_customize-> add_setting będzie domyślnie ustawiona na „theme_mod”
* Jeśli jako typ ustawienia zostanie użyta opcja, jej wartość zostanie zapisana we wpisie w
* {prefix} _options table. Nazwa opcji jest zdefiniowana przez funkcję thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. „[”. $ thsp_field_key. „]”;
} else {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Dodaj domyślną funkcję zwrotną, jeśli nie została zdefiniowana
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Dodaje ustawienia dostosowywania
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
* Dodaje formant Customizer
*
* Do tablicy „control_args” należy dodać wartość „section”
* więc kontrola może zostać dodana do bieżącej sekcji
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* Metoda $ wp_customize-> add_control wymaga, aby „wybory” były prostą parą klucz => para wartości
* /
if (isset ($ thsp_field_value ['control_args'] ['options'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['options'] as $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['options'] = $ thsp_cbp_choices;
}


// Sprawdź typ kontroli
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nowy WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nowy WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nowy WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} else {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // koniec foreach

} // koniec foreach

}
add Działalności („customize_register”, „thsp_cbp_customize_register”);

Przeglądając wszystkie sekcje, dodając te, które już nie istnieją, a następnie przeglądając wszystkie pola w każdej sekcji, dodając ustawienie i kontrolę dla każdej z nich. To wszystko, co się tutaj dzieje.

Pamiętasz, że dla wszystkich ustawień użyliśmy „typ” => „opcja”? Właśnie dlatego mamy „My_theme_options [$ thsp_field_key]” zarówno dla ustawień, jak i sekcji. Spowoduje to zapisanie wszystkich wartości jako jednej szeregowej tablicy, którą można pobrać za pomocą get_option („my_theme_options”). Lub możesz po prostu użyć funkcji pomocniczych zdefiniowanych w helpers.php aby pobrać zarówno bieżące wartości, jak i wartości domyślne dla wszystkich pól:

/ **
* Uzyskaj wartości opcji
*
* Tablica zawierająca wszystkie wartości opcji
* Domyślna wartość opcji jest używana, jeśli użytkownik nie podał wartości
*
* @ wykorzystuje thsp_get_theme_customizer_defaults () zdefiniowane w /customizer/options.php
* @return tablica Aktualne wartości dla wszystkich opcji
* @since Theme_Customizer_Boilerplate 1.0
* /
funkcja thsp_cbp_get_options_values ​​() {

// Uzyskaj opcję domyślną
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analizuj zapisane opcje z wartościami domyślnymi
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ default_defaults);

// Zwraca przeanalizowaną tablicę
zwróć $ thsp_cbp_options;

}


/ **
* Uzyskaj opcje domyślne
*
* Zwraca tablicę przechowującą wartości domyślne dla wszystkich opcji
*
* @ wykorzystuje thsp_get_theme_customizer_fields () zdefiniowane w /customizer/options.php
* @return tablica $ thsp_option_defaults Wartości domyślne dla wszystkich opcji
* @since Theme_Customizer_Boilerplate 1.0
* /
funkcja thsp_cbp_get_options_defaults () {

// Uzyskaj tablicę, która zawiera wszystkie pola opcji motywu
$ thsp_sections = thsp_cbp_get_fields ();

// Zainicjuj tablicę, aby zachować wartości domyślne dla wszystkich opcji motywu
$ thsp_option_defaults = array ();

// Pętla przez tablicę parametrów opcji
foreach ($ thsp_section jako $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['fields'];

foreach ($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value) {

// Dodaj klucz tablicy asocjacyjnej do tablicy defaults dla każdej opcji w tablicy parametrów
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} else {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Zwraca domyślną tablicę
zwraca $ thsp_option_defaults;

}

Jest jeszcze jedna rzecz, o której powinienem wspomnieć – funkcja wywołania zwrotnego odkażania, którą wymieniliśmy w tablicy „setting_args”. Funkcja jest zdefiniowana w ext.php i po prostu przepuszcza dane wp_kses_post funkcjonować:

/ **
* Funkcja oddzwaniania do programu Theme Customizer
* /
funkcja thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Dokąd stąd?

Na razie możesz używać tego szablonu dostosowywania motywu w swoich motywach, wystarczy pobrać go z Github, skopiować do katalogu motywu i dołączyć główny plik z functions.php, który jest w 100% funkcjonalny i wystarczająco dobry dla większości tematy.

Ponieważ Twój motyw nie jest „podobny do większości motywów”, w przyszłym tygodniu zobaczymy, jak przedłużyć płytkę kotłową za pomocą filtra i haczyków akcji.

Bardzo chciałbym usłyszeć, jak według ciebie można ulepszyć lub rozszerzyć tę płytę grzewczą, więc proszę o komentarze w komentarzach.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me