Niestandardowy CSS: czy powinieneś używać motywu potomnego WordPress czy konfiguratora?

WordPress to dynamicznie elastyczne narzędzie, z którego mogą korzystać zarówno doświadczeni twórcy stron internetowych, jak i początkujący właściciele witryn. Jeśli nie możesz znaleźć sposobu na stylizowanie czegoś zgodnie z własnymi upodobaniami, możesz dodać niestandardowe style, zwane także CSS (kaskadowe arkusze stylów), aby zmodyfikować wygląd i działanie witryny, od układów i pozycjonowania po kolory, czcionki i nie tylko.

Historycznie użytkownicy WordPressa używali motywów potomnych, aby dostosować wygląd i działanie witryny WordPress. Motyw potomny dziedziczy wszystkie cechy motywu nadrzędnego, ale robi nieco więcej. Wraz z dodaniem narzędzia WordPress Customizer, łatwiej było dodać trochę CSS, aby wykonać niektóre z tych samych rzeczy, które tradycyjnie robiliśmy z motywami podrzędnymi.

Kiedy używasz motywu podrzędnego, a nie tylko dodajesz CSS do dostosowania? Czy są przypadki, w których wtyczka fragmentu kodu ma większy sens?

W tym poście na blogu przyjrzymy się dostosowywaniu motywów za pomocą własnego kodu CSS na różne sposoby i dyskutujemy, kiedy warto użyć jednej metody zamiast innej. Najpierw jednak wyjaśnijmy kilka warunków. Co to jest dostosowywanie, co to jest motyw podrzędny i jakie wtyczki również wykonują te zadania?

Czym jest motyw potomny?

Motyw potomny to motyw WordPress, który dziedziczy wszystkie cechy innego motywu WordPress. Motyw główny, motyw nadrzędny, może być motywem komercyjnym, opracowanym samodzielnie lub dowolnym z darmowych motywów w katalogu motywów WordPress.org. I tak, możesz stworzyć motyw potomny Kadence. W dalszej części tego postu porozmawiamy o tym, czy możesz nie potrzebować, lub o przypadkach, w których możesz chcieć.

Aby utworzyć motyw potomny, utworzysz oddzielny katalog pod wp-content/themes/ na tym samym poziomie motywu nadrzędnego. Zazwyczaj zaczyna się od dwóch plików, style.css i functions.php, ale możesz także dodać wiele innych dostosowań do motywu potomnego, który chcesz. Mamy przewodnik, który mówi o tworzeniu motywów potomnych, jeśli tego potrzebujesz. Istnieje wiele wtyczek, które stworzą dla Ciebie motyw potomny, i możesz usunąć te wtyczki konfiguracyjne motywu potomnego po utworzeniu motywu potomnego.

Dlaczego ludzie używają motywów potomnych?

Użytkownicy WordPressa tworzą motywy potomne, gdy muszą dokonać modyfikacji motywu nadrzędnego, ale chcą łatwego procesu aktualizacji motywu nadrzędnego.

Na przykład chcesz dodać tagi Google Analytics do nagłówka witryny lub chcesz się upewnić, że wszystkie formularze, obrazy lub przyciski są stylizowane w określony sposób, a może wprowadzasz dostosowania do wiadomości e-mail WooCommerce, które muszą być zapisane w obszarze tematycznym.

Podczas tworzenia motywu potomnego wszystkie dostosowania są zapisywane i chronione przed nadpisaniem, gdy motyw nadrzędny wymaga aktualizacji. Ze względów bezpieczeństwa i funkcjonalnych zawsze ważne jest, aby motywy i wtyczki były aktualne. Nie chcesz jednak ponownie dostosowywać motywu za każdym razem, gdy motyw wymaga aktualizacji, więc dodawanie stylów do motywu podrzędnego ma sens. W ten sposób motyw nadrzędny jest aktualizowany, podczas gdy motyw podrzędny pozostaje ten sam.

Potrzebujesz motywu potomnego?

W historii WordPressa dodanie motywu potomnego było jednym z najważniejszych dostosowań nowej witryny WordPress. Bez względu na to, co robisz z WordPress, jeden motyw nigdy nie był ostateczny. Historycznie istniały dwa powody, aby stworzyć motyw potomny.

