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?