WordPress 4.7 został wydany z mnóstwem wspaniałych nowych funkcji (które możesz sprawdzić tutaj), w tym ulepszenia interfejsu użytkownika i interfejsu użytkownika do dostosowywania motywu.
Jeśli po raz pierwszy słyszysz o dostosowywaniu, jest to funkcja w panelu administracyjnym WordPress (przejdź do Wygląd > Dostosuj), który pozwala użytkownikom dostosować ustawienia motywu za pomocą interfejsu WYSIWYG i dostosować kolory motywu, czcionki, tekst i prawie wszystko, co chcesz zmienić.
W tym poście przeprowadzę Cię przez sposób dostosowywania można wykorzystać w motywach, aby stworzyć lepsze wrażenia użytkownika i całą nową niesamowitość, którą wprowadził WordPress 4.7.
Omówimy następujące kwestie:
- Wprowadzenie do dostosowywania motywów
- Tworzenie dostosowywania motywów
- Sekcje, Ustawienia i elementy sterujące
- Generowanie CSS
- Zapowiedzi NA ŻYWO
- Dalsze Przykłady
- Używanie częściowych i edycja skrótów
- Dodawanie suwaka zakresu
Wprowadzenie do dostosowywania motywów
Dostosowywanie motywu zostało po raz pierwszy wprowadzone w WordPress 3.4 i pozwala na podgląd na żywo zmian wprowadzonych do motywu. Możesz bawić się, ile chcesz, bez modyfikowania swojej witryny na żywo. Po wprowadzeniu zmian wystarczy kliknąć Zapisz i wszystko jest stosowane natychmiast.
WordPress Theme Customizer w akcji.
Jako programiści mamy dostęp do podstawowych funkcji, takich jak edycja tytułu witryny lub obrazu nagłówka, a także możemy tworzyć niestandardowe kontrolki dla wszystkiego, co chcemy, za pośrednictwem interfejsu API dostosowywania motywów.
Tworzenie dostosowywania motywów
Istnieją trzy obszary zainteresowania podczas kodowania dostosowywania. Musisz utworzyć kontrolki dla customizera, CSS i / lub logiki, które implementuje ustawienia w temacie i-opcjonalnie-na żywo funkcja podglądu zapewnia to lepsze wrażenia użytkownika.
Pierwsze Kroki
Zanim zaczniemy, stwórzmy środowisko, w którym będziemy mogli pracować. W tym samouczku stwórzmy zupełnie nowy, bardzo prosty motyw. W rzeczywistości, to nawet nie kwalifikuje się jako właściwy temat, będę po prostu za pomocą prostego indeks.php plik do utworzenia strony docelowej.
Możesz pobrać motyw startowy, którego używam lub śledzić go wraz z kodem na Github, aby zrobić go samodzielnie.
Jeśli odwiedzisz Dostosowywacz w panelu administracyjnym WordPress, możesz już kontrolować tytuł witryny, opis i dodatkowy CSS (ostatni jest nową funkcją w 4.7) swojej witryny. Dzieje się tak, ponieważ domyślnie moduł dostosowujący wyświetla zmiany, odświeżając całą stronę. Zrobimy to o wiele gładsze trochę później, ale na razie to wystarczy.
Układanie fundamentów
Zacznijmy od stworzenia podstaw dla naszych działań dostosowawczych. Stworzę customizOstry dyżur.php plik i upewnij się, że potrzebujesz go w funkcje.php plik.
Plik dostosowywania rozpocznie się od zahaczonej akcji, która zawiera wszystkie nasze sekcje, ustawienia i kontrolki.
Sekcje, Ustawienia i elementy sterujące
Sekcje reprezentuj nawigację w module dostosowywania. Powinieneś już zobaczyć cztery z nich: Tożsamość Witryny, Menu, Statyczna Strona Główna oraz Dodatkowe CSS. Definiując sekcję możemy utworzyć nowy wpis w nawigacji i wypełnić go kontrolkami.
Kontrole to elementy wizualne-interfejs użytkownika-które pozwalają nam manipulować ustawieniami. Mogą to być pola wejściowe, obszary tekstowe, selektory kolorów i inne typy kontrolek, które służą do tworzenia lepszych wrażeń użytkownika.
Ustawienia reprezentowanie danych, które chcemy, aby nasz temat akceptował i wykorzystywał. Tworzymy kontrolki, aby umożliwić użytkownikom łatwe manipulowanie ustawieniami.
Tworzenie sekcji
Aby dodać nowy dział użyjemy $wp_customize->add_section() metoda. Pobiera dwa argumenty: identyfikator sekcji i tablicę dodatkowych opcji, takich jak widoczny tytuł sekcji i jej pozycja na liście sekcji.
Nie zapominaj, że powyższy kod i każdy inny kod tworzący sekcje, kontrolki lub ustawienia powinien być umieszczony w cd_customizer_settings() funkcja.
Nasza sekcja jest już zarejestrowana, ale nie pojawi się, dopóki nie dodamy do niej kontroli.
Tworzenie ustawień
Ustawienia informują WordPress, że nasz motyw będzie używał wartości, która może być zmodyfikowana przez użytkownika. Są one dodawane za pomocą $wp_customize->add_setting() metoda, która przyjmuje dwa parametry: identyfikator ustawienia i tablicę opcji, które zawierają informacje takie jak wartość domyślna.
Transport faktycznie domyślnie odświeża, ale dodałem go, ponieważ będziemy go modyfikować później. Odśwież oznacza, że po modyfikacji ustawienia WordPress powinien odświeżyć widok. Bardziej zaawansowane implementacje dostosowywania pozwalają na podgląd na żywo, który modyfikuje tylko dany element, a nie całą stronę.
Tworzenie kontroli
Kontroluje Wiązanie ustawień z danymi wejściowymi użytkownika. Są one dodawane z $wp_customize->add_control() metoda. Argument-wise ta metoda jest nieco bardziej złożona niż poprzednie.
Jeśli pierwszy argument jest obiektem kontrolnym, to wymagany jest tylko jeden argument, instancja obiektu. Obiekt prawdopodobnie będzie miał własne dodatkowe argumenty.
Pierwszy argument może być również identyfikatorem, w którym to przypadku wymagany jest drugi argument opcji.
W naszym przypadku będziemy używać WP_Customize_Color_Control Klasa do tworzenia elementu selektora kolorów.
e-control.php ” > Ładowanie gist 5f48a994db42688d788b47370c4aa9c0
Pierwszym parametrem tego obiektu powinien być $wp_customize sam obiekt, drugi powinien być ID kontroli. Robię to tak samo, jak ustawienie, które kontroluje. Trzecia tablica zawiera kilka opcji, takich jak etykieta, identyfikator sekcji, w której zostanie umieszczona, oraz identyfikator ustawień, które kontroluje.
Mamy teraz kompletną parę ustawienia-kontrola, która pojawi się w naszej nowej sekcji. Jeszcze nic nie robi, ale ustawienie tam jest, a jego wartość faktycznie się zmienia.
Generowanie CSS
Aby to zadziałało, musimy zastosować wartość tego ustawienia do naszego motywu. W tym przypadku chcemy się upewnić, że ciało zawsze ma wartość koloru tła jako nasze nowe ustawienie.
Zauważ, że ten kod nie należy być umieszczone wewnątrz cd_customizer_settings() tak jak w przypadku elementów sterujących, sekcji i ustawień.
To wszystko jest dość standardowe rzeczy, jedyną rzeczą do odnotowania jest to, jak wartość jest pobierana. Na get_theme_mod() funkcja pobierze ustawienia bieżącego motywu; pierwszy parametr to nazwa ustawienia, drugi to wartość domyślna.
Funkcja może-oczywiście-być używana w kodzie motywu do modyfikowania funkcjonalności. Możemy – i wkrótce-stworzyć sterowanie i ustawienia, które mogą być używane do ukrywania / wyświetlania przycisku. Użyjemy get_theme_mod() będzie używany w indeks.php plik, aby selektywnie pokazać / ukryć przycisk.
Zapowiedzi NA ŻYWO
Mamy zgrabny system, ale byłby o wiele płynniejszy, gdyby zmiany kolorów i inne zmiany były natychmiastowe. Podgląd na żywo pozwala nam używać Javascript do selektywnej modyfikacji elementów.
Aby rozpocząć, stwórzmy customizer.js plik i upewnij się, że jest zapytany.
Zawartość tego pliku powinna być bardzo prostym zamknięciem, umieścimy w nim cały nasz kod.
Następnie upewnij się, że wartość transport opcja Ustawienia jest ustawiona na postMessage.
Na koniec wklej następujące elementy do customizer.js plik, wewnątrz zamknięcia.
Na customize() funkcja przyjmuje dwa parametry, nazwę ustawienia do odsłuchania oraz funkcję wykonującą akcję. Funkcja z kolei uruchamia inną funkcję, która wiąże wartość naszego ustawienia i pozwala nam z niej korzystać w wolnym czasie. Tutaj użyłem go do modyfikacji CSS elementu body. Powstaje kolorowa zabawa:
Podgląd na żywo podstawowych funkcji
Możliwość modyfikacji tytułu i opisu bloga już istnieje dzięki magii kodu core. Zastosujmy podgląd na żywo również do tych elementów.
Chociaż nie zdefiniowaliśmy tych opcji i kontroli, nadal mamy środki, aby je zmodyfikować. Użyjemy get_setting() metoda z klasy customizer, aby uzyskać i zmodyfikować opcje dla ustawienia.
Powyższy kod należy dodać w cd_customizer_settings() funkcja. Ostatnim krokiem jest dodanie kodu Javascript, który będzie wywoływany przy każdej zmianie wartości ustawienia.
Pod koniec tego procesu powinieneś zobaczyć tytuł i opis bloga Aktualizuj podczas pisania.
Dalsze Przykłady
Jest tak wiele, co możesz zrobić z dostosowywaniem, pomyślałem, że dobrym pomysłem będzie dołączenie kilku przykładów. Zacznijmy od niektórych kontrolek, które regulują zachowanie przycisku.
Pokazywanie / Ukrywanie Sekcji
Aby pokazać / ukryć element, który wybrałem, aby utworzyć element przycisku opcji. Będziemy używać dwóch parametrów dla add_control() co oznacza, że pierwszy jest prostym ciągiem, a nie obiektem kontrolnym. Drugi parametr będzie zawierał wszystkie szczegóły potrzebne do zbudowania interfejsu użytkownika. Oto Pełny kod, który należy umieścić w cd_customizer_settings() funkcja.
Na indeks.php Zawijam przycisk W instrukcję warunkową, która sprawdza wartość ustawienia i odpowiednio wyświetla przycisk.
Zauważ, że na razie ustawiłem metodę transportu na odśwież. Gdy przycisk jest ukryty, nie jest wczytywany na stronie, więc musimy zrobić coś więcej niż tylko pokazać/ukryć element za pomocą JavaScript. Wkrótce dowiemy się, jak to zrobić jeszcze lepiej!
Modyfikacje Tekstu
Kontynuując Nasze Modyfikacje przycisków, uczyńmy tekst edytowalnym. Mamy już sekcję przycisków, wszystko, czego potrzebujemy, to ustawienie i proste sterowanie polem tekstowym.
Aby zbudować opcję w temacie, zamienimy zakodowany tekst na get_theme_mod() funkcji i zdefiniować odpowiednią wartość domyślną.
Na koniec zajmijmy się podglądem na żywo w customizer.js plik.
Używanie częściowych i edycja skrótów
Kiedy spojrzeliśmy na opcję wyświetlania przycisków, użyliśmy odśwież, ponieważ wydawało się, że samo używanie JavaScript nie było tak naprawdę możliwe. Gdy przycisk jest ukryty, nie jest załadowany, więc nie możemy po prostu pokazać go za pomocą JavaScript, czyniąc go widocznym.
Tu pojawiają się częściowe. Pozwalają one na pisanie bardziej modułowego kodu, który nadaje się zarówno do tworzenia motywów, jak i dostosowywania. Zamiast odświeżać całą stronę po zmianie elementu, możesz odświeżyć ten pojedynczy element.
Zacznijmy od wygenerowania naszego przycisku za pomocą funkcji. Stworzyłem cd_show_main_button() i użyłem go w głównym pliku indeksu, zawijając go w kontener.
Sama funkcja jest dokładnie taka, jak nasz kod wyglądał wcześniej, ale teraz może być ponownie użyty gdzie indziej.
Ostatnim krokiem jest powiedzenie WordPressowi, aby selektywnie odświeżył element. Ustaw transport własność cd_button_display ustawienie na postMessage i dodać następujące elementy w cd_customizer_settings() funkcja.
To mówi WordPress, że chcemy selektywnie odświeżyć, gdy cd_button_display zmiany ustawień. Selektor w obrębie który chcemy odświeżyć jest podany w drugim argumencie, a funkcja generująca zawartość jest również zdefiniowana.
Jeśli teraz spróbujesz dostosowania, zobaczysz, że przycisk stanie się nieprzezroczysty, a następnie wczytasz odpowiednią zawartość, w przeciwieństwie do odświeżania całej witryny.
Dobra wiadomość jest taka, że edytuj skróty zostaną dodane automatycznie dla ciebie. W rzeczywistości, jeśli po prostu potrzebujesz skrótów do edycji, jest to droga do zrobienia.
Dodawanie suwaka zakresu
Dostosowywacz ma wiele elementów sterujących, od prostych pól tekstowych po przesyłanie obrazów. Jeśli pracujesz nad aplikacją na dużą skalę, możesz potrzebować bardziej wymyślnych wejść, takich jak suwak zakresu, a nawet coś całkowicie niestandardowego.
Moduł dostosowania umożliwia łatwe tworzenie własnych elementów interfejsu użytkownika poprzez definiowanie klas sterowania. Stwórzmy własny suwak zakresu, który umożliwia użytkownikom wybór wartości za pomocą małego mechanizmu uchwytu. Zbudujmy kontrolę:
Musimy najpierw sprawdzić, czy istnieje WP_Customize_Control klasy, ponieważ nie zawsze jest załadowany, gdy wszystkie nasze opcje są. Następnie rozszerzamy klasę o własną, deklarując $Typ nieruchomości i render_content() funkcja. Musimy wyprowadzić kontrolę HTML, dbając o użycie $this->value() gdy potrzebujemy aktualnej wartości i $this - > link()> zamiast parametru nazwa.
Stworzyłem bardzo prostą implementację suwaka z odrobiną magii jQuery, aby upewnić się, że wartość jest widoczna w polu tekstowym, a modyfikacja pola tekstowego wpłynie również na suwak.
Dodałem kilka opcji (min, max, step) do suwaka, który przypisałem do właściwości w konstruktorze.
Aby to przetestować, stworzę mały licznik, który pokazuje liczbę zdjęć obecnie na stronie. W indeks.php plik dodaję poniżej.
Teraz nadszedł czas, aby stworzyć ustawienie i kontrolę. Sterowanie użyje naszego nowo utworzonego suwaka zakresu.
Tworzenie podglądu na żywo jest teraz niemal trywialne, wszystko, co muszę zrobić, to upewnić się, że poprawny element zostanie nadpisany przez kod JavaScript.
Dostosuj Się!
Teraz powinieneś być w stanie pracować w edytorze motywów, aby tworzyć lepsze sterowanie dla swoich motywów. Niezwykle ważne jest, aby korzystanie z motywu było łatwe i intuicyjne, a dostosowywacz zapewnia doskonałą podstawę do tego.
Lista Lektur
Jeśli chcesz być na bieżąco ze wszystkim, co jest dostosowywaniem motywu, spójrz na następujące linki:
- API dostosowywania motywów
- Co nowego w WordPress 4.7
- Ulepszenia Customizer w WordPress 4.7
- Dostosowanie API control Reference
- Narzędzia do ulepszenia Customizera UX
- Dostosuj API
- WP_Customizer_Control dokumentacja
