W artykule:
WordPress Customizer jest niezwykle potężnym i użytecznym narzędziem.
Włączając go do motywów i wtyczek, zapewniasz użytkownikom większą elastyczność i upraszczasz projektowanie, układ i dostosowywanie treści.
Ma jednak swoje wady. Jednym z nich jest fakt, że każda stylizacja dodana bezpośrednio za pomocą dostosowywacza zostanie wyświetlona w Głowa sekcji strony, a nie poprzez arkusz stylów motywu. Ma to miejsce szczególnie w przypadku dodawania stylizacji za pomocą próbnika kolorów.
Dodawanie CSS w ten sposób nie jest zbyt dobrą praktyką – o wiele lepiej jest mieć wszystkie swoje stylizacje w arkuszu stylów, więc powinieneś dążyć do tego, gdzie to możliwe.
W tym poście pokażę Ci, jak możesz używać PHP w połączeniu z arkuszem stylów motywu, aby uniknąć tego problemu i upewnić się, że stylizacja kolorów dodana za pomocą dostosowywania jest przechowywana w arkuszu stylów, a nie w arkuszu stylów Głowa sekcji strony.
Czego potrzebujesz
Aby śledzić wraz z tym postem, musisz następujące:
- Instalacja rozwojowa WordPress
- Twój własny motyw, do którego możesz edytować i dodawać funkcje dostosowywania. Alternatywnie możesz utworzyć motyw potomny motywu innej firmy – ale nie edytuj go bezpośrednio.
- Edytor kodu.
Uwaga: ta metoda działa z ograniczoną paletą kolorów, ponieważ musisz skonfigurować CSS w arkuszu stylów dla każdego z nich. Jeśli chcesz dać swoim użytkownikom możliwość wyboru dowolnego koloru, musisz użyć próbnika kolorów i pogodzić się z tym, że stylizacja jest w Głowa sekcji. Przepraszam!
Konfigurowanie motywu
Pierwszą rzeczą do zrobienia jest skonfigurowanie motywu, aby dodać funkcjonalność dostosowywania.
Dodaj folder o nazwie zawiera do motywu, a w nim Utwórz pusty plik o nazwie customizer.php.
Dodaj to do pliku funkcji motywu:
Teraz możesz dodać funkcję dostosowywania do swojego motywu.
Konfigurowanie Personalizatora
Otwórz swój nowy customizer.php plik. Najpierw musisz utworzyć funkcję do przechowywania konfiguracji dostosowywania. Dodaj to:
Ta funkcja będzie zawierać cały kod do tworzenia sekcji i kontrolek w dostosowywaniu.
Dodawanie sekcji Customizer
Możesz dodać kontrolki dostosowywania do istniejącej sekcji dostosowywania, ale wolę tworzyć własne. To sprawia, że rzeczy jaśniejsze i pozwala uniknąć ryzyka sekcji, której używasz zostanie usunięty w przyszłej aktualizacji WordPress.
Wewnątrz funkcji, którą już dodałeś do swojego customizer.php plik, dodaj to:
Jeśli otworzysz moduł dostosowujący, nie wyświetli on jeszcze nic, ponieważ sekcja jest wyświetlana tylko wtedy, gdy zawiera ustawienia. Dodajmy to.
Dodawanie ustawień do Personalizatora
Aby dodać ustawienie dla schematu kolorów, musisz utworzyć ustawienie i kontrolę. Ustawienie to przechowuje zaznaczoną opcję lub tekst wejściowy, podczas gdy sterowanie jest interfejsem używanym przez moduł dostosowujący, aby umożliwić użytkownikom wprowadzanie zmian.
Nadal wewnątrz funkcji i pod kodem sekcji, dodaj to:
Przyjrzyjmy się temu szczegółowo:
- Po pierwsze, tworzy
wpmu_nav_colorustawienie do przechowywania dowolnych wejść lub selekcji. - Następnie dodaje kontrolkę o nazwie
wpmu_nav_color, które tworzy za pomocą tablicy parametrów. - Dodaje etykietę, którą zobaczy użytkownik.
- Określa, w której sekcji pojawi się kontrolka.
- Mówi WordPress, które ustawienie będzie używane do przechowywania tego, co zostało dodane za pomocą kontrolki – innymi słowy, ustawienie, które właśnie utworzyłeś.
- Definiuje go za pomocą
"radio"wpisz, co oznacza, że będą wyświetlane przyciski opcji. Inne opcje obejmują pola tekstowe, pola wyboru, pola wyboru, adresy URL i inne. Pełna lista znajduje się w Kodeksie. - Identyfikuje opcje przycisków radiowych – w moim przypadku niebieski, czerwony lub zielony.
To Twój wpmu_customize_register() funkcja zakończona. Zapisz plik i otwórz program dostosowujący. Zobaczysz teraz nową sekcję i sterowanie:
Ale jeśli wybierzesz któryś z tych przycisków opcji, nic to nie zmieni. To dlatego, że musisz dodać trochę kodu do swojego motywu. W szczególności musisz dodać hak filtra do menu nawigacyjnego w nagłówku, a także trochę CSS w arkuszu stylów.
Wywołanie Ustawienia za pomocą haka filtra
Zamiast dodawać stylizacje w Głowa sekcji strony, mamy zamiar przekazać go do odpowiedniego elementu w naszym temacie za pomocą haka filtra.
Dodawanie Haka filtra do motywu
Otwórz swój motyw nagłówek.php plik i znajdź linię dla swojego menu nawigacyjnego.
W moim temacie wygląda to tak:
Musisz dodać filtr wewnątrz znacznika otwierającego dla nav element, jak ten:
Twój będzie wyglądał inaczej niż mój, ale nadal musisz dodać ten hak filtra, w którym normalnie wpisywałbyś klasę CSS.
Tworzy hak filtra z domyślną zawartością "blue". Użyjemy tego, aby dodać stylizację do tego elementu.
Wysyłanie ustawienia do haka filtra
Ale nadal musisz przekazać to ustawienie do tego filtra i robisz to w swoim customizer.php plik.
Back in your customizer.php Plik, Dodaj nową funkcję, która zostanie podłączona do nowego haka filtra:
To pobiera ustawienie z Personalizatora za pomocą get_theme_mod() a następnie zwraca to, co oznacza, że będzie wyświetlane w pliku nagłówkowym, w którym znajduje się hak filtra.
Zapisz i zamknij swój customizer.php plik.
Dodawanie stylizacji do motywu
Ostatnim etapem jest dodanie stylizacji, która odbierze klasę CSS dodaną przez hook filtra. Zostanie to zapisane w arkuszu stylów motywu, co oznacza, że nie ma stylizacji w Głowa sekcji.
Otwórz arkusz stylów motywu i dodaj coś takiego (pamiętaj, że stylizacja może się różnić w zależności od znaczników):
Dostosuj kolory w zależności od palety kolorów i preferencji. Możesz dodać więcej, jeśli chcesz, ale pamiętaj, że każdy dodany będzie musiał być skonfigurowany jako wybór dla przycisków opcji w dostosowywaniu.
Na koniec zapisz arkusz stylów, otwórz witrynę i przetestuj ją.
Domyślnie Moje menu nawigacyjne jest niebieskie:
Ale teraz, jeśli chcę, mogę wybrać inny kolor:
Używanie narzędzia dostosowującego do stylizacji nie musi oznaczać przyjęcia złych praktyk
Praca z WordPress Customizer może oznaczać konieczność dodania stylizacji do Głowa sekcji strony. Jeśli potrzebujesz dostępu do próbnika kolorów,nie ma możliwości obejścia tego.
Ale jeśli dasz użytkownikom ograniczony wybór kolorów do pracy (może kolory, które działają z Twoim motywem lub są zgodne z Twoją marką), możesz użyć haka filtra, aby wysłać to, co zostało wybrane do Twojego motywu jako klasę CSS zastosowaną w arkuszu stylów.
Możesz nawet dostosować tę technikę i wykorzystać ją do innych celów, takich jak stylizacja układu – na przykład Udostępnij przycisk radiowy, aby wybrać wyrównany do lewej lub prawej strony pasek boczny i wysłać ustawienie do klasy CSS w ten sam sposób.
Istnieją setki sposobów na uproszczenie stylizacji za pomocą narzędzia dostosowującego. Przy odrobinie kreatywności możesz poprawić wrażenia użytkowników i klientów.
Tagi:
