Kontext
Ich habe ein Kinderthema basierend auf Twenty Thirteen erstellt, was sehr gut funktioniert. Nachdem ich das übergeordnete Thema auf Version 1.3 aktualisiert hatte, bemerkte ich ein merkwürdiges Verhalten mit dem Stil, das durch das zwischengespeicherte übergeordnete Thema verursacht wurde style.css
.
Hier ist der Inhalt des Themas meines Kindes style.css
(ohne Überschriften)
/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');
Das Kinderthema style.css
importiert also nur das Elternthema style.css
.
Ich habe auch eine andere CSS-Datei mit den Anpassungen meines Kinderthemas, die ich wie folgt einreihe functions.php
:
// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');
// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
null, $themeVersion);
Dies gibt mir eine sehr schöne CSS-URL domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1
, die sicherstellt, dass das Stylesheet neu geladen wird, wenn das untergeordnete Thema aktualisiert wird.
Nun das Problem
Die Anweisung @import url('../twentythirteen/style.css');
ist völlig unabhängig von der Version des zugrunde liegenden übergeordneten Themas. Tatsächlich kann das übergeordnete Design aktualisiert werden, ohne dass das untergeordnete Design aktualisiert wird. Browser verwenden jedoch weiterhin zwischengespeicherte Versionen des alten Designs ../twentythirteen/style.css
.
Relevanter Code in Dreizehnundzwanzig, der Folgendes in die Warteschlange stellt style.css
:
function twentythirteen_scripts_styles() {
// ...
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );
// Loads our main stylesheet.
wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
// Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css
// Loads the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
Ich kann mir ein paar Möglichkeiten vorstellen, um dieses Problem zu lösen, aber keine ist wirklich zufriedenstellend:
Aktualisieren Sie mein untergeordnetes Thema jedes Mal, wenn das übergeordnete Thema aktualisiert wird, um eine Versionszeichenfolge in
style.css
(z@import url('../twentythirteen/style.css?ver=NEW_VERSION');
. B. ) zu ändern . Dies schafft eine unnötige und ärgerliche Verbindung zwischen der übergeordneten Designversion und dem untergeordneten Design.In meinem Kind
functions.php
1)wp_dequeue_style
das enthaltene Kind-Themastyle.css
und 2)wp_enqueue_style
das Eltern- Themastyle.css
direkt mit Versionszeichenfolge. Dadurch wird die Reihenfolge der in die Warteschlange gestellten CSS-Dateien im übergeordneten Thema durcheinander gebracht.Verwenden Sie den
style_loader_tag
Filter, um das generierte CSS-<link>
Tag für zustyle.css
ändern, und ändern Sie den Pfad so, dass er direkt auf die WITH-Versionszeichenfolge des übergeordneten Themasstyle.css
verweist. Scheint für solch ein allgemeines Bedürfnis eher undurchsichtig (Cache-Busting).Gib das Thema
style.css
meiner Eltern in das meines Kindesstyle.css
. Wie (1), aber etwas schneller.style.css
Lassen Sie das Thema meines Kindes ein Symlink zum Thema des Elternteils seinstyle.css
. Das scheint ziemlich hackisch ...
Habe ich etwas verpasst Irgendwelche Vorschläge?
bearbeiten
Hinzugefügt genericicons.css
und ie.css
Stylesheets im übergeordneten Thema, um zu verdeutlichen, warum ich die @import
CSS-Anweisung wp_enqueue_style
in meinem untergeordneten Thema nicht ändern kann . Derzeit habe ich mit einer @import
Aussage in meinem Kinderthema style.css
diese Reihenfolge in generierten Seiten:
- Dreizehnundzwanzig / genericons / genericons.css -> Eingereiht nach übergeordnetem Thema
- child-theme / style.css -> nach übergeordnetem Thema in die Warteschlange gestellt, @imports twentythirteen / style.css
- einundzwanzig / css / ie.css -> nach übergeordnetem Thema in die Warteschlange gestellt
- child-theme / css / main.css -> nach untergeordnetem Thema in die Warteschlange gestellt
Wenn ich die Eltern style.css
als Abhängigkeit von in die Warteschlange einreihe main.css
, wird dies zu:
- Dreizehnundzwanzig / genericons / genericons.css -> Eingereiht nach übergeordnetem Thema
- child-theme / style.css -> leer, eingereiht nach übergeordnetem Thema
- einundzwanzig / css / ie.css -> nach übergeordnetem Thema in die Warteschlange gestellt
- twentythirteen / style.css -> nach untergeordnetem Thema als Abhängigkeit von main.css in die Warteschlange gestellt
- child-theme / css / main.css -> nach untergeordnetem Thema in die Warteschlange gestellt
Beachten Sie, dass ie.css jetzt vor dem übergeordneten Thema enthalten ist style.css
. Ich möchte die Reihenfolge der Warteschlangen in den CSS-Dateien des übergeordneten Themas nicht ändern, da ich nicht davon ausgehen kann, dass dies keine Probleme mit der Priorität der CSS-Regeln verursacht.
quelle
@import
, stattdessen das Stylesheet des übergeordneten Themas als Abhängigkeit von Ihrem eigenen Stylesheet festlegen .style.css
nicht an der Stelle eingefügt, an der es sich gerade befindet. Das übergeordnete Element enthält andere CSS-Dateien, die zwischenstyle.css
dem zugehörigen CSS und dem CSS meines untergeordneten Themas liegen müssen.Antworten:
Sie müssen @import nicht verwenden. Eigentlich ist es das Beste, das nicht zu tun. Die Verwendung eines Ansatzes in Warteschlangen ist wahrscheinlich überall besser.
Hier ist der relevante Teil des dreizehnundzwanzigsten Codes:
Folgendes tun Sie in Ihrem Code:
Wenn Ihre main.css nach der style.css der Eltern kommen muss, dann machen Sie es einfach davon abhängig.
Wenn Sie nun auch ein B.css im untergeordneten Element haben, richten Sie die Abhängigkeiten entsprechend ein:
Stellen Sie sicher, dass die Abhängigkeiten, die Sie für jedes Element definieren, die tatsächlichen Abhängigkeiten widerspiegeln. Wenn main.css nach B.css kommen muss, dann kommt es darauf an. Wenn B.css nach dem style.css der Eltern kommen muss, dann hängt B davon ab. Das Enqueue-System erledigt das für Sie.
Und wenn Sie die Datei style.css des Kindes nicht für irgendetwas verwenden, müssen Sie sie überhaupt nicht einreihen . Es kann nur ein Platzhalter für die Header-Informationen Ihres Themas sein. Verwenden Sie es nicht? Laden Sie es nicht.
Und was genau machst du, wenn du hier bestellst? In den meisten Situationen kümmert sich CSS nicht um die Ladereihenfolge. CSS hängt mehr von der Spezifität der Selektoren ab. Wenn Sie etwas außer Kraft setzen möchten, müssen Sie Ihre Auswahl spezifischer machen. Es kann zuerst oder zuletzt oder irgendetwas dazwischen kommen, der spezifischere Selektor gewinnt immer.
Bearbeiten
Wenn ich Ihre Kommentare lese und den Code genauer betrachte, sehe ich, wo der Fehler liegt. Der dreizehnundzwanzigste Code reiht das "get_stylesheet_uri ()" in eine Warteschlange, das in einem untergeordneten Themenfall die style.css-Datei Ihres untergeordneten Themas ist und nicht die Datei des übergeordneten Themas. Aus diesem Grund funktioniert der @import und behält die gleiche Reihenfolge bei (was wiederum nicht annähernd so wichtig ist, wie Sie denken).
In diesem Fall würde ich empfehlen, die Datei style.css des übergeordneten Elements direkt in die Warteschlange zu stellen, wenn Sie den Import nicht verwenden möchten. Wie so:
Code in der Datei functions.php des untergeordneten Themas wird zuerst ausgeführt, sodass Ihre eigenen wp_enqueue_scripts zuerst ausgeführt werden. Dadurch wird die Datei style.css des übergeordneten Themas in eine Warteschlange gestellt, die das übergeordnete Thema nicht selbst ausführt (da die Datei style.css Ihres untergeordneten Themas tatsächlich in eine Warteschlange gestellt wird). Indem es nicht von etwas abhängig gemacht wird, das dem übergeordneten Element entspricht, wird es einfach korrekt in die Ausgabe eingefügt. Beachten Sie, dass die Reihenfolge dieser Datei und der genericons.css keine Rolle spielt, da die genericons.css im ursprünglichen Stil "13" nicht als aufgelistete Abhängigkeit vorhanden ist.
Style.css Ihres eigenen Kindes wird geladen, und ehrlich gesagt, hier sollten Sie Ihre Änderungen für das untergeordnete Thema ablegen, nicht in einer separaten main.css. Nichts hindert Sie daran, Ihre Änderungen dort abzulegen, aber es gibt keinen wirklichen Grund, eine zusätzliche CSS-Datei zu haben.
quelle
@import
s nicht der beste Weg ist. Weitere Informationen finden Sie in meinem Abschnitt "Bearbeiten". Ich habe keine besonderen Bedürfnisse in Bezug auf die Bestellung von CSS. Ich möchte einfach nicht die interne Reihenfolge der CSS-Dateien des übergeordneten Themas ändern, was Probleme mit der Priorität der CSS-Regeln verursachen kann.Meine vorherige Antwort ist zu kompliziert und berücksichtigt möglicherweise nicht die Abhängigkeitskette des übergeordneten Themas (siehe Hinweis in einer anderen Antwort).
Hier ist eine andere, viel einfachere Einstellung, die viel besser funktionieren sollte:
Die Idee ist, einfach den Aufruf
get_stylesheet_uri()
im übergeordneten Design zu filtern , um das eigene Stylesheet anstelle des untergeordneten Designs zurückzugeben. Das Stylesheet des untergeordneten Themas wird später im Aktions-Hook in die Warteschlange gestelltmy_theme_styles
.quelle
@import
Version, hat keinerlei Auswirkungen auf die Leistung. Es gibt zwei separate style.css-Anfragen an den Server. 2) Diese Antwort löscht die gesamte Abhängigkeitssache together ... 3) Hier können Sie überprüfen, wasget_template_directory_uri
und was Sieget_template_stylesheet_uri
tun: core.trac.wordpress.org/browser/tags/4.8/src/wp-includes/… Auch hier ist der größte Teil dieses Codes nicht erforderlich.wp_enqueue_style
fügt der generierten URL automatisch eine Cache-Busting- Abfragezeichenfolge hinzu (z. B.?ver=2013-07-18
), die auf der Version des Themas basiert. Dies erfolgt nicht durch eine@import
Aussage.Warnung
Diese Lösung berücksichtigt nicht die Abhängigkeiten des übergeordneten Themas ! Das Ändern des Handle-Namens des übergeordneten Themas wirkt sich auf die im übergeordneten Thema festgelegte Abhängigkeitskette aus. Siehe meine viel einfachere andere Antwort .
orignal Antwort
Obwohl Ottos Antwort ziemlich gut ist, landete ich damit in den Funktionen meines Kinderthemas
Die
style.css
Reihenfolge und Versionsnummern des übergeordneten Themas werden beibehalten, während die Version des untergeordneten Themas gesteuert wirdstyle.css
.quelle
[$parentNewHandle]
zuarray($parentNewHandle)
@import
funktioniert die alte Methode genauso gut. Bitte vergleichen Sie beide Methoden. Auch dies ist für die Abhängigkeit des untergeordneten Themas vom übergeordneten Thema nicht erforderlich. Das Kindstyle.css
wird immer nach dem Elternteil geladen, zumindest aus meinen Tests. Liebe es, sich als falsch zu erweisen.