it-swarm.com.de

Grundlegendes zu untergeordneten Themenfunktionen.php

Ich habe erfolgreich ein untergeordnetes Thema für den Emmet Lite template erstellt und dabei die Informationen verwendet, die auf hier und hier angegeben sind.

Die CSS-Datei des untergeordneten Themas sieht folgendermaßen aus:

/*
Theme name: Emmet Child
Theme URI: http://www.example.com/
Description: This is a child of Emmet Lite theme
Author: Motopress
Author URI: http://www.getmotopress.com/
Template: emmet-lite
Version: 1.0
*/

/* Adjustments to the Emmet Lite template start here */

.top-header {
display: none;  
}

.site-header {
background-color: #FFC421;
}

Ich habe zuerst die Funktion @import hinzugefügt, aber das hat bei mir nicht funktioniert. Was ich gelesen habe ist, dass das übergeordnete CSS nach dem untergeordneten CSS geladen wurde, sodass das letzte CSS gewinnt. Um dem entgegenzuwirken, habe ich meinem untergeordneten Ordner einen functions.php hinzugefügt und den @import entfernt. Das sieht so aus:

<?php
function my_theme_enqueue_styles() {

$parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css'     );
wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Damit alles korrekt funktioniert, werden die Änderungen/Überschreibungen, die ich im style.css des untergeordneten Ordners vorgenommen habe, korrekt auf meine Website angewendet.

Die Situation verstehen:

Meine Frage ist:

Das übergeordnete Emmet-Thema verwendet CSS-Dateien, die anders als style.css aufgerufen werden. Die von dieser Vorlage verwendeten Namen sind ...

  • emmet-style.min.css
  • emmet-style.css

(Sie befinden sich im Themenordner, Pfad: emmet-lite/css/emmet-style.css)

Es enthält auch eine Reihe anderer Stile für Woocommerce, Buddypress und Bootstrap, aber die einzige Datei, die ich zum Bearbeiten verwende, ist emmet-style.min.css.

Ich würde gerne verstehen, was ich hier mache, auch wenn es schon funktioniert. Ich bin nicht in PHP, so dass nach meinem Verständnis diese Codezeile ein falsches CSS aufruft, aber immer noch funktioniert?

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

Die style.css sollte emmet-style.min.css sein oder ist es immer style.css, egal was passiert? Ich sehe in der Dokumentation nichts Erwähntes, wenn ich einen functions.php entwickle, in dem erwähnt wird, dass der style.css-Pfad in den richtigen CSS-Pfad geändert werden soll. Ich habe das PHP hier wahrscheinlich falsch verstanden.

Kann mir jemand helfen, genauer zu erklären, was im functions.php für untergeordnete Themen und die angegebenen Pfade vor sich geht?

3
WPasman

Was ich gelesen habe ist, dass das übergeordnete CSS nach dem untergeordneten CSS geladen wurde, sodass das letzte CSS gewinnt

Dies hängt von der Reihenfolge ab, in der der Theme-Entwickler Stylesheets lädt.

Normalerweise lädt WordPress zuerst den functions.php des untergeordneten Themas und dann den functions.php des übergeordneten Themas.

das übergeordnete Emmet-Design verwendet CSS-Dateien, die anders heißen als Style.css

Ja tut es. Der style.css im Stammordner des Themas ist nur erforderlich , damit WordPress das Thema anhand seines Headers richtig identifiziert.

style.css muss nicht in die Warteschlange gestellt werden wenn es keine anderen CSS-Eigenschaften als den Themenheader gibt.

Wir können jeden anderen Namen für die Stylesheets verwenden und sie anders laden, aber style.css mit Theme-Header muss sich im Root-Ordner befinden, um von WordPress als Theme identifiziert zu werden.

Normalerweise möchten einige Theme-Entwickler alle Stylesheets im CSS-Ordner organisieren. Dies ist auch der Fall, der vom Emmet Lite-Theme-Entwickler verwendet wird.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css'     );

sie müssen den obigen übergeordneten style.css nicht in eine Warteschlange stellen, da er keine CSS-Regeln enthält. Dies ist nur ein Overhead.

Wie funktioniert es dann jetzt?

Wenn wir uns das functions.php des übergeordneten Themas ansehen, sehen wir, dass es Stylesheets in der folgenden Reihenfolge lädt.

  • Bootstrap
  • Guss Ehrfürchtig
  • Flex Slider
  • Hauptstil (/css/emmet-style.min.css)
  • ...
  • ...
  • Schließlich Stylesheet URI (was im Grunde genommen style.css des aktiven Themas bedeutet)

Hier lädt das übergeordnete Design zuerst die erforderliche /css/emmet-style.min.css-Datei und dann den style.css. Dies ist der style.css des aktiven Designs. In Ihrem Fall muss der style.css des untergeordneten Designs nicht einmal den folgenden Code verwenden wird bereits vom übergeordneten Thema erledigt.

wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style )
);

Pfade

3
bravokeyl