Integriert man eigene Javascript- oder CSS – Dateien via “Hardcoding” in den Head-Bereich seiner WordPress-Website, riskiert man nicht nur ungewollte doppelte Script-Aufrufe. Technische Konflikte sind hier buchstäblich vorprogrammiert. Wie man sauber eigene Scripts und Dateien einbindet, erklären wir in diesem Beitrag.

In WordPress existieren interessante Funktionen, die man nutzen sollte, um eigene Dateien einzubinden. Dank dieser Funktionen werden eigene Scripts sauber und sicher eingebunden und zugleich lassen sich Mehrfach-Aufrufe vermeiden (Umgehen von Konflikten und erhöhte Performance).

Gerade Entwickler von WordPress – Plugins sollten imperativ die folgende Vorgehensweise wählen, um Konflikte mit anderen Plugins zu vermeiden. Oder was glauben Sie geschieht wenn jeder Entwickler sein Plugin mit “seiner eigenen” JQUERY-Version mitliefert und entsprechend ausgeben lässt?

Der Code-Schnipsel für die Datei “functions.php” im eigenen WordPress – Theme

Folgenden Code müssen Sie (angepasst natürlich) in die “functions.php”-Datei Ihres WordPress-Theme Ordners setzen.
Eine abgewandelte Form zur Einbindung von CSS-Dateien finden Sie weiter unten. Doch eins nach dem anderen.

add_action( 'wp_print_scripts', 'add_my_scripts', 100 );
function add_my_scripts() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ( 'http://www.PFAD-ZUR-EIGENEN-JQUERY-DATEI.com' ), false, null, true );
wp_enqueue_script( 'jquery' );
wp_register_script( 'eigenes-script', 'http://www.EIGENES-SCRIPT.com');
wp_enqueue_script( 'eigenes-script' );
} }
add_action('init', 'add_my_scripts');

Die Erklärung / Funktionsweise

“add_action” zur Nutzung von Conditional Tags

add_action( 'wp_print_scripts', 'add_my_scripts', 100 );

Zu allererst müssen wir mit “add_action” die in WordPress zur Verfügung stehenden “Conditional Tags” aufrufen. Nur durch diesen Eintrag kann man anschließend praktische “if / else”-Anweisungen auf Basis dieser Conditional Tags nutzen.

Der Einsatz der Conditional Tags in der “if / else”-Anweisung

Theoretisch könnte man für die gesamte Website eine eigene angepasste (veraltete) JQUERY-Datei einsetzen. Allerdings wird einem dies spätestens in der WordPress-Administrationsoberfläche zum Verhängnis, da diese zu großen Teilen auf der aktuellen JQUERY basiert. Abhilfe schafft hier der Conditional Tag “is_admin”, der sicherstellt, dass die in Klammern umfasste Anweisung nur ausgeführt wird, wenn man nicht im “Backend” eingeloggt ist. Ist man eingeloggt, nutzt WordPress weiterhin die mitgelieferte Version:
if ( !is_admin() ) {

Die integrierte JQUERY mit wp_deregister_script “abmelden”

Mit der Funktion wp_deregister_script(‘jquery’) entfernen wir zuerst die “Ab-Werk-JQUERY”, die mit WordPress mitgeliefert wird:
wp_deregister_script( 'jquery' );

Die eigene JQUERY mit wp_register_script einbinden und mit wp_enqueue_script einbinden

wp_register_script( 'jquery', ( 'http://www.PFAD-ZUR-EIGENEN-JQUERY-DATEI.com' ), false, null, true );
In einem zweiten Schritt müssen wir nun den Pfad zu einer anderen JQUERY Datei angeben. Man könnte zum Beispiel die bei Google gehostete Version eintragen: “https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”

Tipp: Ändert man die Versionsnummer im Pfad bzw. Link, erhält man automatisch den Pfad zu der gewünschten bei Google gehosteten Datei. 

Durch die folgende Funktion wp_enqueue_script wird anschließend die neue JQUERY Datei “registriert”.
wp_enqueue_script( 'jquery' );

Beliebige andere Javascript-Dateien sauber einbinden

Weitere Javascript-Dateien können nach Belieben mit nur zwei Codezeilen hinzugefügt werden. Einfach folgende Anweisung anpassen und ebenfalls hinzufügen:

wp_register_script( 'eigenes-script', 'http://www.EIGENES-SCRIPT.com');
wp_enqueue_script( 'eigenes-script' );

Der letzte Schritt: Ausführen der Funktion direkt vor Ausgabe der Seite

In einem letzten Schritt wird durch “add_action” die zuvor definierte Funktion aufgerufen. “Init” stellt in diesem Falle sicher, dass die Funktion aufgerufen wird, nachdem WordPress alles “vorbereitet hat” aber noch bevor die “Seiten-Header” geschickt worden sind. So gesehen “quetschen” wir uns dazwischen, schlagen WordPress ein Schnippchen und ersetzen kurz vor Anzeige der Seite für den Besucher die JQUERY mit unserer eigenen.

Und CSS Dateien? Wie kann ich sauber meine eigenen CSS Dateien ausgeben lassen?

Lassen Sie manche Scripts beispielsweise nur auf bestimmten Seiten ausgeben, liegt es auf der Hand, dass es ja auch möglich sein sollte, auf die gleiche Art CSS-Dateien ausgeben zu lassen. Vollkommen richtig. Die Funktionsweise ist hierbei absolut identisch. Nur die Namen der Funktionen sind entsprechend anzupassen von “script” auf “style”.

Ein Beispiel:

add_action('wp_print_styles', 'add_my_styles', 100);
function add_my_styles() {
wp_register_style( 'eigene-css', 'http://www.PFAD-ZUR-EIGENEN-CSS-DATEI.com');
wp_enqueue_style( 'eigene-css' );
}
add_action('init', 'add_my_styles');

Sie sehen. Nahezu identisch!