1. Aby dodać dodatkowy CSS.
2. Aby dodać dodatkowe funkcje.

Historycznie, aby uzyskać największą możliwość dostosowywania, motyw potomny był najłatwiejszym sposobem na zrobienie tego przy jednoczesnym zachowaniu integralności motywu nadrzędnego. Ale wiele się zmieniło po dodaniu WordPress Customizer.

Co to jest dostosowanie?

Gdy przeglądasz stronę WordPress lub wpisujesz jako zalogowany użytkownik z uprawnieniami do edycji lub administratora, na pasku administratora dostępna jest opcja dostosowywania WordPressa. Po kliknięciu otwiera się ramka z dwoma oknami, w której po lewej stronie znajduje się dostosowanie, a po prawej sama witryna.

W konfiguratorze masz dostęp do wszystkiego, co można dostosować do konkretnej witryny. Istnieje kilka ogólnych elementów sterujących, które dodaje rdzeń WordPress, ale wiele motywów, w tym Kadence, dodaje tutaj również pewne opcje ustawień.

Dodanie dostosowania zapewnia właścicielom witryn nowe sposoby ustawiania dowolnych elementów, w tym opcję dodawania dodatkowego kodu CSS. W przeszłości jedynym sposobem na zastosowanie dodatkowego CSS w witrynie WordPress było zrobienie tego za pomocą motywu potomnego.

Ustawienia kolorów, czcionek, a nawet układów nagłówka/stopki można wykonać za pomocą konfiguratora.

Kadence zajmuje się motywami podrzędnymi, dostosowaniami i wtyczkami

Kadence przyjął stanowisko, że powinieneś być w stanie dostosować swoją witrynę WordPress za pomocą narzędzia Customizer. Istnieje wiele różnych ustawień dostępnych w opcjach dostosowywania Kadence, a nawet możesz dodać swój kod Google Analytics za pomocą dostosowywania do swojej witryny o tematyce Kadence, korzystając z wersji Kadence Pro.

A jeśli dodasz dodatkowe funkcje do swojej witryny WordPress, zrobienie tego za pomocą wtyczki Code Snippets było najłatwiejszym sposobem na zrobienie tego dla większości użytkowników.

W ten sposób dla większości użytkowników WordPressa Kadence uprościła sposób dodawania dodatkowych stylów i funkcji do WordPressa, co znacznie ułatwia zarządzanie witryną WordPress.

Biorąc to pod uwagę, nie wszystkie witryny WordPress są takie same, nie wszyscy użytkownicy WordPress są tacy sami, a potrzeby jednej witryny i implementacji mogą się różnić od innych. Ponadto istnieje niezliczona ilość sposobów na zrobienie czegoś za pomocą WordPressa.

Oto kilka rzeczy, które należy wziąć pod uwagę podczas dodawania niestandardowego kodu do witryny WordPress.

Kiedy należy użyć dostosowania

Jeśli dodajesz tylko kilka linijek kodu CSS, dostosowanie będzie najlepszym rozwiązaniem. Możesz łatwo dodać kilka wierszy, opublikować i zobaczyć, jak CSS działa w Twojej witrynie WordPress bezpośrednio w widoku dostosowywania.

W przypadku większości właścicieli witryn moduł dostosowania to wszystko, czego potrzebują.

W przypadku użytkowników Kadence Pro w module dostosowania znajdują się miejsca na zdarzenia, w których można dodawać skrypty tagów nagłówka, stopki i treści, więc nawet jeśli korzystasz z Menedżera tagów Google, Google Analytics lub innej usługi wymagającej dodania niestandardowych skryptów, moduł dostosowania może łatwo dostosować się do twoich dostosowań.

Kiedy należy używać wtyczki Code Snippets?

Jeśli dodajesz tylko kilka linijek kodu PHP, wtyczka Code Snippets to świetny sposób na dodanie kodu. Możesz łatwo aktywować i dezaktywować kod za pomocą wtyczki, aby przetestować i upewnić się, że kod działa poprawnie.

W powyższym przykładzie część kodu została dodana do witryny przy użyciu fragmentów kodu, aby działała tylko w obszarze administracyjnym, aby LearnDash i Elementor lepiej współpracowały ze sobą podczas edycji kursu. Można to również zrobić za pomocą motywu podrzędnego, ale dla tego właściciela witryny, fragmenty kodu były łatwiejszą alternatywą.

