Jak zachować niestandardowy kod CSS podczas aktualizacji motywu WordPress?
Opublikowany: 2022-05-05Motywy określają układ i wygląd witryn WordPress. Niezależnie od wybranego motywu może być konieczne dostosowanie go do własnych potrzeb.
Jednym ze sposobów dostosowania motywu jest użycie kaskadowych arkuszy stylów (CSS). Ten popularny język arkuszy stylów pozwoli Ci zmienić prawie każdy element Twojego motywu. Możesz dodać niestandardowy kod CSS do swojego motywu, aby określić kolory tła, zmienić rozmiary czcionek, utworzyć odstępy między treścią, zmienić położenie menu i nie tylko. Jednak niestandardowy CSS może zostać usunięty przy następnej aktualizacji motywu.
Dlaczego aktualizacje motywów łamią niestandardowe CSS
Wszystkie motywy mają plik style.css. Dostępny w folderze motywu, zawiera CSS. Po zaktualizowaniu motywu pobierzesz nową, inną wersję, którą zastąpisz istniejącą wersję.
Aktualizacja motywu spowoduje usunięcie istniejącego pliku style.css i zastąpienie go nowym, nowym plikiem style.css. Nowy plik style.css nie będzie zawierał żadnego niestandardowego kodu CSS, który mogłeś dodać wcześniej. Zawsze możesz dodać usunięty niestandardowy kod CSS, ale robienie tego po każdej aktualizacji motywu może być nużące.
Dodaj do konfiguratora
Możesz zachować niestandardowy kod CSS podczas aktualizowania motywu, dodając go do dostosowania. Konfigurator to narzędzie do dostosowywania motywów na pulpicie WordPress. Zawiera pole „Dodatkowy CSS”. Zamiast dodawać niestandardowy kod CSS bezpośrednio do pliku style.css motywu, możesz dodać go do tego pola.
Pole „Dodatkowy CSS” zostało wprowadzone w wersji 4.7 WordPressa, aby zapobiec usuwaniu niestandardowego CSS podczas aktualizacji motywu. Nie ma to wpływu na plik style.css ani na żadne inne pliki w folderze motywu. Gdy dodasz niestandardowy kod CSS do dostosowania za pomocą tego pola, będzie on przechowywany w bazie danych Twojej witryny. Następnie możesz zaktualizować swój motyw, zachowując niestandardowy CSS.
Aby uzyskać dostęp do dostosowania, kliknij „Wygląd” na pulpicie WordPress i wybierz „Dostosuj”. Karta „Dodatkowy CSS” znajduje się u dołu. Kliknięcie tej karty spowoduje wyświetlenie pola, w którym możesz wprowadzić niestandardowy kod CSS. Aktualizacja motywu zastąpi tylko pliki w folderze motywu. Nie zastąpi ani w żaden inny sposób nie wpłynie na bazę danych Twojej witryny, więc niestandardowy kod CSS zostanie zachowany.
Dodanie niestandardowego kodu CSS do dostosowania umożliwia jego podgląd. Konfigurator ma wbudowaną funkcję podglądu dla wszystkich zmian. Niezależnie od tego, czy ustawiasz nowe widżety, czy dodajesz niestandardowy kod CSS, dostosowanie pokaże, jak będzie wyglądać Twoja witryna. Następnie możesz kontynuować dostosowywanie, klikając „Opublikuj”. Jeśli Twoja witryna nie wygląda prawidłowo, możesz zmienić opcje dostosowywania przed jej udostępnieniem. Niezależnie od tego moduł dostosowania wyświetli podgląd Twojej witryny z niestandardowym kodem CSS.
Utwórz motyw potomny
Innym rozwiązaniem jest stworzenie motywu potomnego. Motywy potomne to zasadniczo kopie innych motywów, które można dostosowywać bez obawy o utratę zmian. Nie są to kompletne kopie. Większość motywów potomnych składa się raczej z kilku podstawowych plików, w tym pliku style.css i pliku functions.php.
Motywy potomne są zaprojektowane tak, aby dziedziczyły właściwości motywu nadrzędnego. Możesz użyć swojego motywu jako motywu nadrzędnego. Motyw potomny będzie miał swój własny folder, który będzie zawierał własny plik style.css i plik functions.php. Motyw potomny nie będzie jednak zawierał pliku index.php, pliku page.php, pojedynczego pliku.php ani innych standardowych plików motywu. Wykorzysta motyw nadrzędny dla tych właściwości.
Ponieważ motywy podrzędne mają swój własny plik style.css, obsługują niestandardowe CSS. Co ważniejsze, motywy potomne zachowują wszystkie swoje niestandardowe kody CSS po zaktualizowaniu motywów nadrzędnych. Aktualizacja motywu nadrzędnego nie wpłynie na plik style.css motywu potomnego. Aby uzyskać instrukcje dotyczące tworzenia motywu podrzędnego, odwiedź stronę developer.wordpress.org/themes/advanced-topics/child-theme. Alternatywnie, niektóre motywy premium mają motyw podrzędny.
W przypadku zaledwie kilku wierszy niestandardowego kodu CSS możesz dodać go do dostosowania. W przypadku większej ilości niestandardowego CSS tworzenie motywu potomnego jest prawdopodobnie warte wysiłku. Motyw potomny zapewnia osobny plik style.css, który możesz dostosować.
Możesz nawet pracować w trybie offline nad plikiem style.css motywu podrzędnego, a ponieważ jest to osobny plik, będziesz mieć dużo miejsca na niestandardowy kod CSS. Dodanie niestandardowego kodu CSS do dostosowywania ograniczy Cię do małego pola, które jest dostępne tylko online. Konfigurator oferuje zaletę trybu podglądu, podczas gdy motyw podrzędny oferuje zaletę oddzielnego pliku style.css.
Użyj niestandardowej wtyczki CSS
Możesz użyć niestandardowej wtyczki CSS. Na przykład wtyczka Simple Custom CSS robi dokładnie to, na co wygląda: umożliwia łatwe dodawanie niestandardowego CSS do motywu. Niestandardowy kod CSS dodany do wtyczki zastąpi własny kod CSS motywu.
Po aktywacji wtyczki Simple Custom CSS powinna pojawić się nowa karta „Niestandardowy CSS” w sekcji „Wygląd” na pulpicie nawigacyjnym WordPress. Tutaj możesz dodać niestandardowy CSS. Po zaktualizowaniu motywu niestandardowy CSS zostanie zachowany. Aktualizacja motywu zastąpi plik style.css motywu, ale wtyczka zastąpi nowy plik style.css niestandardowym kodem CSS.
Dostępna jest również wtyczka Simple Custom CSS i JS, która obsługuje zarówno niestandardowy CSS, jak i niestandardowy JavaScript. Możesz go użyć do tworzenia niestandardowego kodu CSS, który zastępuje własny kod CSS motywu. Jeśli nie chcesz zadzierać z tworzeniem motywu potomnego, możesz użyć niestandardowej wtyczki CSS. Pobieranie niestandardowej wtyczki CSS to łatwy sposób na zachowanie niestandardowego CSS podczas aktualizacji motywów.
Wniosek
To frustrujące, gdy tracisz niestandardowy kod CSS po aktualizacji motywu. Nawet jeśli zapisałeś niestandardowy CSS lokalnie na swoim komputerze, będziesz musiał wrócić i dodać go. Możesz zachować niestandardowy kod CSS swojego motywu, korzystając z dostosowywania na pulpicie nawigacyjnym WordPress, tworząc motyw podrzędny lub korzystając z niestandardowej wtyczki CSS.
