So laden Sie für eine Seite spezifische Skripte / Stile

Ich weiß, dass laut Standard-Wordpress-Boot-Prozess zuerst functions.phpaufgerufen wird, danach geht alles Thema Zeug. Aber ich werde mein Thema derzeit komplett überarbeiten, um es zu optimieren. Meine Idee ist es, eine Basis-CSS-Datei für allgemeine Eigenschaften, Normalisierung und Farben zu haben. Oder um eine einzelne CSS-Datei zu behalten, aber in diesem Fall muss ich die Umschalttaste fest codieren, functions.phpum die Seite zu bestimmen. Und eine weitere, die für jede Seite spezifisch ist, da dies keinen Sinn macht, eine große CSS-Stildatei mit allen definierten Stilen zu laden.

Meine Frage ist also, wo man am besten ein bestimmtes Skript / einen bestimmten Stil laden kann.

Sollte es header-xxx.phpoder eine andere Datei sein? Vielleicht gibt es eine Möglichkeit, diese Idee skalierbarer und eleganter umzusetzen?

Ich wäre für jede Hilfe dankbar.

Es hängt alles vom Umfang Ihrer Anpassungen ab und davon, wie Sie Ihre Inhalte organisieren. Es gibt jedoch zwei Möglichkeiten, dies zu tun. functions.php und Vorlagendateien

Die Art und Weise, wie ich es mache, ist , alle meine Skripte / Stile in functions.php zu registrieren, damit ich weiß, womit ich arbeiten werde, aber ich werde nur das einreihen , was ich brauche, wenn ich es brauche.

