Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nerdies24/da8abf0be7a45543b553c59129a82f96 to your computer and use it in GitHub Desktop.
Save Nerdies24/da8abf0be7a45543b553c59129a82f96 to your computer and use it in GitHub Desktop.
Javascript in einem WordPress Plugin richtig laden

Eine Javascript Datei aus einem Plugin Ordner laden

function enqueue_my_javascript() {
    wp_enqueue_script( 'my-javascript', plugin_dir_url( __FILE__ ) . 'js/my-javascript.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_javascript' );

Dieser Code fügt ein JavaScript-Skript namens "my-javascript" in das Frontend einer WordPress-Seite ein. Hierbei wird die Funktion "wp_enqueue_script" verwendet, um das Skript zu registrieren und einzufügen.

Die Funktion "wp_enqueue_scripts" ist ein WordPress-Hook, der aufgerufen wird, wenn WordPress die Skripte für das Frontend einer Seite laden will. Durch das Hinzufügen der Funktion "enqueue_my_javascript" als Action für den Hook wird sichergestellt, dass das Skript geladen wird, wenn der Hook aufgerufen wird.

Die Argumente der Funktion "wp_enqueue_script" sind wie folgt:

  1. $handle: Ein eindeutiger Bezeichner für das Skript.
  2. $src: Der Pfad zu dem Skript, das eingefügt werden soll. In diesem Fall wird das Skript aus dem Ordner "js" im Plugin-Verzeichnis geladen.
  3. $deps: Ein Array von Abhängigkeiten, d.h. von anderen Skripten, von denen das Skript abhängt. In diesem Fall gibt es keine Abhängigkeiten, daher ist das Array leer.
  4. $ver: Die Versionsnummer des Skripts.
  5. $in_footer: Ein boolescher Wert, der angibt, ob das Skript im Footer der Seite oder im Kopf eingefügt werden soll. Wenn der Wert "true" ist, wird das Skript im Footer eingefügt, andernfalls im Kopf.

Eine Javascript Datei aus einem Plugin Ordner mit jquery Abhängigkeit laden

function enqueue_my_javascript() {
    wp_enqueue_script( 'my-javascript', plugin_dir_url( __FILE__ ) . 'js/my-javascript.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_javascript' );

Dieser Code fügt das Skript "my-javascript" wie zuvor ein, aber fügt auch jQuery als Abhängigkeit hinzu. Dies bedeutet, dass jQuery vor dem Skript "my-javascript" geladen werden muss. Die Funktion "wp_enqueue_script" nimmt als dritte Übergabeparameter ein Array von Abhängigkeiten an.

WordPress enthält bereits jQuery, daher muss es nicht explizit registriert werden. Sie können das Skript einfach als Abhängigkeit hinzufügen und WordPress wird sich darum kümmern, dass es geladen wird.

Eine Javascript Datei aus einem Plugin Ordner für eine bestimmte Seite laden

function enqueue_my_javascript() {
    if ( is_page( 'bezeichnung-der-seite' ) ) {
        wp_enqueue_script( 'my-javascript', plugin_dir_url( __FILE__ ) . 'js/my-javascript.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_javascript' );

Dieser Code prüft, ob die aktuelle Seite die Bezeichnung "bezeichnung-der-seite" hat, und lädt das Skript nur dann, wenn dies der Fall ist. Die Funktion "is_page" gibt true zurück, wenn die aktuelle Seite eine Seite mit der angegebenen Bezeichnung ist.

Sie können auch andere Bedingungen verwenden, um das Skript auf bestimmten Seiten zu laden. Zum Beispiel könnten Sie die Funktion "is_single" verwenden, um das Skript nur auf Einzelschlagseiten zu laden, oder "is_home" um das Skript nur auf der Startseite zu laden.

Eine Javascript Datei aus einem Plugin Ordner für nur 1 bestimmte ID laden

function enqueue_my_javascript() {
    if ( is_page( 123 ) ) {
        wp_enqueue_script( 'my-javascript', plugin_dir_url( __FILE__ ) . 'js/my-javascript.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_javascript' );

Dieser Code prüft, ob die aktuelle Seite die ID 123 hat und lädt das Skript nur dann, wenn dies der Fall ist. Die Funktion "is_page" nimmt auch eine einzelne Seiten-ID an.

Sie können auch die globale WordPress-Variable "$post" verwenden, um die ID der aktuellen Seite zu überprüfen:

function enqueue_my_javascript() {
    global $post;
    if ( $post->ID == 123 ) {
        wp_enqueue_script( 'my-javascript', plugin_dir_url( __FILE__ ) . 'js/my-javascript.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_javascript' );

Eine Javascript Datei aus einem Plugin Ordner für mehrere ID's laden

function enqueue_my_javascript() {
    if ( is_page( array( 123, 456, 789 ) ) ) {
        wp_enqueue_script( 'my-javascript', plugin_dir_url( __FILE__ ) . 'js/my-javascript.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_javascript' );

Dieser Code prüft, ob die aktuelle Seite eine der angegebenen IDs hat (123, 456 oder 789) und lädt das Skript nur dann, wenn dies der Fall ist. Die Funktion "is_page" nimmt auch ein Array von Seiten-IDs an.

Sie können auch die globale WordPress-Variable "$post" verwenden, um die ID der aktuellen Seite zu überprüfen:

function enqueue_my_javascript() {
    global $post;
    if ( $post->ID == 123 || $post->ID == 456 || $post->ID == 789 ) {
        wp_enqueue_script( 'my-javascript', plugin_dir_url( __FILE__ ) . 'js/my-javascript.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_javascript' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment