Ten post zawiera kilka pytań, które napotkałem na temat ostatnich zmian w metodach kolejkowania arkuszy stylów poruszonych w tym wątku i tym wątku .
Problemy, które napotkałem, pojawiły się w ogólnym scenariuszu przypadku użycia, przy użyciu szeroko używanego i dobrze utrzymanego motywu nadrzędnego, który jest specjalnie motywem podrzędnym gotowym w instalacji WP 4.0. Funkcje mojego podrzędnego tematu. Php zawiera tylko wp_enqueue_stylefunkcję opisaną w Kodeksie .
Należy pamiętać, że chociaż kod wymieniony poniżej jest specyficzny dla tego motywu, wiele z nich wykorzystuje obecne konwencje kodowania stosowane przez motywy nadrzędne. Ponadto, moje obawy są najprawdopodobniej dublowane w dużej liczbie ustalonych tematów nadrzędnych, które są obecnie na wolności. Ponadto pytania, które podnoszą, mają zastosowanie na poziomie uniwersalnym, niezależnie od tego, który motyw nadrzędny jest używany.
ZAGADNIENIE 1: Dwa kolejkowanie
Zalecana konfiguracja:
Motywem nadrzędnym jest kolejkowanie stylów i skryptów za pomocą wp_enqueue_scriptshaka, a odpowiednia część jest następująca:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}Motyw mojego dziecka functions.phpkolejkuje style według ostatnich zmian w kodeksie:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}Zwróć uwagę na następujące identyfikatory używane przez przywoływany kod:
id='dm-parent-style-css'to arkusz stylów motywu nadrzędnego, dodany do kolejnej funkcji motywu podrzędnegoid='avia-style-css'to arkusz stylów motywu mojego dziecka, kolejkowany przez funkcję motywu nadrzędnegoid='dm-child-style-css'jest arkuszem stylów motywu potomnego, który jest kolejkowany przez funkcję motywu potomnego
Wyniki:
Na pierwszy rzut oka wszystko było w porządku, a <head> pokazywał następującą kolejność:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Po zainstalowaniu wtyczki kolejność kolejki zmienia się teraz w następujący sposób:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->Ostatecznie potrzebuję css mojego motywu potomnego, aby załadować się po jakichkolwiek wtyczkach, więc byłem zmuszony dodać numer priorytetowy do funkcji w moim motywie potomnym (patrz poprzednia dyskusja na temat numeru priorytetu) .
Ponieważ moja funkcja kolejkuje tylko css motywu nadrzędnego, wynik jest taki, że css motywu nadrzędnego zostaje przeniesiony do końca, pozostawiając css motywu podrzędnego w jeszcze gorszym położeniu niż wcześniej.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />Teraz jestem zmuszony uciekać się do kolejkowania mojego stylu motywu podrzędnego, aby upewnić się, że zostanie przeniesiony z powrotem na początek linii, powodując wspomniany problem podwójnego kolejkowania (nowy termin? Lol) css motywu podrzędnego.
Przestarzała konfiguracja:
Zmieniona funkcja w motywie potomnym:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Wyniki:
Tworzenie następującej kolejności w <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Mimo że dołączenie do mojej funkcji potomnego arkusza stylów spowodowało, że zostało ono umieszczone w kolejce dwa razy, IMHO jest lepsze niż kodowanie przy założeniu, że motyw nadrzędny odpowiednio zaszyfruje nasz potomny arkusz stylów. Na podstawie identyfikatora przypisanego do każdego kolejkowanego stylu wydaje się, że motyw nadrzędny kolejkuje go, a nie wszystko w WP Core.
Mój Shivm:
Chociaż prawie nie sugerowałbym, że jest to zalecany sposób (i jestem pewien, że twórcy z większym doświadczeniem w kodowaniu niż ja jęknęliby na to rozwiązanie), odznaczałem identyfikator motywu nadrzędnego (używanego do kolejkowania stylu motywu mojego dziecka) tuż nad moją kolejką w pliku funkcji motywu podrzędnego, jak pokazano:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Wyniki:
To rozwiązało bieżące problemy, w wyniku czego:
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Oczywiście wymagało to znajomości identyfikatora używanego przez motyw nadrzędny - potrzebna byłaby bardziej ogólna metoda, która mogłaby zostać wykorzystana jako standardowa metodologia opracowywania motywu potomnego.
ZAGADNIENIE 2: Przeniesione potomne arkusze stylów
(Wydaje się trudne do uwierzenia, że nie pojawił się w innym wątku, chociaż nie widziałem żadnych konkretnych, gdy patrzę ... jeśli go przegapiłem, nie krępuj się zwrócić na to moją uwagę.)
Nigdy nie używam domyślnego style.cssw głównym katalogu motywów potomnych dla moich stylów motywów - oczywiście musi tam być, ale wszystkie moje rzeczywiste style są kompilowane z SCSS jako zminimalizowany plik .css w katalogu / css /. Chociaż zdaję sobie sprawę, że nie jest to „oczekiwana norma” na poziomie uniwersalnym dla rozwoju motywów dziecięcych, większość poważnych programistów WordPress, których znam, robi coś podobnego. To oczywiście wymaga ręcznej kolejkowania tego arkusza stylów w mojej funkcji, niezależnie od tego, czy motyw nadrzędny go kolejkował, czy nie.
Podsumowując ...
- Czy można bezpiecznie założyć, że motywy nadrzędne poprawnie porządkują style motywów podrzędnych z punktu widzenia standardów motywów podrzędnych?
- Usunięcie priorytetu może potencjalnie wprowadzić więcej zamieszania w części społeczności WordPress, gdy style motywów podrzędnych zaczną być zastępowane przez wtyczkę. Oczekujemy, że motywy zastąpią style, ale nie tyle w przypadku wtyczek.
- W przypadku korzystania z niestandardowego arkusza stylów dla rzeczywistych stylów potomnych (w celu umieszczenia ich w predefiniowanym
style.css) konieczne staje się ręczne kolejkowanie tego pliku. Jeśli chodzi o utrzymanie ciągłości w szerokim spektrum programistów, czy nie ma sensu zachęcać do ręcznego porządkowania podrzędnego arkusza stylów, niezależnie od możliwego duplikatu?
źródło
Odpowiedzi:
PYTANIE 1
Ogólna zasada praktyczna, tak. Ale nigdy nie powinieneś zakładać . Większość katastrof i niepowodzeń na żywo jest spowodowana założeniami lub faktami opartymi na założeniu
FAKTY BEZ ZAŁOŻEŃ
Najpierw ładowane są funkcje child.php motywu potomnego, a następnie funkcje.php rodzica. Zapewnia to, że główny arkusz stylów nadrzędnych zostanie załadowany przed głównym arkuszem stylów nadrzędnych ze zaktualizowanego kodu w kodeksie
Spójrzmy na dołączony motyw, dwadzieścia dwanaście. Magia dzieje się tutaj
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. W ten sposób kolejkuje się główny arkusz stylów. Gdy motyw jest aktywny jako motyw nadrzędny, plik style.css zostanie załadowany z motywu nadrzędnego, coget_stylesheet_uri()będzie wskazywane na style.css katalogu nadrzędnego.Po przełączeniu na motyw podrzędny
get_stylesheet_uri()„zmienia” swoją ścieżkę, aby wskazywać na style.css motywu podrzędnego, co oznacza, że terazwp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );ładowanie nadrzędnego style.css powoduje teraz załadowanie podrzędnego style.cssWszystkie pozostałe style z motywu nadrzędnego są ładowane jak zwykle w kolejności, w jakiej zostały napisane
ZIEMNIAKI
Wstawiane style i arkusze stylów, które są dodawane bezpośrednio do szablonu nagłówka. Przeprowadziłem kilka testów tego problemu. Jeśli nadrzędny arkusz stylów nie jest umieszczany w kolejce za pomocą
wp_enqueue_scriptsi ładowany bezpośrednio w nagłówku, wówczas główny arkusz stylów podrzędnych jest ładowany jako pierwszy. Aby obejść ten problem, wcześniej zalecałem skopiowanie head.php elementu nadrzędnego do motywu podrzędnego i usunięcie tych wywołań. Będziesz wtedy musiał umieścić w kolejce zarówno style motywu nadrzędnego, jak i podrzędnego oraz wszelkie inne arkusze stylów, które zostały bezpośrednio załadowane do pliku header.php, jak opisano w funkcji amortyzacji OPZetknąłem się z tym raz lub dwa razy, gdy style (i skrypty) są ładowane bezpośrednio do nagłówka, dlatego wezwanie do
wp_headjest pominięte. To sprawi, że kolejka nie powiedzie się po cichu, więc twoje style po prostu się nie pokażą.Złe priorytety ustawione. Po podłączeniu funkcji enqueueu nie trzeba ustawiać priorytetów akcji nadrzędnych ani podrzędnych. Gdy oba mają ten sam domyślny priorytet, obowiązuje zasada „kto pierwszy, ten lepszy”. Zapewni to poprawność kolejności ładowania
UWAGA DLA AUTORÓW RODZICÓW
Prawidłowo przyjętą metodą dodawania stylów i skryptów do motywu jest
wp_enqueue_scriptshak akcji. Nigdy nie dodawaj stylów i skryptów bezpośrednio do szablonu nagłówka i nie ustawiaj priorytetu w akcji podczas zaczepiania funkcjiZawsze ładuj również główny arkusz stylów w następujący sposób:
Zapewni to załadowanie głównego arkusza stylów dziecka, gdy używany jest motyw potomny
TWOJA ODPOWIEDZIALNOŚĆ ZA AUTORA TEMATU DZIECIĘCEGO
Nie spiesz się i pracuj nad tematem nadrzędnym. Zapoznaj się z motywem nadrzędnym, upewnij się, że dobrze się czujesz ze strukturami motywu i jak w nim są używane funkcje i zaczepy. Nie można utworzyć udanego motywu podrzędnego, jeśli nie masz wewnętrznej wiedzy o tym, jak działa motyw nadrzędny. Twoim obowiązkiem jest upewnić się, że style i skrypty zostały poprawnie załadowane, aby kod działał zgodnie z oczekiwaniami.
Zawsze informuj autora motywu nadrzędnego o każdym kodzie, z którego nie jesteś zadowolony. Na przykład, jeśli autor dodał swoje style bezpośrednio do nagłówka, powiadom go o tym i uświadom, że jest to niewłaściwy sposób, i poproś go o poprawienie tego w przyszłym wydaniu
PYTANIE 2
Niestety nie ma bezpośredniej metody zabezpieczenia się przed tym. Faktem jest, że style wtyczek nigdy nie powinny zastępować domyślnych stylów motywów bez zgody użytkownika końcowego. Moim zdaniem jest to po prostu zła praktyka lub zaniedbanie autora wtyczki. Sugerowałbym, aby w takim przypadku skontaktować się z autorem wtyczki i powiadomić go o tym
Zawsze masz również opcję usunięcia z rejestru i wyrejestrowania stylu (i skryptu), którego nie potrzebujesz, lub którego potrzebujesz, aby zmienić priorytet oraz wprowadzić je i ponownie zarejestrować tak, jak w powyższym kodzie (co jest w porządku). Tylko uwaga na temat twojego shivma , najlepszą praktyką jest usunięcie z kolejki i wyrejestrowanie stylu i skryptu.
PYTANIE 3
Nie sądzę, aby istniała jakaś bezpośrednia czarno-biała odpowiedź na ten problem. Odpowiedziałbym, mówiąc: rób to, z czym czujesz się komfortowo, o ile jest to zgodne z pewnymi wytycznymi, które rządzą działaniem.
Arkusze stylów nie służą do dodawania funkcjonalności, ale są po to, aby zwiększyć wrażenia wizualne użytkownika. Style są również przesyłane bezpośrednio do przeglądarki, w której zostały przetworzone. Wordpress nie odgrywa tutaj żadnej roli.
W oparciu o ten fakt, naprawdę nie widzę żadnych groźnych czerwonych flag podczas dwukrotnego ładowania arkusza stylów. Wydajność może jednak kosztować kilka milisekund. Szczerze mówiąc, poza tym nie jestem do końca pewien, w jaki sposób obsługiwane są duplikaty w różnych przeglądarkach. To jest coś, co jako czytelnik możesz przetestować
IMHO, duplikaty nigdy nie są dobre i zawsze należy ich unikać. Sugerowałbym, że jeśli naprawdę chcesz ręcznie kolejkować główny arkusz stylów dziecka z jakiegokolwiek powodu, powinieneś użyć swojego kodu w shivm . Usuń zaznaczenie i wyrejestruj duplikat dodawany domyślnie, a następnie normalnie wymagaj arkusza stylów.
Należy również pamiętać o jednej rzeczy: funkcje kolejkowania i rejestracji mają
$dependancyparametr, z którego można również skorzystać. Łatwo jest więc załadować dodatkowy arkusz stylów i uzależnić go od głównego arkusza stylów motywu podrzędnegoW ZWIĄZKU
Od ostatniej aktualizacji kodeksu opinie były niesamowite i chciałbym podziękować wszystkim za to. Chciałbym zachęcić wszystkich do uczestnictwa w różnego rodzaju opiniach dotyczących tego pytania, w szczególności. Jeśli masz coś do dodania lub komentarza, zrób to.
źródło