Zusätzliche Javascript Datei in einem Child Theme laden

Zusätzliche Javascript Datei in einem Child Theme laden.md

1. Eine zusätzliche Javascript Datei in einem Child Theme laden

In diesem Beispiel wird die Datei my-script.js aus dem js-Ordner im Root-Verzeichnis des Child-Themes geladen und die Ausführung in den Footer gelegt.

function my_child_theme_scripts() {
    wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

---

2. Eine zusätzliche Javascript Datei mit jQuery Abhängigkeit in einem Child Theme laden

In diesem Beispiel wird die Datei my-script.js aus dem js-Ordner im Root-Verzeichnis des Child-Themes geladen und die Ausführung in den Footer gelegt. Die Abhängigkeit jquery wird als Argument angegeben, so dass WordPress weiß, dass es jQuery vor my-script.js laden muss. Es ist wichtig zu beachten, dass WordPress jQuery bereits als Standardbibliothek einbindet, Sie müssen also in der Regel keine zusätzliche jQuery-Bibliothek hochladen.

function my_child_theme_scripts() {
    wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

---

3. Eine zusätzliche Javascript Datei mit mehreren Abhängigkeiten in einem Child Theme laden

Sie können auch mehrere Abhängigkeiten angeben, indem Sie sie als Array übergeben. Achten Sie darauf, dass die Abhängigkeiten in der richtigen Reihenfolge geladen werden, da es sonst zu Fehlern oder Problemen kommen kann.

function my_child_theme_scripts() {
    wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array( 'jquery', 'other-dependency-handle' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

---

4. Eine zusätzliche Javascript Datei für nur eine bestimmte ID in einem Child Theme laden

In diesem Beispiel wird die Datei my-script.js aus dem js-Ordner im Root-Verzeichnis des Child-Themes nur für die ID 123 geladen und die Ausführung in den Footer gelegt.

function my_child_theme_scripts() {
    if ( is_page(123) ) {
        wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

---

5. Eine zusätzliche Javascript Datei für mehrere bestimmte ID`s in einem Child Theme laden

In diesem Beispiel wird die Datei my-script.js aus dem js-Ordner im Root-Verzeichnis des Child-Themes nur für die ID 123, 456, 789 geladen und die Ausführung in den Footer gelegt.

function my_child_theme_scripts() {
    if ( is_page( array( 123, 456, 789 ) ) ) {
        wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

---

6. Mehrere Javascript Dateien in einem Child Theme laden

In diesem Beispiel werden drei JavaScript-Dateien namens "script1.js", "script2.js" und "script3.js" aus dem Unterordner "js" des Child Themes geladen und die Ausführung, mit der Versionsnummer 1.0.0, ohne Abhängigkeiten in den Footer gelegt.

function child_theme_scripts() {
   wp_enqueue_script( 'script1', get_stylesheet_directory_uri() . '/js/script1.js', array(), '1.0.0', true );
   wp_enqueue_script( 'script2', get_stylesheet_directory_uri() . '/js/script2.js', array(), '1.0.0', true );
   wp_enqueue_script( 'script3', get_stylesheet_directory_uri() . '/js/script3.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );