it-swarm.com.de

Laden von Skripten/Stilen, die für eine Seite spezifisch sind

Ich weiß, dass nach Standard Wordpress-Boot-Prozess zunächst functions.php aufgerufen 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 den Switch-Fall in functions.php fest codieren, um 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, was der beste Ort ist, um bestimmte Skripte/Stile zu laden?

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

Für jede Hilfe wäre ich dankbar.

7
CROSP

Es hängt alles vom Umfang Ihrer Anpassungen ab und davon, wie Sie Ihre Sachen organisieren. Dafür gibt es zwei Hauptmethoden.functions.phpundVorlagendateien

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

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

In dieser Vorlagendatei rufen Sie dann Ihre enqueue script/style-Dateien auf. Das macht es auch neet möglich zu verstehen, was wo geladen wird.

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

Die gleiche Logik gilt für Skripte mit den entsprechenden Funktionen register/enqueue

Berücksichtigen Sie auch die Anzahl der Anforderungen in Ihrer Strategie. Wenn Sie Ihre Inhalte in mehrere Dateien aufteilen, versuchen Sie, die Anzahl der geladenen Dateien so gering wie möglich zu halten, damit das Laden der Seite nicht negativ beeinflusst wird.

Es gibt noch eine andere Möglichkeit, das Laden von Seiten zu beschleunigen. Wenn Sie dem Browser anweisen, Ihre Stylesheets im Cache zu speichern, kann 1 (oder einige wenige) möglicherweise mehr aus dem Cache geladen werden, als wenn Sie mehrere Dateien auf Ihrer Website haben und diese immer vom Server abrufen müssen, da dies der Fall ist eine neue Dateianforderung auf jeder neuen Seite, die geladen wird. Denken Sie also daran.

Unabhängig davon ist das Zwischenspeichern von einem oder mehreren Assets ein guter Ansatz und erhöht die Reaktionsgeschwindigkeit Ihrer Website.

Wenn Sie weitere Anleitungen zur Verwendung dieser Funktionen benötigen, teilen Sie uns dies einfach mit.

EDIT

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 den gleichen Code mehr schreiben, als wir müssen, und vereinfachen Sie unseren Code effektiv
  • Weitere Dinge, an die ich momentan vielleicht nicht denke

HINWEIS

Ein registriertes Skript/Format muss nicht in die Warteschlange gestellt werden, wenn es als $deps der Datei 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
  • buttons.css

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

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_style ein 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 Abhängigkeiten kaskadieren, indem Sie einfach jedes Skript/jeden Stil mit der richtigen Abhängigkeit registrieren

d. h. buttons.css hängt ab von navigation.css hängt ab von common-style.css

Wenn ich mich unter Berücksichtigung dieser Logik registriere, muss ich nur specific-style.css mit buttons.css als Abhängigkeit einreihen, und WP verkettet die Laden, um die Bestellung zu respektieren.

8
bynicolas

" Refaktor ", " Optimieren ", " Skalierbar ", " Elegant ". Große Sorgen! Du bist auf dem richtigen Weg. Das Aufteilen einer CSS-Datei in mehrere 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, der Ladevorgang der ersten Seite wird geringfügig, unbemerkt langsamer. Aber der Rest der Seiten wird davon profitieren.

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

Eine weitere Optimierung besteht darin, minify Ihr CSS. (siehe Google PageSpeed ​​post .) Danke @bynicolas für den Vorschlag.

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

3
zendka

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 einreihen, aber Sie sollten die Seite besser mit CSS ausrichten.

Stellen Sie in Ihrer header.php-Datei sicher, dass sich die body_class -Funktion im body-Tag befindet:

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

Dadurch werden Klassen in das Body-Tag eingefügt, mit dem Sie auf bestimmte Features der Seite abzielen können.

Wenn ich zum Beispiel möchte, dass der 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.

Sie können Folgendes tun, um eine bestimmte Seitenvorlage als Ziel festzulegen:

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

Das würde Seiten mit der "about" -Vorlage betreffen. Schauen Sie sich einfach die Klassen im Body-Tag auf der Seite an, die Sie formatieren möchten.

Wenn Sie dennoch ein bestimmtes Stylesheet für eine bestimmte Seite einreihen 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' );
2
Nate Allen