11

Ich verwende das gut geschriebene Oenology-Thema von Chip Bennett als Eltern für mein eigenes Kind-Thema.

In meinem Entwicklungsprozess habe ich festgestellt, dass es für Leute, die untergeordnete Themen schreiben, einige Herausforderungen gibt, wenn es darum geht, Stile zu steuern.

Ich habe gerade festgestellt, dass meine Hauptdatei style.css vor jedem anderen Stylesheet-Link oder jeder anderen Anweisung in <head> geladen wird. Dies erklärt, warum ich Probleme hatte, einige der übergeordneten Stile zu überschreiben.

Eine weitere Untersuchung des Problems zeigt, dass verschiedene übergeordnete Stylesheets und Stile an drei Stellen im <head> in die Warteschlange gestellt 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 Hauptblatt 'style.css' enthält nur den @import url()Befehl, der zum Laden des Hauptstylesheets von Oenology erforderlich ist.

Das zweite Stylesheet würde meine untergeordneten Regeln enthalten. Um sicherzustellen, dass es nach allen anderen Regeln geladen ist , würde ich es mit in die Warteschlange stellen add_action( 'wp_head',.

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

~~Weiß übrigens jemand, was "/parent-theme/style.css ? MRPreviewRefresh = 723 " bedeutet?~~

Aktualisieren

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

Prost,
Gregory

child-theme css parent-theme Gregory
quelle

21

Nur zu Ihrer Information, diese Frage grenzt wahrscheinlich an zu lokalisierte , da sie spezifisch für das Thema Önologie ist.

Ich denke , hier haben Sie ein Problem: Die Önologie stellt zwei Stylesheets in die Warteschlange:

style.css, direkt im Dokumentenkopf (also bevor wp_head() gefeuert wird)

{varietal}.cssAn wp_enqueue_scripts, mit der 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 );

Die sortenSheet, das die „Haut“, Enqueues bei Priorität gilt 11, um sicherzustellen , dass die Basissheet style.css, Lasten ersten und die sortenSheet Lasten zweiten , um die korrekte Kaskade zu bewirken.

Wenn Sie also das Sortenstylesheet überschreiben müssen , stellen Sie einfach Ihr zweites Stylesheet nach dem Sortenstylesheet in die Warteschlange. dh mit einer Priorität von mindestens 12oder höher.

Bearbeiten

Um eine allgemeinere Antwort auf die allgemeinere Frage zu geben:

Um eine Stylesheet-Warteschlange für übergeordnete Themen zu überschreiben, müssen Sie zwei Dinge wissen:

Die Aktion Haken , an dem die Warteschlange eingereiht wird Sheet
Die Priorität, mit der der Rückruf zum Hook hinzugefügt wird

Enqueue-Funktionen ( wp_enqueue_script()/ wp_enqueue_style()) können überall zwischen dem Hook und den / Hooks ordnungsgemäß ausgeführt werden . (Der semantisch korrekte Hook, an dem Funktionen ausgeführt werden sollen, befindet sich derzeit .) Diese Liste enthält die folgenden Aktionen (unter anderem; dies sind nur die üblichen Verdächtigen):initwp_print_scriptswp_print_styleswp_enqueue_*()wp_enqueue_scripts

init
wp_head
wp_enqueue_scripts
wp_print_scripts/.wp_print_styles

