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:

Wczytywanie gist 2d32bb4fff967c97f016efe2a603fba4

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:

Ładowanie gist b2aae06d58cf20f1adc2ed6418f170d0

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:

Ładowanie gist 2fa361747ca35262141e495b54307ddb

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:

Ładowanie gist 8dbacbc201c7b3036408092cb35334dd

Przyjrzyjmy się temu szczegółowo:

  • Po pierwsze, tworzy wpmu_nav_color ustawienie 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:

The WordPress customiser with a new section and control added

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:

Ładowanie gist 02077d97defaba79c06b8c2bba57cee6

Musisz dodać filtr wewnątrz znacznika otwierającego dla nav element, jak ten:

Ładowanie gist 962c52769cf91c6a8fe5cae6828f4fa4

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:

Ładowanie gist 98252a9db701ef2d4023815f7a41016c

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):

Ładowanie gist a235deeef0bff091207ce049b2f2759b

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:

website with blue nav menu

Ale teraz, jeśli chcę, mogę wybrać inny kolor:

customizer with red menu

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.

Czy używasz Personalizatora w swoich motywach? Jak można użyć tej techniki? Daj nam znać w komentarzach!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…