Oczywiście dla minimalistów wtyczek, którzy chcą uruchamiać swoje witryny z jak najmniejszą liczbą wtyczek, wtyczka Code Snippets może być dużym krokiem naprzód. Równoważenie mniejszej liczby wtyczek z niezbędną funkcjonalnością to coś, co należy robić indywidualnie dla każdego przypadku.

Kiedy należy używać motywu potomnego

Jeśli dodajesz więcej niż kilka wierszy kodu CSS lub rozszerzasz funkcjonalność witryny o dodatkowy kod PHP, najlepszym rozwiązaniem może być motyw potomny. Obszar Customizer CSS jest raczej mały, więc dodanie dużej ilości CSS może być przytłaczające lub kłopotliwe w zarządzaniu. W takim przypadku motyw potomny będzie łatwiejszy. Ponadto, jeśli dodajesz niestandardowe funkcje, które są czymś więcej niż to, czym może łatwo zarządzać wtyczka Code Snippets, motyw potomny może to łatwo zrobić.

Motyw potomny pozwala dodawać wiele wierszy CSS i zarządzać nimi za pomocą systemu plików, zamiast przechowywać CSS w bazie danych i dodawać go do każdej strony. Za pomocą motywu potomnego CSS jest ładowany za pomocą pliku style.css, który może być buforowany przez przeglądarki, zapewniając nieco lepszą wydajność. Jeśli dodajesz sporo niestandardowego kodu lub funkcji niestandardowych, najlepszym sposobem jest motyw podrzędny.

Problemy z wydajnością

Podczas korzystania z dodatkowej funkcji CSS dostosowania, dodane style dodadzą Twój kod bezpośrednio w tagu <style> na nagłówku każdej strony. Oznacza to, że jeśli masz dużo CSS, zwiększysz rozmiar wszystkich swoich stron z osobna. Przeglądarka odwiedzającego witrynę będzie wielokrotnie pobierać Twoje niestandardowe style.

Z drugiej strony, podczas gdy dodanie CSS do pliku arkusza stylów oznacza, że ​​przeglądarka musi pobrać dodatkowy arkusz stylów, oznacza to również, że przeglądarka może buforować plik, dzięki czemu dodatkowe style nie muszą być pobierane ponownie dla każdej strony.

Problemy z konserwacją

Dodanie CSS do Dodatkowego CSS oznacza, że ​​musisz użyć edytora w Customizer, który jest dość wąski i niezbyt dobrze dopasowany do dużych ilości CSS. Jeśli jednak dodasz je w arkuszu stylów, możesz użyć dowolnego edytora tekstu w wygodniejszym rozmiarze. Możesz nawet użyć edytora motywów w wp-admin, aby edytować plik CSS bezpośrednio w przeglądarce. Edytor motywów można znaleźć w menu Wygląd > Edytor plików motywów . Upewnij się, że podczas edycji przełączasz się na właściwy motyw. Zdecydowanie zalecamy utworzenie kopii zapasowej witryny przed wprowadzeniem zmian w plikach motywu podrzędnego.

Edycja plików motywów

Zdecydowanie zalecamy użycie jednej z wymienionych metod zamiast edytowania plików głównego motywu nadrzędnego, niezależnie od tego, czy używasz Kadence, czy jakiegokolwiek innego motywu. Edycja plików motywu może nie tylko uszkodzić witrynę, ale utracisz te dostosowania przy następnej aktualizacji motywu.

Albo gorzej, dodając kod lub modyfikując kod w plikach motywu, będziesz musiał spróbować dowiedzieć się, jak zachować dostosowania, jednocześnie aktualizując motyw pod kątem nowych funkcji lub rozwiązać problem z zabezpieczeniami.

Wniosek

Mamy nadzieję, że to spojrzenie na motywy podrzędne pomogło w zrozumieniu, kiedy używać motywu podrzędnego, a kiedy nie, oraz nowych sposobów dostosowywania witryny pod kątem optymalnej wydajności podczas dodawania dostosowań. Jeśli wszystkie te rzeczy wydają się zbyt trudne do rozważenia, prawdopodobnie w tej chwili nie masz nic przeciwko narzędziom w Customizer.