(Beachten Sie, dass wp_enqueue_scripts, wp_print_stylesund wp_print_scripts alle Feuer im Innern des wp_headzu einer bestimmten Priorität .

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

Deaktivieren Sie das Stylesheet "Parent-Theme" überwp_dequeue_style( $handle )
Entfernen Sie den Rückruf des übergeordneten Themas , der den Stil in die Warteschlange stellt, überremove_action( $hook, $callback )
Verwenden Sie die CSS-Kaskade, um das Stylesheet für übergeordnete Themen zu überschreiben , indem Sie Ihren wp_enqueue_style()Aufruf für das Stylesheet für untergeordnete Themen in denselben Hook mit niedrigerer Priorität oder in einen späteren Hook einbinden .

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 untergeordnete Thema Folgendes verwenden:
```
`add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
```

Chip Bennett
quelle

Danke Chip. Ich kann in der Tat wp_enqueue_scripts und eine hohe Ordnungszahl verwenden, damit mein untergeordnetes Stylesheet zuletzt geladen wird. Es gibt jedoch noch 3 verschiedene Stilanweisungen nach meiner untergeordneten Stylesheet-Anweisung. 2 davon werden von WP selbst ausgegeben !!! und 1 wird von Oenology über die Funktion add_custom_image_header () von wp ausgegeben.

Gregory

Die Anweisung style.custom-background style wird von WP selbst ausgegeben, aber es scheint, dass ich eine benutzerdefinierte Hintergrundfarbe angeben kann, indem ich 'BACKGROUND_COLOR' definiere. seltsam, dass eine grundlegende CSS-Regel über eine benutzerdefinierte WP-Konstante festgelegt werden muss.

Gregory

1

letzter Kommentar Chip. Diese Frage ist nicht zu lokalisiert. Viele Designs verwenden alle verfügbaren Hooks, um Stile in die Warteschlange zu stellen oder zu drucken, und Entwickler von untergeordneten Designs müssen wissen, wie diese Stile überschrieben werden können, ohne sie unbedingt zu deaktivieren. Prost.

Gregory

Das Problem, das ich dabei sehe, ist, dass child_theme_enqueue_style den untergeordneten Stil mit einer höheren Priorität weiter unten im wp_head lädt, ABER das untergeordnete Stylesheet dupliziert - Wordpress lädt das untergeordnete Stylesheet automatisch mit seiner normalen Priorität und lädt es dann erneut. weiter unten mit der neuen Priorität. Während das Ergebnis des Überschreibens aller anderen Stylesheets erzielt wird, wird ein doppeltes Stylesheet auf der Seite erstellt.

PHP-B-Grader

2

Die einzige Möglichkeit, um sicherzustellen, dass meine Stile das letzte Wort in der Kaskade hatten, bestand darin, sie am Ende von <head> über den Hook wp_head einzufügen. wp_enqueue funktioniert nicht in wp_head, daher musste ich den Link direkt wiederholen:

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

~~Schließlich kann ich meine Stile relativ einfach einstellen, ohne ein hohes Maß an Spezifität oder die! wichtige Regel zu verwenden, die nur als letztes Mittel verwendet werden sollte.~~

WP benötigt ein besseres Warteschlangensystem. Jeder Stil, ob ein Dateilink oder ein Inline-Stil, sollte durch denselben Hook geleitet werden, damit die Priorität ihre Reihenfolge bestimmen kann. Optional für Debugging-Zwecke wäre es nützlich, wenn der Hook auch die Prioritätswerte jedes Stils möglicherweise in kommentierter Form ausgibt.

Aktualisieren

Ich konnte die Kontrolle über die Stile in meinem untergeordneten Thema behalten, während ich die ursprüngliche Kaskade des übergeordneten Themas (das ein Haupt-Stylesheet, ein Unter-Stylesheet und einige Stilanweisungen verwendet) beibehalten habe, indem ich mein Stylesheet in zwei Teile geteilt habe, wie in erläutert die Frage. Ich verwende nicht mehr den Hook wp_head (), sondern den richtigen und standardmäßigen Hook wp_enqueue_scripts () mit einer hohen Ordnungszahl, um sicherzustellen, dass mein Stylesheet zuletzt geladen wird.

Das Standard-Stylesheet meines untergeordneten Themas:

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

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

die Funktion 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 einige WP-generierte Stilanweisungen (dh nicht das übergeordnete Thema), die nach meinem Stylesheet angegeben werden, und ich muss entweder CSS-Regeln mit hoher Spezifität verwenden, um die mich betreffenden Regeln zu überschreiben oder zu suchen Hooks, um sie zu deaktivieren, insbesondere die body.custom-background-Regel.

Vielen Dank für Ihre Kommentare.

Prost,
Gregory

Gregory
quelle

1

Sie sollten immer verwenden wp_enqueue_style(), um Ihr Stylesheet zu laden, und diese Funktionen sollten mit Läufen im Kopf an den Hook wp_enqueue_scripts angehängt werden . Ich vermute, dass Sie es dort nicht angeschlossen haben, daher Ihr Problem. (Ab WP 3.3 wird bei aktiviertem WP_Debug eine Benachrichtigung ausgegeben , wenn eine Verbindung zu etwas anderem besteht.)wp_enqueue_style()

mrwweb
quelle

@ Chips Antwort ist besser als meine und er ist wohl qualifizierter, um das Thema Önologie zu diskutieren;) Ist dies ein Fall, in dem ich meine Antwort löschen sollte, obwohl sie richtig ist?

Mrwweb

Nein, ich würde deine Antwort hinterlassen. Es ist richtig und spricht einen bestimmten Teil der Frage an.

Chip Bennett

Wie stelle ich meine untergeordneten Stylesheets * nach * jedem übergeordneten Stylesheet / jeder übergeordneten Anweisung in die Warteschlange?

Aktualisieren

Antworten:

Bearbeiten

Aktualisieren