Frisch notiert!

Die neusten Artikel aus unserem Blog.

How To: Eigene Javascript- und CSS – Dateien in WordPress sauber einbinden

Zuletzt aktualisiert am 18/08/2016 von Gino Cremer
48 Kommentare
Wordpress
/ Wordpress / 48

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.
https://gist.github.com/ginocremer/9364379

Die Erklärung / Funktionsweise

„add_action“ zur Nutzung von Conditional Tags

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.

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.

Die eigene JQUERY mit wp_register_script einbinden und mit wp_enqueue_script einbinden

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:

https://gist.github.com/ginocremer/9364418

Sie sehen. Nahezu identisch!

Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen. Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde. Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

48 Kommentare

  1. […] greift.In wenigen Schritten gelangen wir zum Ziel:1. JQUERY-Plugin Cycle via functions.php einbindenIn einem weiteren Blogartikel haben wir erläutert wie man über die WordPress “functions.php&…. Wir fügen das JQUERY-Cycle-Plugin hinzu): wp_register_script( 'cycle', […]

  2. Das ist sehr nützlicher Hinweis, danke für Deinen Tipp. Nun möchte ich aber mein eigenes Script gerne nur auf eine Seite oder vielleicht eine eigene Templateseite verwenden. Global würde das keinen Sinn machen. Wie stelle ich das an?

    1. Hallo Adrian. Das ist an sich kein Problem. Wenn du die genaue ID deiner Seite kennst (in der Seitenauflistung reicht es mit der Maus auf den Namen einer bestimmten Seite zu gehen. Dann sieht man den Link und in jedem Link wird die ID mitgegeben, z.B. „post=548“). Daraufhin kann man Code auf eine Seite beschränken:


      add_action( 'wp_print_scripts', 'add_my_scripts', 100 );
      function add_my_scripts() {
      if ( is_page(548) ) {
      wp_register_script( 'eigenes-script-nur-fuer-id-548', 'http://www.EIGENES-SCRIPT.com');
      wp_enqueue_script( 'eigenes-script-nur-fuer-id-548' );
      } }
      add_action('init', 'add_my_scripts');

  3. Vielen Dank für den sehr hilfreichen Beitrag. Auch die Frage von Adrian und deine Antwort drauf haben mir weiter geholfen genau danach habe ich gesucht. javascript nur auf bestimmten seiten einbinden….

  4. Hallo Gino,
    vielen Dank für das leicht verständlich Tutorial. Vielleicht erweiterst du es noch für lokal einzubindende Dateien.

    wp_register_script(‚meinScript‘, get_bloginfo(‚template_directory‘).’/pfad/zum/script/im/theme/ordner‘);

    1. Hallo Oliver, danke für den Ansatz. Hast jedenfalls Recht, würde statt get_bloginfo(‘template_directory’) allerdings eher get_stylesheet_directory_uri() wählen. Wer mit Child-Themes arbeitet kommt sonst in Trouble, da template_directory immer nur das Parent-Theme (Eltern-Theme) anpeilt, get_stylesheet_directory_uri() peilt direkt das aktive Theme an, egal ob Child oder Parent :)

  5. Hallo!
    Interessante Informationen. Ich hätte versucht es direkt in die Seite einzubauen, plane aber nur ein simples Formular mit einer kleinen Berechnung.
    Werde es mal mit einem Plugin probieren…

  6. Hab das mal testweise mit der jquery/1.12. …. usw probiert. Auf diese Weise wird mir die Datei allerdings in den Head geschmissen, was ja eher ungünstig ist!?

    Grüße
    Robert

  7. Hallo,

    ich bin auf der Suche nach einer Lösung zu diesem Text. „Die Webseite lädt 27 Javascript Dateien, dies kann die Ladezeit negativ beeinträchtigen.“
    Gibt es hierzu eine Anleitung wie man die Javascipte minimieren kann unter WordPress. Ich benutze diese gar nicht und trotzdem lädt er diese.
    Glaub irgendwo hab ich hier einen Denkfehler.

  8. Dein Beitrag könnte genau die Lösung zu meinem Problem sein:-) – Aber wie verhält es sich mit dem Code-Schnipsel im Footer, wenn es ein WordPress Update gibt? Wird der dann überschrieben und ich muss die Änderung manuell nachpflegen?

    1. Hallo Jürgen, das ist gar kein Thema. Da der Code in dein Theme eingebunden wird, ist das unabhängig von WordPress-Updates zu betrachten. Die kannst du problemlos einspielen. Deinen „Code kratzt das also nicht“.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert