Wie stelle ich mein Child-Stylesheet / s * nach * jedem übergeordneten Stylesheet / Statement in eine Warteschlange?

Ich benutze das gut geschriebene Oenology-Thema von Chip Bennett als Elternteil zu meinem eigenen Kind-Thema.

In meinem Entwicklungsprozess habe ich festgestellt, dass es einige Herausforderungen für Leute gibt, die untergeordnete Themen schreiben, wenn es um die Steuerung von Stilen geht.

Ich habe gerade entdeckt, dass meine main style.css-Datei vor jedem anderen Stylesheet-Link oder jeder statement in geladen wird, und dies erklärt, warum ich Probleme hatte, einige der Parent-Stile zu überschreiben.

Weitere Untersuchungen des Problems zeigen, dass verschiedene übergeordnete Stylesheets und Styles in an drei Stellen eingereiht werden können; add_action('wp_print_styles', add_action('wp_enqueue_scripts', , und dann add_action('wp_head',

um die Dinge einfach zu halten, plane ich zwei Stylesheets zu erstellen. Das erste Hauptformular ‘style.css’ würde nur den @import url() , der benötigt wird, um das Haupt-Stylesheet von @import url() zu laden.

Das zweite Stylesheet würde meine Child-Regeln enthalten. Um sicherzustellen, dass es nach allen anderen Regeln geladen ist, würde ich es mit add_action( 'wp_head',

klingt das vernünftig? oder gibt es einen besseren (richtigen) Weg, es zu tun?

Übrigens, weiß jemand was “/parent-theme/style.css ? MRPreviewRefresh = 723 ” bedeutet?

Aktualisieren

wp_enqueue_style () scheint in wp_head () nicht zu funktionieren.

Prost,
Gregor

Solutions Collecting From Web of "Wie stelle ich mein Child-Stylesheet / s * nach * jedem übergeordneten Stylesheet / Statement in eine Warteschlange?"

Nur zur Info, diese Frage grenzt wahrscheinlich an zu lokal begrenzt , wie es spezifisch für das Önologie-Thema ist.

Das heißt, hier, wo ich denke, dass Sie ein Problem haben: Oenology reiht zwei Stylesheets ein:

  1. style.css , direkt im Dokumentenkopf (also bevor wp_head() ausgetriggers wird)
  2. {varietal}.css wp_enqueue_scripts {varietal}.css , bei wp_enqueue_scripts , mit Priorität 11 , in 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 ); 

Das Sorten-Stylesheet, das die “Haut” anwendet, reiht sich in die Priorität 11 , um sicherzustellen, dass das Basis-Stylesheet, style.css , zuerst style.css wird und das Sorten-Stylesheet als zweites style.css , um die richtige Kaskade zu style.css .

Wenn Sie also das Sorten- Stylesheet überschreiben möchten, fügen Sie einfach Ihr zweites Stylesheet nach dem Sorten-Stylesheet ein. dh mit einer Priorität von mindestens 12 oder höher.

Bearbeiten

Um eine allgemeinere Antwort auf die allgemeinere Frage zu geben:

Um eine Entire des Stylesheets eines übergeordneten Designs zu überschreiben, müssen Sie zwei Dinge wissen:

  1. Der Aktionshaken, bei dem das Stylesheet in die Warteschlange eingereiht wird
  2. Die Priorität, mit der der callback dem Hook hinzugefügt wird

Enqueue-functionen ( wp_enqueue_script() / wp_enqueue_style() ) können zwischen den init wp_print_scripts und den wp_print_scripts / wp_print_styles Hooks ordnungsgemäß ausgeführt werden. (Der semantisch korrekte Hook, mit dem wp_enqueue_*() functionen ausgeführt werden, ist derzeit wp_enqueue_scripts .) Diese Liste enthält die folgenden Aktionen (unter anderem; dies sind nur die üblichen Verdächtigen):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts / wp_print_styles

(Beachten Sie, dass wp_enqueue_scripts , wp_print_styles und wp_print_scripts alle innerhalb von wp_head mit einer bestimmten Priorität wp_head werden .

Um ein Parent-Theme-Stylesheet zu überschreiben, müssen Sie einen der folgenden Schritte ausführen:

  • Entzerren Sie das Stylesheet Parent-Theme über wp_dequeue_style( $handle )
  • Entfernen Sie den Callback des übergeordneten Designs, das den Stil in die Warteschlange stellt, über remove_action( $hook, $callback )
  • Verwenden Sie die CSS-Kaskade, um das Stylesheet Parent-Theme zu überschreiben , indem Sie den Aufruf wp_enqueue_style() des Child-Theme-Stylesheets in den gleichen Hook mit einer niedrigeren Priorität oder in einen späteren Hook einhängen .

    Für diese letzte Option, wenn das übergeordnete Thema Folgendes verwendet:

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

    … dann würde das Child Theme verwenden:

     `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )` 

Sie sollten immer wp_enqueue_style() , um Ihr Stylesheet zu laden, und diese functionen sollten an den wp_enqueue_scripts- Hook mit Läufen im Kopf angehängt werden . Ich vermute, dass Sie es dort nicht eingefangen haben, daher Ihr Problem. (Ab WP 3.3, wenn wp_enqueue_style() an etwas anderes wp_enqueue_style() ist, wird eine Benachrichtigung mit WP_Debug ausgegeben).

Der einzige Weg zu garantieren, dass meine Styles das letzte Wort in der Kaskade hatten, war, sie am Ende von über den wp_head-Hook einzubinden. wp_enqueue funktioniert nicht in wp_head, daher musste ich den Link direkt ansprechen:

 function gregory_enqueue_stylesheets() { $base = get_stylesheet_directory_uri(); echo ''; return; } add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 ); 

Schließlich kann ich meine Stile relativ einfach einstellen und ohne hohe Spezifitätsstufen zu verwenden oder die! wichtige Regel, die nur als letztes Mittel verwendet werden sollte.

WP benötigt ein besseres Stil-Warteschlangensystem. jeder Stil, ob eine Dateiverknüpfung oder ein Inline-Stil, sollte über den gleichen Hook übergeben werden, damit die Priorität ihre Reihenfolge bestimmen kann. Optional zu Debugging-Zwecken wäre es nützlich, wenn der Hook auch die Priority-Werte jedes Styles vielleicht in kommentierter Form ausgibt.

Aktualisieren

Ich war in der Lage, die Kontrolle über die Stile in meinem Child-Thema zu behalten, während die ursprüngliche Kaskade des Parent-Themas beibehalten wurde (das ein Hauptstil-, ein Sub-Stylesheet und einige Style-Statements verwendet), indem ich mein Stylesheet in zwei teile die Frage. Ich verwende nicht mehr den wp_head () Hook, sondern verwende den richtigen und standardmäßigen wp_enqueue_scripts () Hook mit einer hohen Ordnungszahl, um sicherzustellen, dass mein Stylesheet zuletzt geladen wird.

Das Standard-Stylesheet meines Child-Themes:

 /* Theme Name: Oenology-Gregory Template: oenology Version: 20120506-0026 */ @import url("/wp-content/themes/oenology/style.css"); 

die function zum Einreihen meines Haupt-Stylesheets:

 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 ); 

Es gibt jedoch ein paar WP-generierte Stilanweisungen (dh nicht das übergeordnete Thema), die nach meinem Stylesheet angegeben sind, und ich muss mich entweder mit CSS-Regeln mit hoher Spezifität befassen, um die Regeln, die mich betreffen, außer Kraft zu setzen oder zu suchen Haken, um sie zu deaktivieren, insbesondere die body.custom-Hintergrundregel.

Vielen Dank für Ihre Kommentare.

Prost,
Gregor