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

W części 1 serii WordPress Theme Customizer wspomniałem, że aby wejść w interakcję z Theme Customizer, musisz go załadować $ wp_customize obiekt, który jest instancją obiektu WP_Customize_Manager klasa. Aby to zrobić, musisz użyć customize_register hak akcji:


add działań („customize_register”, „my_theme_customize_register”);
funkcja my_theme_customize_register ($ wp_customize) {

// Interakcja z obiektem $ wp_customize

}

Możesz umieścić ten kod w pliku functions.php motywu lub w pliku z niego zawartym.

Dodawanie lub usuwanie elementów Theme Customizer (sekcje, ustawienia i elementy sterujące)

Po załadowaniu $ wp_customize obiekt, którego możesz użyć dowolną z jego metod, aby dodać, uzyskać lub usunąć ustawienia, kontrolki i sekcje w nim zawarte (add_setting, get_setting, remove_setting, add_control… otrzymujesz punkt).

Więc jeśli chcesz dostać lub usunąć sekcja, kontrola lub ustawienie, wszystko czego potrzebujesz to jego identyfikator. Ta linia usunie sekcję Kolory (umieść ją w funkcji my_theme_customize_register z pierwszego fragmentu kodu):

$ wp_customize-> remove_section ('kolory');

Dodanie sekcji, kontroli lub ustawienia jest nieco inne, ponieważ wymaga kilku dodatkowych parametrów. Nie omówię ich wszystkich tutaj z dwóch powodów:

  1. To nie jest tak naprawdę cel tej serii, stworzymy szablon kotła Theme Customizer, który możesz po prostu wrzucić do swojego motywu
  2. Alex Mansfield już to opisał w swoim 6000-słowowym potworze Samouczek dostosowywania motywu że każdy programista motywów WordPress musi przeczytać, a następnie tweetować (poważnie, jeśli jeszcze tego nie zrobiłeś, przeczytaj go teraz).

Ale przyjrzyjmy się, jak możesz dodać własne ustawienie za pomocą kontrolki w nowej sekcji dostosowywania motywu, a także niektóre argumenty. Ponieważ praca z prawdziwymi przykładami jest znacznie łatwiejsza, oto, o co nam chodzi:

  • Nowa sekcja z etykietą „Układ”
  • Nowe ustawienie przechowujące układ motywu
  • Nowe sterowanie radiowe z dwiema opcjami – pasek boczny po lewej stronie i pasek boczny po prawej stronie

Pierwszą rzeczą, którą należy dodać do Dostosowywania motywów, jest sekcja „Układ”:

$ wp_customize-> add_section (
// ID
„sekcja_sekcji”,
// Tablica argumentów
szyk(
„title” => __ („Layout”, „my_theme”),
„Capability” => „edit_theme_options”,
„description” => __ („Pozwala edytować układ motywu.”, „my_theme”)
)
);

Nie próbuj jeszcze tego widzieć w narzędziu dostosowywania, sekcja nie będzie wyświetlana, dopóki nie zostanie do niej dodane ustawienie i kontrolka. Dodajmy oba:

$ wp_customize-> add_setting (
// ID
„my_theme_settings [layout_setting]”,
// Tablica argumentów
szyk(
„default” => „prawy pasek boczny”,
„typ” => „opcja”
)
);
$ wp_customize-> add_control (
// ID
„layout_control”,
// Tablica argumentów
szyk(
„typ” => „radio”,
„label” => __ („Układ motywu”, „my_theme”),
„sekcja” => „sekcja_sekcji”,
„wybory” => tablica (
„left-sidebar” => __ („Left sidebar”, „my_theme”),
„right-sidebar” => __ („Right sidebar”, „my_theme”)
),
// Ten ostatni musi pasować do ustawienia identyfikatora z góry
„ustawienia” => „my_theme_settings [układ_settingu]”
)
);

Zakładając, że czytasz samouczek Alexa i / lub strony Kodeksu, w tablicy argumentów add_setting jest tylko jeden parametr – „typ” – na którym chciałbym się skupić. Masz tutaj dwie możliwości: „opcję” i „motyw_mod” i możesz je odzyskać za pomocą get_option i get_theme_mod, odpowiednio. Zawsze używam „opcji” po prostu dlatego, że pozwala ona na serializację wartości ustawień motywu poprzez nadanie im takich identyfikatorów jak my_theme_settings [ustawienie_1], my_theme_settings [setting_2] itp. W ten sposób wszystkie wartości będą przechowywane jako jedna pozycja bazy danych w tabeli wp_options.

I wreszcie, po dodaniu tych dwóch fragmentów kodu, aby działały, połączyłeś się customize_register hak akcji (pierwszy fragment kodu w tym poście), Theme Customizer został dostosowany:

Dodano nową sekcję do Theme Customizer

Dodano nową sekcję do Theme Customizer

Używanie wartości ustawień dostosowywania motywu w motywie

Po umożliwieniu użytkownikom zapisania tego ustawienia możesz przejąć jego wartość i podłączyć się klasa_ciała filtruj hak i dodaj go do tablicy istniejących klas body:

add_filter ('body_class', 'my_theme_body_classes');
funkcja my_theme_body_classes ($ classes) {

/ *
* Ponieważ użyliśmy „opcji” w tablicy argumentów add_setting
* wartość odzyskujemy za pomocą funkcji get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ class [] = $ my_theme_settings ['layout_setting'];

zwracać $ klas;

}

Spowoduje to dodanie albo lewego paska bocznego, albo prawego paska bocznego do tablicy klas treści w twoim motywie. Korzystając z tych dwóch klas w pliku style.css kompozycji, możesz utworzyć dwa różne układy. Na przykład:

/ * Pasek boczny po prawej to domyślny układ * /
#zadowolony {
float: left;
szerokość: 60%;
}
#Pasek boczny {
float: prawo;
szerokość: 30%;
}

/ * Używanie klasy .left-sidebar w celu zastąpienia domyślnego układu * /
.lewy pasek boczny #content {
float: prawo;
}
.lewy pasek boczny # boczny pasek {
float: left;
}

Co najlepsze, dzięki WordPress Theme Customizer użytkownicy mogą przeglądać oba układy przed zapisaniem czegokolwiek. Weź to, strony ustawień motywu!

Podsumowanie i dalsze czytanie

Wersja tego posta TL; DR wyglądałaby mniej więcej tak: Możesz uzyskać $ wp_customize obiekt, a następnie albo coś dodać (sekcję, ustawienie lub kontrolę) lub usunąć z niego. Cała reszta sprowadza się do parametrów ustawień.

W trzeciej części ta seria staje się interesująca, ponieważ zaczniemy automatyzować cały proces i pracować nad szablonem dostosowywania motywu, który możesz upuścić w swoim motywie i zacząć od razu. Bądźcie czujni!

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