it-swarm.com.de

Untergeordnete Themen CSS-Prioritätsprobleme ohne! Important

Ich habe meine WordPress-Site so geändert, dass untergeordnete Themen verwendet werden. Der Stil des übergeordneten Themas hat jedoch Vorrang vor allen Änderungen, die ich am CSS des untergeordneten Themas vornehme. Ich kann es mit !important umgehen, dies ist jedoch eine lückenhafte Lösung, und die untergeordneten Themen sollten als erste Ressource der Site fungieren.

Beispiel: In Meine Website hat der Rahmen, der .wp-caption enthält, die gleiche Farbe wie der Hintergrund mit dem Tag !important, funktioniert jedoch nicht ohne diesen.

Hat dies mit der Datei functions.php zu tun?

Dies ist der Inhalt meiner PHP Datei:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
7
Dharkov

Versuchen Sie, das CSS Ihres Kinderthemas so einzuordnen:

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Beachten Sie ein paar Dinge:

1) PHP_INT_MAX als Priorität, damit dies zuletzt ausgeführt wird

2) get_stylesheet_directory_uri () vs. get_template_directory_uri (), der auf den Vorlagenordner des untergeordneten Themas anstelle der übergeordneten verweist.

Ich habe dort auch einen Unterordner /styles/ hinzugefügt, da ich mein CSS normalerweise in einem Unterordner meines Themas behalte.

3) gefolgt von array( 'parent-style' ), damit das untergeordnete CSS das übergeordnete CSS als Abhängigkeit hat, wodurch das übergeordnete Thema an erster Stelle im Kopf und das darauf folgende untergeordnete Thema an erster Stelle steht. Aus diesem Grund wird die Version des übergeordneten Themas überschrieben, wenn das untergeordnete Thema bereits übergeordnet ist.

15
rambillo

TLDR-Antwort: Der erste Parameter jeder wp_enqueue_style() sollte nicht als 'parent-style' und 'child-style' belassen werden. Sie solltenumbenanntlauten, um dem Namen des übergeordneten Themas und seines untergeordneten Themas zu entsprechen.

Problem

Wenn Sie die Parameter nicht umbenennen, wird das untergeordnete Thema ein zweites Mal in die Warteschlange gestellt. Dies kann dazu führen, dass Regeln in Firebug zweimal angezeigt werden und falsche Werte geändert werden, ohne dass dies erkennbar ist. t Übergeordnetes Element überschreiben.

Die Erwartung

Auf der Seite Codex für untergeordnete Themen wird korrekt angegeben, dass das untergeordnete CSS automatisch verknüpft wird, wenn Sie nichts unternehmen. Es tut, aber nur das. Der CSS-Workflow ist etwas anders: Sie möchten ihn überschreiben, nicht ersetzen. Es ist logisch (es funktioniert wie die anderen Themendateien), aber sie könnten eine Notiz gehabt haben.

Lösung

Benennen Sie die Parameter um. Ich mache es wie folgt, um (ein bisschen) mehr Kontrolle zu bekommen, note dass Sie einundzwanzig und einundzwanzigundzwanzig-Kind durch die Namen Ihres Themas und Kindes ersetzen sollten Thema:

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(Beachten Sie auch, dass Sie in dieser Aktion nicht die Kontrolle über die Verknüpfungsreihenfolge einiger (aller?) WP Plugins erhalten. Sie werden anschließend verknüpft.)

Fröhliche Selektorjagd;)

1

Sie können im CSS Ihres untergeordneten Themas einen spezifischeren Selektor verwenden, damit dieser Vorrang hat.

Also statt:

 
. wp-caption {
 Hintergrund: # 2d2d2d! wichtig; 
} 
 

Benutzen:

 
. Eintrag .wp-caption {
 Hintergrund: # 2d2d2d; 
} 
 

Sie sollten auch sicherstellen, dass Sie Ihr untergeordnetes Design-Stylesheet in Ihrer functions.php-Datei in eine Warteschlange einreihen, falls dies noch nicht geschehen ist.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

0
Twodogstar