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

css child-theme

— Dharkov
quelle

Wie fügst du die style.css deines untergeordneten Themas hinzu?

— Milo

Ich benutze das System, das WordPress in diesem Beitrag empfiehlt

— Dharkov

Es sieht so aus, als würde Ihr untergeordnetes Theme-Stylesheet sehr früh geladen. Stellen Sie es in die Warteschlange oder fügen Sie das Link-Tag direkt zum Header hinzu? Es sollte in die Warteschlange gestellt werden, damit es nach dem übergeordneten Stylesheet angezeigt wird, damit Sie dieselben CSS-Selektoren verwenden können, um das übergeordnete Stylesheet ohne! wichtige oder höhere Spezifität zu überschreiben. siehe Rambillos Antwort unten.

— Milo

Antworten:

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.

— Rambillo
quelle

Vielen Dank, das neue Array funktioniert perfekt und es ist auch sauberer und klarer.

— Dharkov

funktioniert immer noch nicht .. so komisch. 40 Minuten und 20 Tutorials mindestens zum Thema 21. Stile können nicht überschrieben werden. body, select { color: red !important; font-size:200% !important; }

— Roberthuttinger

Gehen Sie voran und posten Sie einen Codepen, und wir werden einen Blick darauf werfen.

— Rambillo

Der PHP_INT_MAX hat es in meinem Fall gelöst. Es zwingt das CSS des Kindes, nach dem des Elternteils geladen zu werden.

— MefiX

roberthuttinger hast du dieses problem jemals gelöst?

— gjnave

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

— Henrik Erlandsson
quelle

Mir scheint, dass dies die richtige Antwort ist, da das Wordpress-Framework korrekt verwendet wird, ohne dass etwas erzwungen wird.

— Quasi

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

— Twodogstar
quelle