jeśli stworzysz własny motyw WordPress, motyw potomny od rodzica lub edytujesz motyw, napotkasz potrzebę dodania własnego arkusza stylów CSS. Najprawdopodobniej będziesz również chciał nadpisać niektóre style z domyślnego arkusza stylów motywu.
istnieje kilka sposobów dodawania własnych stylów i/lub nadpisywania domyślnych stylów. Więc jaki jest najlepszy sposób, aby to zrobić? Programiści zgodzą się, że jest to tworzenie własnych niestandardowych plików CSS i osadzanie ich w motywie WordPress, nad którym pracujesz.
sposoby dodawania niestandardowego kodu CSS do motywów WordPress
nie będziemy mówić o deprecjonowanych sposobach dodawania stylów CSS do elementów HTML lub dodawania bloków <style>. Obecnie metody te są porzucane przez programistów. Ponadto nie są przyjazne dla SEO, co jest ważną kwestią, o którą należy dbać w dzisiejszych czasach.
nie będziemy nawet sugerować edycji oryginalnego arkusza stylów CSS motywu (Zwykle styl.css), lub dodanie do niego własnego kodu. Plik ten jest często bardzo duży i trudny do zarządzania. Każdy mały błąd pisania lub błąd składni może spowodować awarię całej witryny.
w tym artykule pokażemy, jak utworzyć niestandardowy plik CSS i osadzić go w motywie WordPress.
istnieje kilka metod dodawania niestandardowego kodu CSS do motywów WordPress. Jaka jest najlepsza praktyka?
jak dodać niestandardowe pliki arkuszy stylów do motywów WordPress za pomocą wp_register_style() i wp_enqueue_style()
pierwszym krokiem osadzania niestandardowych plików CSS w WordPress jest dodanie plików do motywu. Za pomocą klienta FTP lub menedżera plików cPanels zlokalizuj folder motywów i otwórz go. Teraz możesz utworzyć nowy plik i nazwę na przykład niestandardową.css lub Prześlij plik CSS ze swojego komputera. Jeśli chcesz dodać więcej niż jeden plik CSS do motywu WP, powtórz ten krok.
jeśli wykonałeś ten krok poprawnie, powinieneś zobaczyć swój niestandardowy plik CSS lub pliki w edytorze motywów instalacyjnych WordPress.
łączenie niestandardowych plików CSS sekcja head witryny
teraz, gdy dodałeś niestandardowe pliki CSS do folderu motywu WP, nadszedł czas, aby połączyć pliki z sekcją head <Twojej witryny. W ten sposób witryna może zastosować niestandardowe style do swoich elementów.
możesz po prostu dodać <link> element do sekcji <head>, najlepiej tuż przed zakończeniem </head> tag. W ten sposób własne style CSS ładują się ostatnio i nadpisują domyślne style. Sekcja < head> Twojej witryny zwykle znajduje się w nagłówku folderu motywowego.plik php i jest dostępny poprzez edytor motywów WordPress.
oto przykład elementu gdy witryna znajduje się w folderze „test-site” w folderze głównym serwera, folder motywu nazywa się „test-theme”, a plik CSS nazywa się „custom.css”:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">to proste rozwiązanie będzie działać dobrze, ale nie jest to najlepsza praktyka osadzania plików CSS w witrynach WordPress.
osadzanie pliku CSS w WordPress za pomocą funkcji wp_register_style() i wp_enqueue_style ()
Zalecana Praktyka osadzania niestandardowych plików CSS w witrynie WordPress polega na zarejestrowaniu arkusza stylów w funkcjach motywu WP.plik php wykorzystujący funkcje wp_register_style() i wp_enqueue_style (). W ten sposób pliki CSS zostaną załadowane w momencie uruchomienia akcji wp_head. Twój arkusz stylów zostanie umieszczony zaraz po domyślnym arkuszu stylów motywu. i pozwala na nadpisywanie domyślnych stylów.
pierwszą rzeczą do zrobienia jest zlokalizowanie funkcji motywu.plik php. Znajduje się w edytorze motywów WordPress. Możesz to zrobić również za pomocą Menedżera plików FTP lub cPanels. Jeśli pracujesz nad motywem podrzędnym, Edytuj plik funkcji motywów podrzędnych, a nie plik motywu nadrzędnego. W ten sposób unikniesz utraty niestandardowego kodu podczas aktualizacji motywu nadrzędnego. Przewiń w dół funkcji.php i dodać następujący fragment kodu:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Dostosuj fragment: w powyższym przykładzie nazwaliśmy funkcję rejestracji ” additional_stylesheets „i zarejestrowaliśmy plik CSS arkusza stylów o nazwie” custom.css”, wcześniej przesłany do naszego folderu tematycznego. Możesz nazwać funkcję, jak chcesz i zastąpić nazwę funkcji w górnym i dolnym wierszu wycinka. Jeśli plik arkusza stylów ma inną nazwę niż Niestandardowy.css zastąp słowo custom w wycinku własną nazwą pliku.
jeśli wszystko zrobiłeś poprawnie, możesz zacząć pisać własny kod CSS do arkusza stylów. Podczas zapisywania zmian i przeładowywania strony zauważysz, że Twoje style wpływają na witrynę. Nie zapomnij wyczyścić pamięci podręcznej przeglądarki podczas odświeżania strony.
osadzanie wielu niestandardowych plików CSS arkusza stylów w funkcjach.php za pomocą wp_register_style () i wp_enqueue_style ()
przed dodaniem wielu plików CSS do motywu WP, weź pod uwagę, że powoduje to więcej żądań serwera podczas ładowania witryny, co wpływa na szybkość ładowania witryny. Staraj się używać jak najmniej arkuszy stylów.
teraz Załóżmy, że masz osobny plik arkusza stylów dla stylów pulpitu o nazwie custom.css i drugi plik arkusza stylów o nazwie responsive.css dla urządzeń mobilnych. Osadzanie obu arkuszy stylów w funkcjach.plik php jest prosty i wymaga niewielkiej modyfikacji fragmentu pojedynczego pliku pokazanego powyżej:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );podobnie jak dostosowywanie pojedynczego fragmentu pliku, Zmień nazwy plików odpowiednio do swojej sytuacji.
więcej o funkcjach wp_register_style() i wp_enqueue_style ()
aby dowiedzieć się więcej o funkcjach wp_register_style() i wp_enqueue_style() aby zarejestrować arkusze stylów, odwiedź dedykowaną stronę WP Codex.