Untergeordnete Themen CSS-Prioritätsprobleme ohne Verwendung von! Wichtig

Ich habe meine WordPress-Site geändert, um untergeordnete Themen zu verwenden, aber der Stil der übergeordneten Themen hat Vorrang vor allen Änderungen, die ich am CSS für untergeordnete Themen vornehme. Ich kann es mit umgehen !important, dies ist jedoch eine uneinheitliche Lösung, und die untergeordneten Themen sollten als erste Ressource der Site fungieren.

Auf meiner Website hat der Rahmen , der .wp-captiondas !importantTag enthält, beispielsweise dieselbe Farbe wie der Hintergrund, der das Tag verwendet, funktioniert jedoch ohne dieses nicht.

Hat das 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' );
}

Versuchen Sie, das CSS Ihres untergeordneten Themas wie folgt in die Warteschlange zu stellen:

// 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 einige Dinge:

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

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

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

3) gefolgt davon array( 'parent-style' ), dass das untergeordnete CSS das übergeordnete CSS als Abhängigkeit hat, was dazu führt, dass das übergeordnete Thema an erster Stelle im Kopf steht und das untergeordnete Thema CSS darauf folgt. Aus diesem Grund überschreibt alles, was auch im untergeordneten Thema angezeigt wird, das sich bereits im übergeordneten Thema befindet, die Version des übergeordneten Themas.

TLDR-Antwort: Der erste Parameter von jedem wp_enqueue_style()sollte nicht als "Elternstil" und "Kinderstil" belassen werden. Sie sollten umbenannt werden , 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 Werte in der falschen geändert werden, was keine offensichtlichen Auswirkungen hat. Dies kann Sie dazu verleiten, zu glauben, dass Ihre untergeordneten Regeln dies nicht tun. t Überschreiben Sie das übergeordnete Element.

Die Erwartung

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

Lösung

Benennen Sie die Parameter um. Ich mache es wie folgt , um (ein wenig) mehr Kontrolle zu bekommen. Beachten Sie , dass Sie zwanzigundzwanzig und sechsundzwanzig Kinder durch die Namen Ihres Themas und Kinderthemas ersetzen sollten :

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 danach verknüpft.)

Viel Spaß beim Selektorjagen;)

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

Also statt:

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

Verwenden:

.eintrag .wp-beschriftung {
     Hintergrund: # 2d2d2d;
}}

Sie sollten auch sicherstellen, dass Sie Ihr untergeordnetes Design-Stylesheet in Ihre Datei functions.php einreihen, wenn Sie dies noch nicht getan haben.

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