In diesem Beitrag werden einige Fragen aufgeworfen, die ich im Zusammenhang mit den jüngsten Änderungen in Bezug auf Stylesheet-Enqueueing-Methoden in diesem Thread und in diesem Thread gestellt habe .
Die Probleme, auf die ich gestoßen bin, sind in einem allgemeinen Anwendungsszenario aufgetreten, in dem ein weit verbreitetes und gut gepflegtes übergeordnetes Thema verwendet wurde, das speziell für untergeordnete Themen bei einer WP 4.0-Installation bereit ist. Mein Kind Thema des functions.php enthält nur die wp_enqueue_styleFunktion wie im Codex detailliert .
Bitte beachten Sie, dass der unten angegebene Code zwar spezifisch für dieses Thema ist, ein Großteil jedoch die aktuellen Codierungskonventionen verwendet, die von übergeordneten Themen verwendet werden. Darüber hinaus sind meine Problembereiche höchstwahrscheinlich auf eine große Anzahl etablierter übergeordneter Themen duplizierbar, die sich derzeit in freier Wildbahn befinden. Die von diesen aufgeworfenen Fragen sind auch universell anwendbar, unabhängig davon, welches übergeordnete Thema verwendet wird.
AUSGABE 1: Zwei Warteschlangen
Das empfohlene Setup:
Das übergeordnete Thema stellt Stile und Skripte mithilfe wp_enqueue_scriptsdes Hooks in die Warteschlange, wobei der relevante Teil wie folgt lautet:
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'); }
}Mein functions.phpuntergeordnetes Thema stellt Stile gemäß den letzten Codexänderungen in die Warteschlange:
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' );
}Beachten Sie die folgenden IDs, die vom referenzierten Code verwendet werden:
id='dm-parent-style-css'ist das Stylesheet des übergeordneten Themas, wie es von meiner untergeordneten Themenfunktion in die Warteschlange gestellt wirdid='avia-style-css'ist das Stylesheet meines untergeordneten Themas, wie es von der übergeordneten Themenfunktion in die Warteschlange gestellt wirdid='dm-child-style-css'ist das Stylesheet meines untergeordneten Themas, wie es von meiner untergeordneten Themenfunktion in die Warteschlange gestellt wird
Die Ergebnisse:
Auf den ersten Blick war alles in Ordnung, wobei das <head> die folgende Reihenfolge anzeigt:
<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' />Nach der Installation eines Plugins hat sich die Reihenfolge der Warteschlangen nun wie folgt geändert:
<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 -->Letztendlich muss das CSS meines untergeordneten Themas nach Plugins geladen werden, sodass ich gezwungen war, der Funktion in meinem untergeordneten Thema eine Prioritätsnummer hinzuzufügen (siehe vorherige Diskussion zur Prioritätsnummer) .
Denn nur meine Funktion reiht das CSS-Mutter Thema, jedoch ist das Ergebnis , dass jetzt die Mutter Thema CSS Ende bewegt wird, mein Kind Thema css in einer noch schlimmeren Notlage verlassen als zuvor.
<!-- 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' />Jetzt bin ich gezwungen, auch meinen untergeordneten Themenstil in die Warteschlange zu stellen, um sicherzustellen, dass er wieder an die Spitze der Zeile verschoben wird, was zu dem oben erwähnten Problem führt, dass das untergeordnete Thema CSS in die Warteschlange gestellt wird (neuer Begriff? Lol).
Das veraltete Setup:
Überarbeitete Funktion im untergeordneten Thema:
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' );
}Die Ergebnisse:
Herstellung der folgenden Bestellung in der <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' />Obwohl das Einfügen des untergeordneten Stylesheets in meine Funktion dazu führte, dass es zweimal in die Warteschlange gestellt wurde, ist IMHO der Codierung vorzuziehen, unter der Annahme, dass das übergeordnete Thema unser untergeordnetes Stylesheet für uns ordnungsgemäß in die Warteschlange stellt. Basierend auf den IDs, die jedem Stil in der Warteschlange zugewiesen sind, scheint es, dass das übergeordnete Thema ihn in die Warteschlange stellt, nicht irgendetwas in WP Core.
Mein Shivm:
Obwohl ich kaum vorschlagen würde, dass dies das empfohlene Mittel ist (und ich bin sicher, dass Entwickler mit mehr Programmiererfahrung als ich über diese Lösung stöhnen werden), habe ich die ID des übergeordneten Themas (die zum Einreihen des Stils meines untergeordneten Themas verwendet wird) direkt über meiner eigenen Warteschlange entfernt in der Funktionsdatei meines untergeordneten Themas wie gezeigt:
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' );
}Die Ergebnisse:
Dies löste die vorliegenden Probleme und führte zu:
<!-- 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' />Dies erforderte natürlich die Kenntnis der vom übergeordneten Thema verwendeten ID - etwas Allgemeineres wäre erforderlich, um als Standardmethode für die Entwicklung von untergeordneten Themen verwendet zu werden.
AUSGABE 2: Verschobene untergeordnete Stylesheets
(Es scheint schwer zu glauben, dass dies nicht in einem anderen Thread aufgetaucht ist, obwohl ich beim Anschauen keine bestimmten gesehen habe. Wenn ich es verpasst habe, können Sie mich gerne darauf aufmerksam machen.)
Ich verwende niemals die Standardeinstellung style.cssim Stammverzeichnis des untergeordneten Themas für meine Designstile - sie muss natürlich vorhanden sein, aber alle meine tatsächlichen Stile werden aus SCSS als minimierte CSS-Datei in einem Verzeichnis / css / kompiliert. Obwohl mir klar ist, dass dies nicht die "erwartete Norm" auf universeller Ebene für die Entwicklung von Kinderthemen ist, machen die meisten ernsthaften WordPress-Entwickler, die ich kenne, etwas Ähnliches. Dies erfordert natürlich das manuelle Einreihen dieses Stylesheets in meine Funktion, unabhängig davon, ob das übergeordnete Thema es in die Warteschlange gestellt hat oder nicht.
Um alles zusammenzufassen ...
- Ist es sicher, die Annahme aufzunehmen, dass übergeordnete Themen die untergeordneten Themenstile unter dem Gesichtspunkt der Standards für untergeordnete Themen ordnungsgemäß in die Warteschlange stellen?
- Das Entfernen der Priorität kann möglicherweise zu mehr Verwirrung in einem Teil der WordPress-Community führen, wenn untergeordnete Themenstile von einem Plugin überschrieben werden. Wir erwarten, dass Themen Stile überschreiben, aber nicht so sehr mit Plugins.
- Wenn Sie ein benutzerdefiniertes Stylesheet für die eigentlichen
style.cssuntergeordneten Designstile verwenden (um sie in die vordefinierten zu setzen ), muss diese Datei manuell in die Warteschlange gestellt werden. Wäre es im Hinblick auf die Aufrechterhaltung der Kontinuität über ein breites Spektrum von Entwicklern nicht sinnvoll, das untergeordnete Stylesheet unabhängig vom möglichen Duplikat manuell in die Warteschlange zu stellen?
quelle
Antworten:
FRAGE 1
Allgemeine Faustregel, ja. Aber du solltest niemals annehmen . Die meisten Katastrophen und Ausfälle im Leben sind auf Annahmen oder Fakten zurückzuführen, die auf einer Annahme beruhen
FAKTEN OHNE ANNAHMEN
Zuerst wird die functions.php eines untergeordneten Themas geladen, dann die functions.php des übergeordneten Themas. Dadurch wird sichergestellt, dass das Hauptstylesheet des übergeordneten Themas vor dem Hauptstylesheet des untergeordneten Themas aus dem aktualisierten Code im Codex geladen wird
Schauen wir uns das gebündelte Thema an, zwanzig. Die Magie passiert hier
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Auf diese Weise wird das Haupt-Stylesheet in die Warteschlange gestellt. Wenn das Thema als übergeordnetes Thema aktiv ist, wird die Datei style.css aus dem übergeordneten Thema geladen und auf die Datei style.cssget_stylesheet_uri()des übergeordneten Verzeichnisses verwiesen.Wenn Sie zu einem
get_stylesheet_uri()untergeordneten Thema wechseln, wird der Pfad so geändert, dass er aufwp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );die Datei style.css des untergeordneten Themas verweist. Dies bedeutet, dass jetzt anstelle der übergeordneten Datei style.css die untergeordnete Datei style.css geladen wirdAlle anderen Stile aus dem übergeordneten Thema werden wie gewohnt in der Reihenfolge geladen, in der sie geschrieben wurden
Schlaglöcher
Inline-Stile und Stylesheets, die direkt zu Ihrer Header-Vorlage hinzugefügt werden. Ich habe einige Tests zu diesem Thema durchgeführt. Wenn das übergeordnete Stylesheet nicht über
wp_enqueue_scriptsden Header in die Warteschlange gestellt und direkt in die Kopfzeile geladen wird, wird zuerst das Hauptstylesheet des untergeordneten Themas geladen. Um dieses Problem zu umgehen, habe ich zuvor empfohlen, die Datei header.php des übergeordneten Elements in das untergeordnete Thema zu kopieren und diese Aufrufe zu entfernen. Sie müssen dann sowohl die übergeordneten als auch die untergeordneten Designstile und alle anderen Stylesheets in die Warteschlange stellen, die direkt in die Datei header.php geladen wurden, wie in der Funktion " OP abgeschrieben" beschriebenIch bin ein- oder zweimal darauf gestoßen, dass Stile (und Skripte) direkt in den Header geladen werden, und aus diesem Grund wird der Aufruf von
wp_headweggelassen. Dadurch schlagen Sie die Aktion in der Warteschlange stillschweigend fehl, sodass Ihre Stile einfach nicht angezeigt werden.Falsche Prioritäten gesetzt. Es ist nicht erforderlich, Prioritäten für übergeordnete oder untergeordnete Aktionen festzulegen, wenn Sie Ihre Enqueueu-Funktionen verknüpfen. Wenn beide dieselbe Standardpriorität haben, gilt die Regel "Wer zuerst kommt, mahlt zuerst". Dadurch wird sichergestellt, dass die Ladereihenfolge korrekt ist
HINWEIS FÜR DIE AUTOREN DER ELTERN
Die ordnungsgemäß akzeptierte Methode zum Hinzufügen von Stilen und Skripten zu einem Thema ist der
wp_enqueue_scriptsAktions-Hook. Fügen Sie niemals Stile und Skripte direkt in die Header-Vorlage ein und legen Sie beim Verknüpfen Ihrer Funktion keine Priorität in Ihrer Aktion festLaden Sie das Haupt-Stylesheet immer auch wie folgt:
Dadurch wird sichergestellt, dass das Hauptstylesheet des Kindes geladen wird, wenn ein untergeordnetes Thema verwendet wird
IHRE VERANTWORTUNG ALS KINDERTHEMA-AUTOR
Nehmen Sie sich Zeit und arbeiten Sie das übergeordnete Thema durch. Kennen Sie Ihr übergeordnetes Thema, stellen Sie sicher, dass Sie mit den Themenstrukturen und der Verwendung von Funktionen und Hooks im Thema vertraut sind. Sie können kein erfolgreiches untergeordnetes Thema erstellen, wenn Sie nicht genau wissen, wie das übergeordnete Thema funktioniert. Es liegt in Ihrer Verantwortung, sicherzustellen, dass Stile und Skripte ordnungsgemäß geladen werden, damit Ihr Code wie erwartet funktioniert.
Machen Sie den Autor des übergeordneten Themas immer auf Code aufmerksam, mit dem Sie nicht zufrieden sind. Wenn der Autor beispielsweise seine Stile direkt zum Header hinzugefügt hat, machen Sie ihn darauf aufmerksam und machen Sie ihn darauf aufmerksam, dass dies der falsche Weg ist, und bitten Sie ihn, dies in einer zukünftigen Version zu korrigieren
FRAGE 2
Leider gibt es keine direkte Methode, um sich dagegen abzusichern. Tatsache ist, dass Plugin-Stile niemals Standard-Designstile ohne die Zustimmung des Endbenutzers überschreiben sollten. Meiner Meinung nach ist dies nur eine schlechte Praxis oder ein Neglet des Plugin-Autors. Ich würde vorschlagen, dass Sie in einem solchen Fall den Autor des Plugins kontaktieren und ihn darauf aufmerksam machen
Sie haben auch immer die Möglichkeit, einen Stil (und ein Skript), den Sie nicht benötigen oder dessen Priorität Sie ändern müssen, abzumelden und abzumelden, und die Sie wie in Ihrem obigen Code anfordern und erneut registrieren müssen (was vollkommen in Ordnung ist). Nur eine Anmerkung zu Ihrem Shivm . Es wird empfohlen , einen Stil und ein Skript aus der Warteschlange zu entfernen und die Registrierung aufzuheben .
FRAGE 3
Ich glaube nicht, dass es eine direkte Schwarz-Weiß-Antwort auf dieses Problem gibt. Ich würde antworten, indem ich sage: Tu, womit du dich wohl fühlst, solange es innerhalb einer bestimmten Richtlinie liegt, die die Handlung regelt.
Stylesheets dienen nicht dazu, Funktionen hinzuzufügen, sondern dem Benutzer eine visuelle Erfahrung zu bieten. Stile werden auch direkt an den Browser gesendet, wenn sie verarbeitet werden. Wordpress spielt hier keine Rolle.
Aufgrund dieser Tatsache sehe ich beim zweimaligen Laden eines Stylesheets wirklich keine bedrohlichen roten Fahnen. Dies kann jedoch einige Millisekunden dauern. Abgesehen davon bin ich mir nicht sicher, wie Duplikate in verschiedenen Browsern behandelt werden. Dies können Sie als Leser testen
IMHO, Duplikate sind nie gut und sollten immer vermieden werden. Ich würde vorschlagen, dass Sie Ihren Code in Ihrem Shivm verwenden sollten, wenn Sie das Haupt-Stylesheet des Kindes aus irgendeinem Grund wirklich manuell in die Warteschlange stellen möchten . Deaktivieren und abmelden Sie das standardmäßig hinzugefügte Duplikat und fordern Sie das Stylesheet wie gewohnt an.
Beachten
$dependancySie auch, dass die Funktionen enqueue und register einen Parameter haben, den Sie auch verwenden können. So ist es einfach, ein sekundäres Stylesheet zu laden und es vom Haupt-Stylesheet Ihres untergeordneten Themas abhängig zu machenABSCHLIESSEND
Seit der letzten Aktualisierung des Kodex war das Feedback erstaunlich und ich möchte mich bei allen für das Feedback dazu bedanken. Ich möchte alle dazu ermutigen, an jeglichen Rückmeldungen zu dieser Frage teilzunehmen. Wenn Sie etwas hinzufügen oder kommentieren möchten, tun Sie dies bitte.
quelle