Standardmethode zum Einbinden von JavaScript und CSS in WordPress

Wenn Sie ein WordPress-Entwickler sind, haben Sie von Wörtern wie wp_enqueue_script, wp_enqueue_style und wp_enqueue_scripts gehört. Dies sind die Methoden, die wir verwenden sollten, um JavaScript und CSS in WordPress einzubinden.

Wenn es um WordPress geht, sollte man keine Skript- und Link-Tags verwenden, um JavaScript- und CSS-Dateien hinzuzufügen.

Vorteile der Verwendung von Standardmethoden

Für eine Website ist es üblich, verschiedene Arten von Effekten und Animationen zu verwenden, um die Benutzererfahrung zu verbessern. Es gibt viele fertige Plugins im Internet, die es uns ermöglichen, Slider, Kontaktformulare, Karussells usw. in Ihre Website einzufügen. Wenn wir diese externen Ressourcen verwenden, müssen wir die von ihnen bereitgestellten JS- und CSS-Dateien verwenden. Durch die Verwendung der von WordPress bereitgestellten Methoden können wir Seiten steuern, auf denen solche Plugins nur verwendet werden können. Wenn wir beispielsweise Slider auf der Startseite anzeigen, müssen die JS- und CSS-Dateien von Slider nicht auf einer anderen Seite eingefügt werden. Es empfiehlt sich immer, JS und CSS nur bei Bedarf einzubinden. Dies ist eine bewährte Vorgehensweise, mit der die Leistung der Website verbessert und das Laden unserer Website beschleunigt wurde.

Tatsächlicher Code zum Einbinden von JavaScript und CSS

Nehmen wir an, wir haben custom.js- und custom.css-Dateien, die unserer Site hinzugefügt werden müssen. Dazu müssen wir den folgenden Code platzieren.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Hinweis: Der 3. Parameter in der Funktion wp_register_script. Wir haben array(‘jquery’) übergeben, was bedeutet, dass unsere custom.js von der Datei jquery.js abhängig ist. Sie können hier ein emapy-Array erstellen, wenn Ihr Skript keine Abhängigkeiten hat.

Der letzte Parameter ist auf true gesetzt, was bedeutet, dass die Datei custom.js in eine Fußzeile eingefügt wird (vor dem Ende des Body-Tags).

Parametererklärung für die Funktion wp_register_script()()

$handle (Erforderlich): Name des Skripts. Sollte einzigartig sein.
$src (erforderlich): Vollständige URL des Skripts oder Pfad des Skripts relativ zum WordPress-Stammverzeichnis.
$deps (Optional): Ein Array registrierter Skript-Handles, von denen dieses Skript abhängt.
Standardwert: array()
$ver (Optional): String, der die Versionsnummer des Skripts angibt, falls vorhanden, die der URL als Abfragestring für Cache-Busting-Zwecke hinzugefügt wird. Wenn version auf false gesetzt ist, wird automatisch eine Versionsnummer hinzugefügt, die der aktuell installierten WordPress-Version entspricht. Wenn auf null gesetzt, wird keine Version hinzugefügt. Der Standardwert ist false
$in_footer (Optional): Ob das Skript vor dem Schließen des body-Tags in die Warteschlange eingereiht werden soll, anstatt im Kopf. Standardwert ‘false’.

Parametererklärung für die Funktion wp_register_style()()

$handle (Erforderlich): Name des Stylesheets. Sollte einzigartig sein.
$src (erforderlich): Vollständige URL des Stylesheets oder Pfad des Stylesheets relativ zum WordPress-Stammverzeichnis.
$deps (Optional): Ein Array registrierter Stylesheets behandelt dieses Stylesheet, von dem es abhängt.
Standardwert: array()
$ver (Optional): String, der die Stylesheet-Versionsnummer angibt, falls vorhanden, die der URL als Abfragestring für Cache-Busting-Zwecke hinzugefügt wird. Wenn version auf false gesetzt ist, wird automatisch eine Versionsnummer hinzugefügt, die der aktuell installierten WordPress-Version entspricht. Wenn auf null gesetzt, wird keine Version hinzugefügt. Standardwert: false
$media(Optional): Das Medium, für das dieses Stylesheet definiert wurde. Akzeptiert Medientypen wie "Alle", "Drucken" und "Bildschirm" oder Medienabfragen wie "(Ausrichtung: Hochformat)" und "(max-Breite: 640px)". Standardwert: ‘alle’.

Es geht darum, wie man JavaScript und CSS in WordPress einbindet. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte unten Kommentare.