Sie können alle Ihre Inhalte unter bestimmten Bedingungen in Ihre Datei functions.php ( if( is_page( 'blah') { //... enqueue stuff }) einreihen oder Sie können Vorlagendateien verwenden , um bestimmte Kategorien / Tags / Beiträge / Seiten usw. zu formatieren .

Innerhalb dieser Vorlagendatei rufen Sie dort Ihre Enqueue- Skript- / Stildateien auf. Das macht es auch neet Weg zu verstehen, was wo geladen wird.

Aber auf jeden Fall müssen Sie verwenden, wenn Sie Ihr Stylesheet in kleinere Dateien aufteilen möchten

• wp_register_style
• wp_enqueue_style

Die gleiche Logik Skript gelten würde mit entsprechenden Register / enqueue Funktionen

Berücksichtigen Sie auch die Anzahl der Anforderungen in Ihrer Strategie. Wenn Sie Ihre Daten in mehrere Dateien aufteilen, versuchen Sie, die Anzahl der geladenen Dateien niedrig zu halten, damit Sie das Laden der Seite auf diese Weise nicht negativ beeinflussen.

Sie können noch etwas tun, um das Laden der Seite zu beschleunigen. Wenn Sie den Browser anweisen, Ihre Stylesheets zwischenzuspeichern, hat möglicherweise 1 (oder einige wenige) mehr Chancen, aus dem Cache geladen zu werden, als wenn Sie mehrere Dateien auf Ihrer Website haben und diese immer vom Server abgerufen werden müssen, weil dies der Fall ist Eine neue Dateianforderung für jede neue Seite, die geladen wird. Denken Sie also daran.

Unabhängig davon ist das Zwischenspeichern von 1 oder vielen Assets ein guter Ansatz und erhöht die Reaktionsfähigkeit Ihrer Website in Bezug auf die Geschwindigkeit der Website.

Wenn Sie weitere Anleitungen zur Verwendung dieser Funktionen benötigen, lassen Sie es uns einfach wissen.

BEARBEITEN

Die Hauptgründe für die Registrierung von Skripten sind folgende

• Erleichtert das Aufrufen eines Skripts / Stils, wenn wir es benötigen
• Ermöglicht die Verwendung eines registrierten Skripts / Stils als Abhängigkeit für eine zu ladende Datei.
• Verhindern Sie, dass wir denselben Code mehr als nötig schreiben, um unseren Code effektiv zu vereinfachen
• Weitere Dinge, an die ich momentan vielleicht nicht denke

HINWEIS

Ein Skript / Stil, der registriert wurde, muss nicht in die Warteschlange gestellt werden, wenn er als eine $depsder Dateien aufgeführt ist, die Sie gerade in die Warteschlange stellen.

Ein Beispiel (nicht unbedingt, wie Sie es tun sollten, aber damit Sie den Zweck verstehen)

Ich habe mich registriert

• common-style.css
• navigation.css
• button.css

Jetzt sind diese Stile registriert. Wenn ich also auf eine bestimmte Seite gehe und dort ein anderes Styling anwenden möchte. Ich stelle mich auf dieser Seite in die Warteschlange (entweder durch eine bedingte Anweisung in functions.php oder in meiner Seitenvorlage) specific-style.css.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Beachten Sie, dass das Array in wp_enqueue_styleein Array der Handles bereits registrierter Stile ist. WP lädt bequemerweise alle 4 Dateien in der richtigen Reihenfolge, um die Abhängigkeit zu berücksichtigen.

Sie können die Abhängigkeit kaskadieren, indem Sie einfach jedes Skript / jeden Stil mit der richtigen Abhängigkeit registrieren

dh button.css hängt von navigation.css ab , die von common-style.css abhängt

Wenn ich mich unter Berücksichtigung dieser Logik registriere, muss ich nur die Datei "Style -CSS" mit " Butts.css" als Abhängigkeit in die Warteschlange stellen, und WP verkettet das Laden in einer Reihe, um die Reihenfolge einzuhalten .

Sie könnten sicherlich eine Bedingung erfüllen, um zu überprüfen, auf welcher Seite sich jemand befindet, und ein bestimmtes Stylesheet für jede Seite in die Warteschlange stellen. Möglicherweise ist es jedoch besser, die Seite mit CSS auszurichten.

Stellen Sie in Ihrer Datei header.php sicher, dass sich die body_classFunktion wie folgt im body-Tag befindet:

<body <?php body_class(); ?>>

Dadurch werden Klassen in das Body-Tag eingefügt, mit denen Sie bestimmte Funktionen der Seite als Ziel festlegen können.

Wenn ich beispielsweise möchte, dass das H1 auf einer bestimmten Seite rot ist, kann ich Folgendes tun:

body.page-id-12 h1 {
    color: #ff0000;
}

Auf der Seite mit der ID 12 würde dieser Stil angewendet.

Um auf eine bestimmte Seitenvorlage abzuzielen, haben Sie folgende Möglichkeiten:

body.page-template-template-about h1 {
    color: #ff0000;
}

Das würde auf Seiten mit der angewendeten "Über" -Vorlage abzielen. Schauen Sie sich einfach die Klassen im Body-Tag auf der Seite an, die Sie stylen möchten.

Wenn Sie jedoch weiterhin ein bestimmtes Stylesheet für eine bestimmte Seite in die Warteschlange stellen möchten, können Sie dies tun:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );

" Refactor ", " Optimieren ", " Skalierbar ", " Elegant ". Große Sorgen! Du bist auf dem richtigen Weg. Das Aufteilen einer CSS-Datei in mehrere Dateien ist jedoch nicht die Antwort auf diese Bedenken. Hier ist der Grund:

Browser zwischenspeichern CSS-Dateien. Sobald die erste Seite geladen ist, fordert der Browser nicht mehr dieselbe CSS-Datei für die nächste Seite an. Ja, das Laden der ersten Seite erfolgt geringfügig und unmerklich langsamer. Aber der Rest der Seiten wird davon profitieren.

Weniger Anfragen sind eine der wichtigsten Möglichkeiten, um die Geschwindigkeit der Website zu optimieren . (siehe Steve Souders oder diesen Artikel ).

Eine weitere Optimierung besteht darin, Ihr CSS zu minimieren . (Siehe Google PageSpeed-Beitrag .) Vielen Dank an @bynicolas für den Vorschlag.

Sicher können Sie sagen, aber was ist mit Eleganz ? Hier sind die guten Nachrichten: Sass und WENIGER . Mit ihnen können Sie weniger Code schreiben, ihn in mehrere Dateien aufteilen, die zu einer CSS-Datei kompiliert werden, und vieles mehr.