jak ustawiać w kolejce mój arkusz / style dziecka * po * każdym arkuszu / instrukcji rodzica?

11

Używam dobrze napisanego motywu enologicznego autorstwa Chipa Bennetta jako rodzica własnego motywu potomnego.

W moim procesie rozwoju odkryłem, że istnieją pewne wyzwania dla ludzi piszących motywy podrzędne, jeśli chodzi o kontrolowanie stylów.

Właśnie odkryłem, że mój główny plik style.css jest ładowany przed każdym innym linkiem lub instrukcją arkusza stylów w <head>, i to wyjaśnia, dlaczego miałem problem z przesłonięciem niektórych stylów nadrzędnych.

dalsze badanie problemu pokazuje, że różne Arkusze stylów Nadrzędnych i style mogą być umieszczone w kolejce w <head> w trzech miejscach; add_action('wp_print_styles',, add_action('wp_enqueue_scripts',a następnie add_action('wp_head',.

dla uproszczenia planuję utworzyć dwa arkusze stylów. pierwszy główny arkusz „style.css” zawierałby tylko @import url()polecenie potrzebne do załadowania głównego arkusza stylów Oenology.

drugi arkusz stylów zawierałby moje reguły dla dzieci. aby upewnić się, że jest ładowany po wszystkich innych regułach, ustawię go w kolejce za pomocą add_action( 'wp_head',.

czy to brzmi rozsądnie? czy jest lepszy (bardziej poprawny) sposób na zrobienie tego?

btw, czy ktoś wie, co oznacza „/parent-theme/style.css ? MRPreviewRefresh = 723 ”?

Aktualizacja

wp_enqueue_style () nie wydaje się działać w wp_head ().

na zdrowie,
Gregory

child-theme css parent-theme Gregory
źródło

Odpowiedzi:

21

Tylko do wiadomości, to pytanie prawdopodobnie graniczy ze zbyt zlokalizowaną , ponieważ jest specyficzne dla tematu enologii.

To powiedziawszy, tutaj myślę, że masz problem: enologia kolejkuje dwa arkusze stylów:

  1. style.css, bezpośrednio w głowie dokumentu (a więc przed uruchomieniem wp_head())

  2. {varietal}.css, wp_enqueue_scriptsz priorytetem 11, w functions/dynamic-css.php:

    /**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define varietal stylesheet
global $oenology_options;
$oenology_options = oenology_get_options();
$varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
$varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';

wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

Odmienny arkusz stylów, który stosuje „skórkę”, kolejkuje w pierwszej kolejności 11, aby mieć pewność, że podstawowy arkusz stylów zostanie style.csszaładowany jako pierwszy , a arkusz stylów ładuje się drugi , aby spowodować prawidłową kaskadę.

Tak więc, jeśli chcesz zastąpić arkusz stylów odmian , po prostu umieść drugi arkusz stylów po arkuszu stylów odmian; tj. z priorytetem co najmniej 12lub większym.

Edytować

Aby udzielić bardziej ogólnej odpowiedzi, na bardziej ogólne pytanie:

Aby zastąpić kolejkę arkuszy stylów nadrzędnych, musisz wiedzieć dwie rzeczy:

  1. Hak akcja , w której arkusz stylów jest skolejkowany
  2. Priorytet przy której zwrotna jest dodany do haka

Funkcje kolejki ( wp_enqueue_script()/ wp_enqueue_style()) mogą być poprawnie wykonywane w dowolnym miejscu między inithakiem a wp_print_scripts/ hakiem wp_print_styles. ( Semantycznie poprawny zaczep, przy którym można wykonywać wp_enqueue_*()funkcje, jest obecnie wp_enqueue_scripts.) Ta lista zawiera następujące akcje (między innymi; są to tylko zwykli podejrzani):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

(Należy pamiętać, że wp_enqueue_scripts, wp_print_stylesi wp_print_scripts wszystko ogień wewnątrz od wp_head, na priorytet konkretnego .

Aby zastąpić arkusz stylów motywu nadrzędnego, musisz wykonać jedną z następujących czynności:

  • Usuń kolejkę arkusza stylów nadrzędnych za pomocąwp_dequeue_style( $handle )
  • Usuń wywołanie zwrotne motywu nadrzędnego, który kolejkuje styl, za pośrednictwemremove_action( $hook, $callback )

  • Użyj kaskady CSS, aby zastąpić arkusz stylów motywu nadrzędnego, zaczepiając wp_enqueue_style()wywołanie arkusza stylów motywu podrzędnego do tego samego zaczepu o niższym priorytecie lub późniejszego .

    W przypadku tej ostatniej opcji, jeśli motyw nadrzędny używa:

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ... wtedy Motyw Dziecka użyłby:

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
Chip Bennett
źródło
dziękuję Chip. Rzeczywiście mogę użyć wp_enqueue_scripts i wysokiej porządkowej, aby mój potomny arkusz stylów załadował się na końcu. nadal istnieją 3 różne instrukcje stylów po mojej instrukcji Child stylesheet. 2 z nich są wyprowadzane przez samą WP !!!, a 1 jest wyprowadzane przez Oenology za pomocą funkcji add_custom_image_header () wp.
Gregory,
instrukcja stylu body.custom-background jest generowana przez samą WP, ale wygląda na to, że mogę określić niestandardowy kolor tła, definiując „BACKGROUND_COLOR”. dziwne, że podstawowa reguła css musiałaby zostać ustawiona za pomocą niestandardowej stałej WP.
Gregory,
1
ostatni komentarz Chip. to pytanie nie jest zbyt zlokalizowane. wiele motywów wykorzystywałoby wszystkie dostępne zaczepy do kolejkowania lub drukowania stylów, a twórcy motywów potomnych muszą wiedzieć, jak przesłonić te style bez konieczności ich wyłączania. Twoje zdrowie.
Gregory,
Problem, jaki tu widzę, polega na tym, że child_theme_enqueue_style załaduje styl podrzędny o wyższym priorytecie, dalej w dół wp_head, ALE zduplikuje podrzędny arkusz stylów - Wordpress automatycznie załaduje podrzędny arkusz stylów z jego normalnym priorytetem, a następnie załaduje go ponownie, dalej z nowym priorytetem. Chociaż osiąga wynik zastąpienia wszystkich innych arkuszy stylów, tworzy na stronie duplikat arkusza stylów.
php-b-grader
2

jedynym sposobem na zagwarantowanie, że moje style mają ostatni głos w kaskadzie, było włączenie ich na końcu <head> poprzez hak wp_head. wp_enqueue nie działa w ramach wp_head, więc musiałem bezpośrednio wyświetlić link:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

wreszcie mogę ustawić moje style ze względną łatwością i bez stosowania wysokiego poziomu specyficzności lub ważnej zasady, która powinna być stosowana tylko w ostateczności.

WP potrzebuje lepszego systemu kolejkowania w stylu. każdy styl, czy to link do pliku czy styl wbudowany, powinien zostać przepuszczony przez ten sam hak, umożliwiając Priorytetowi określenie ich kolejności. opcjonalnie do celów debugowania przydatne byłoby, gdyby hak wyświetlał również wartości Priorytetów każdego stylu, być może w formie komentarza.

Aktualizacja

Udało mi się zachować kontrolę nad stylami w motywie potomnym, zachowując oryginalną kaskadę motywu nadrzędnego (który korzysta z głównego arkusza stylów, arkusza podrzędnego i kilku instrukcji stylów), dzieląc mój arkusz stylów na dwa, jak wyjaśniono w pytanie. Nie używam już haka wp_head (), zamiast tego używam właściwego i standardowego haka wp_enqueue_scripts () z wysoką liczbą porządkową, aby mieć pewność, że mój arkusz stylów zostanie załadowany na końcu.

domyślny arkusz stylów mojego dziecka:

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

funkcja kolejkowania mojego głównego arkusza stylów:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

istnieje jednak kilka instrukcji stylu wygenerowanych przez WP (tj. nie jest to temat nadrzędny), które podano poniżej moim arkuszu stylów, i będę musiał rozważyć użycie albo reguł css o wysokiej specyficzności, aby zastąpić reguły, które mnie dotyczą, lub poszukać przechwytuje je, w szczególności regułę body.custom-background.

dziękuję wszystkim za komentarze.

na zdrowie,
Gregory

Gregory
źródło
1

Należy zawsze korzystać wp_enqueue_style(), aby załadować stylów i że funkcje powinny być podpięty do wp_enqueue_scripts hakiem z wyciągów w głowie . Podejrzewam, że tam nie zaczepiałeś, stąd twój problem. (Od wersji WP 3.3, jeśli wp_enqueue_style()jest podłączony do czegokolwiek innego, wyświetla powiadomienie przy włączonej WP_Debug).

mrwweb
źródło
@ Odpowiedź Chipa jest lepsza niż moja i jest on prawdopodobnie bardziej wykwalifikowany do omawiania tematu enologii;) Czy to jest przypadek, w którym powinienem usunąć swoją odpowiedź, nawet jeśli jest prawidłowa?
mrwweb
Nie, zostawiłbym twoją odpowiedź. Jest poprawny i odnosi się do określonej części pytania.
Chip Bennett