Ten samouczek pokaże Ci, jak dodać ustawienia motywu, np. kolory motywu, w WordPress Customizer i ponownie skompilować arkusz stylów motywu z wybranymi zmiennymi. Posiadając stylizację motywu w SCSS przy użyciu biblioteki, możesz łatwo umożliwić użytkownikom motywu dostosowywanie dowolnych zmiennych w arkuszu stylów motywu, bez konieczności samodzielnej edycji plików SCSS.
Każdy dobry motyw powinien umożliwiać dużą personalizację. Przynajmniej powinno być możliwe ustawienie kolorów głównego motywu. Zamiast pisać dużo brzydkich CSS, aby wszędzie zastępować kolory motywu, możesz zamiast tego ponownie skompilować pełny arkusz stylów bezpośrednio z Customizer. Ten samouczek nauczy Cię, jak!
Co zrobimy – i czego potrzebujemy
Zakładam, że twój motyw ma już trochę stylizacji w plikach SCSS, które już wkompilowałeś do głównego motywu style.css. Używając SCSS, najprawdopodobniej definiujesz powtarzające się rzeczy, takie jak kolory, rozmiary lub punkty przerwania, jako zmienne SCSS i używasz tych zmiennych w swojej stylizacji.
Dla zmiennych w pliku SCSS można utworzyć dowolne i dowolną liczbę ustawień Customizer. Idealnie do tego nadają się selektory kolorów, wprowadzanie liczb i tekstu. Gdy użytkownik zmieni ustawienia w WordPress Customizer, zobaczy podgląd motywu ze zmienionymi zmiennymi. A kiedy klikną „Zapisz", ostateczny CSS zostanie skompilowany do głównego pliku CSS arkusza stylów przy użyciu wybranych wartości.
Jako przykład dla tego samouczka przyjmę, że główny plik SCSS arkusza stylów motywu robi @importplik variables.scss. Tam zdefiniowaliśmy trzy zmienne, które chcemy dostosować w Customizer: Dwa kolory i jeden rozmiar tekstu w px.
$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;Należy pamiętać, że aby umożliwić SCSS ponowne zdefiniowanie zmiennych, należy je zdefiniować za pomocą !default. To jest zasada w SCSS. Aby ten samouczek działał; wszelkie zmienne, które chcesz dostosować, muszą być zdefiniowane jako domyślne w plikach SCSS.
Od Ciebie zależy, kiedy (lub czy) chcesz nadpisać plik CSS. W tym samouczku założono, że gdy użytkownik kliknie „Zapisz” w programie Customizer, nastąpi ponowna kompilacja i zapis do CSS motywu. Jednak gdy podgląd Customizera jest aktywny, a użytkownik zmienia ustawienia (przed kliknięciem Zapisz), po prostu wypisujemy skompilowany CSS w nagłówku do podglądu witryny. Nie chcemy od razu nadpisywać pliku CSS na wypadek, gdyby użytkownik chciał anulować wprowadzone przez siebie zmiany.
Pamiętać…
Ten samouczek nadpisze plik motywu za style.csskażdym razem, gdy ustawienia Customizer zostaną zapisane.
Zakładam, że już skompilowałeś swoje pliki SCSS programem kompilującym (np. Koala lub wiersz poleceń). Posiadanie tego kodu w motywie spowoduje nadpisanie pliku CSS, ale nie zmieni źródłowych plików SCSS. Oznacza to, że za każdym razem, gdy dokonasz zmian w programie Customizer, a następnie wrócisz do oryginalnych plików SCSS i ponownie je skompilujesz, ustawienia dostosowania zostaną utracone!
Istnieje kilka sposobów na obejście tego i zależy to od twojego projektu i sposobu pracy. W większości przypadków nie stanowiłoby to problemu. Zwykle należy o tym pamiętać podczas opracowywania motywu. Jeśli przekazujesz swój sfinalizowany motyw komuś innemu, zwykle i tak nie dotyka on twoich plików SCSS.
Pomijając to, zacznijmy przyjrzeć się, jak to robimy:
- Zapoznanie się z biblioteką SCSSPHP i włączenie jej do naszego motywu
- Utwórz ustawienia Customizer dla każdej zmiennej SCSS, którą chcemy dostosować
- Upewnienie się, że Customizer wyświetla podgląd zmian w podróży
- Podczas zapisywania ustawień Customizer ponownie kompilujemy i nadpisujemy plik CSS motywu.
1 Biblioteka SCSSPHP
Do kompilacji plików SCSS użyjemy biblioteki SCSSPHP firmy leafo (licencja MIT). Pamiętaj, że ten samouczek dotyczy biblioteki SCSS. Autor biblioteki ma podobną bibliotekę LESS PHP, jeśli wolisz używać LESS, ale pamiętaj, że poniższy samouczek dotyczy biblioteki SCSS.
Biblioteka SCSSPHP jest naprawdę prosta w użyciu! Oto uproszczony przegląd tego, jak będziemy używać biblioteki w PHP naszego motywu:
- Zawieramy bibliotekę
- Utwórz nową instancję klasy kompilatora z biblioteki
- Załaduj zawartość źródłowego pliku SCSS i przekaż go do obiektu kompilatora
- Zdefiniuj tablicę asocjacyjną; Nazwy zmiennych SCSS (w tym
$) jako klucze i ich wartości. Każdy element w tej tablicy zastąpi zmienne o tej samej nazwie w dostarczonym pliku SCSS. - Prosimy obiekt kompilatora, aby skompilował i odebrał skompilowany CSS w postaci ciągu znaków. Następnie możemy albo wyprowadzić ten CSS w środku
head, albo zapisać to wstyle.csspliku motywu
Jakie zmienne SCSS możemy skompilować?
Prosta odpowiedź brzmi: Dowolny rodzaj prawidłowej zmiennej SCSS!
Biblioteka SCSSPHP może skompilować dowolny rodzaj prawidłowych zmiennych SCSS, ale pamiętaj, że musisz się upewnić, że zostały poprawnie sformatowane w programie Customizer. Na przykład kolory muszą być poprzedzone prefiksem #dla kolorów szesnastkowych lub być sformatowane jako rgb()lub rgba()definicje. Do zmiennej rozmiaru zwykle trzeba dodać „ px“, „ em“, „ %” i tak dalej.
Jeśli planujesz stworzyć zaawansowany system do kompilacji zmiennych SCSS za pomocą motywu Customizer, upewnij się, że masz dobry system do prawidłowego formatowania każdego typu zmiennej!
Zróbmy pierwszy krok z drogi; pobranie i włączenie biblioteki do naszego motywu:
Pobieranie i dołączanie biblioteki SCSSPHP do motywu
Pierwszym krokiem jest pobranie biblioteki SCSSPHP. Na połączonej stronie kliknij przycisk „Pobierz” na samej górze. Jeśli wolisz korzystać z Composera, na stronie znajdziesz poradnik na ten temat.
Wypakuj zip do podfolderu gdzieś w swoim motywie. Jako przykład umieszczam go w theme/inc/scssphp/folderze.
Otwórz plik PHP, do którego chcesz dodać kod do kompilacji. Może znajdować się bezpośrednio w motywie functions.phplub w pliku PHP dołączonym przez functions.php. Dla uproszczenia piszę wszystko w środku functions.php.
Zanim będziemy mogli korzystać z biblioteki, musimy ją dołączyć; jak tak:
require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');Dostosuj odpowiednio ścieżkę do swoich plików. Musimy dołączyć scss.inc.phpplik znaleziony w folderze głównym biblioteki. Teraz po tej linii możemy skorzystać z klas biblioteki!
2 Tworzenie ustawień Customizer dla zmiennych SCSS
Utwórzmy ustawienia WordPress Customizer dla naszych zmiennych. Na potrzeby samouczka dodamy ustawienia dla wspomnianych powyżej zmiennych SCSS: dwa selektory kolorów i wejście liczbowe.
Nie będę wdawał się w szczegóły wyjaśniające, jak dodać ustawienia Customizer – jest na to mnóstwo samouczków. W poniższym przykładzie kodu tworzę nową sekcję i umieszczam w niej trzy ustawienia:
Ten kod łączy się customize_registeri dodaje sekcję o nazwie „Zmienne tematyczne”. Następnie dodaje selektor kolorów ‘ theme-main‘, kolejny selektor kolorów ‘ theme-secondary‘ i wprowadza liczbę ‘ theme-text-size‘. To jest cała domyślna funkcjonalność WordPressa. Dodaję również ustaw domyślne ustawienie każdego ustawienia na te same wartości, które zostały zdefiniowane w variables.scsspliku. Ma to na celu zapewnienie, że ustawienia Customizer zostaną zainicjowane z poprawnymi kolorami.
Wygląda świetnie! Ale w tej chwili nic się nie dzieje, gdy dostosowujesz te zmienne. Przejdźmy do kroku 3; obsługa podglądu w Customizerze.
3 Kompiluj CSS w podróży w podglądzie Customizer
Ten krok obsługuje aktualizację podglądu Customizer, gdy użytkownik zmienia ustawienia i nie zapisuje do żadnego z naszych plików. Zamiast tego wypiszemy skompilowany CSS w <head>podglądzie wewnątrz <style>tagu. W ten sposób zapewniamy, że wbudowany CSS nadpisuje wszystkie style z oryginalnego pliku CSS.
Aby sprawdzić, czy aktualnie korzystamy z podglądu Customizer, używamy funkcji [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). Kiedy to powróci true, tworzymy funkcję podpiętą do wp_head. Wewnątrz funkcji inicjujemy i konfigurujemy bibliotekę SCSSPHP, pobieramy aktualne wartości ustawień, kompilujemy CSS i wypisujemy go w <style>tagu.
W linii #7definiujemy ścieżkę do źródłowego pliku SCSS i ładujemy jego zawartość do zmiennej at #8. A w linii #9i #10ustawiliśmy ścieżkę importu dla biblioteki, aby zapewnić @importprawidłowe działanie wszystkich plików w naszych plikach SCSS. Więcej informacji na ten temat można znaleźć w witrynie dokumentacji biblioteki pod nagłówkiem „Ścieżki importu”. Zasadniczo biblioteka SCSSPHP musi znać względną ścieżkę folderu SCSS, aby wszystkie @importścieżki były poprawne.
W linii #12-16tworzymy tablicę dla kompilatora; tablica asocjacyjna z nazwami zmiennych jako kluczami. Dla wartości, których używamy, [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)()aby uzyskać wartości z Customizer. Funkcja get_theme_mod()pozwala zdefiniować jako drugi parametr domyślny, jeśli wartość nie została zapisana. To oszczędza nam awarii kompilatora z wartościami takimi jak null. Zapewniamy więc te same wartości domyślne, co w naszym pliku zmiennych SCSS i kiedy zarejestrowaliśmy ustawienia Customizer.
Zwróć także uwagę, że kod w wierszu #15dołącza „ px“, zapewniając, że rzeczywista wartość zmiennej jest prawidłowa. W przeciwnym razie skompilowałby się jako „ $text-size: 12;“, gdy potrzebujemy „ $text-size: 12px;“. Dostarczamy tablicę zmiennych do kompilatora w wierszu #17, mówiąc mu, aby skompilował się przy użyciu tych zmiennych.
Następnie w wierszu #19-22wywołujemy compile()funkcję, która powinna zwrócić skompilowany CSS jako ciąg znaków. Wyprowadzamy <style>tag z ciągiem CSS w środku. Ponieważ jesteśmy uzależnieni wp_headod, Customizer wyrenderuje podgląd ze zmienionym kodem CSS za każdym razem, gdy wprowadzana jest zmiana.
4 Zapisywanie skompilowanego CSS w arkuszu stylów motywu
Kod do kompilacji CSS jest bardzo podobny do poprzedniego kroku. Jedyna różnica polega na tym, że teraz zapisujemy CSS do pliku zamiast go wyprowadzać. Powinieneś naprawdę rozważyć umieszczenie tego w funkcji, aby nie powtarzać kodu, ale dla jasności postanowiłem je rozdzielić.
Zaczepiamy się [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/), które wyzwalacze, gdy ktoś kliknie Zapisz w WordPress Customizer. W tym momencie pobieramy źródłowy SCSS, definiujemy wartości zmiennych i kompilujemy go do CSS. Z ciągiem CSS używamy prostej funkcji PHP, aby zapisać go w pliku CSS motywu.
Jedyną różnicą w stosunku do poprzedniej jest linia, w #8której definiujemy plik docelowy do zapisu, oraz linia #19, w której zapisujemy do pliku.
Wniosek
Mamy teraz ustawienia Customizer, które kontrolują zmienne w pliku SCSS motywu i nadpisują główny arkusz stylów motywu przy użyciu tych zmiennych. Nie ma ograniczeń co do liczby lub rodzaju ustawień, które użytkownicy motywu mają dostosowywać! Zainwestuj trochę czasu w skonfigurowanie odpowiedniego systemu do obsługi formatowania różnych typów zmiennych (np. przedrostków lub przyrostków) i odpowiednią strukturę ustawień Customizer. Użytkownicy motywu docenią elastyczność i łatwość dostosowania motywu!
Możesz także wymyślić różne sposoby obsługi zapisu pliku końcowego CSS. Jeśli nie chcesz nadpisywać głównego arkusza stylów, być może chcesz zapisać go w innym pliku. Możesz również przyjrzeć się używaniu warunkowych if-else w SCSS.
Ten samouczek został napisany, aby dać ci odskocznię do tego, jak możesz dostosować swój motyw WordPress z Customizer. Daj mi znać, czy było to dla Ciebie przydatne – lub jeśli potrzebujesz bardziej zaawansowanego samouczka, który zapewni, że arkusz stylów motywu nie zostanie nadpisany!