Ein eigenes WordPress Theme erstellen 10 – richtiges einbinden von JS-Dateien inkl. Conditional Tags

Genauso wie CSS-Dateien, lassen sich auch JS-Dateien über die functions.php laden. Das hat wiederum den großen Vorteil, dass mit Conditional Tags gearbeitet werden kann.

Wie auch im vorherigen Artikel legen wir auch für die Einbindung von JS-Dateien eine neue Funktion in der functions.php des WordPress Themes an und verwenden hierzu, wie auch für die CSS-Dateien, die WordPress Funktion wp_enqueue_scripts.

function zoechbauer_scripts() {

}
add_action( 'wp_enqueue_scripts', 'zoechbauer_scripts' );

Aus dem vorigen Artikel kennen wir ja bereits die beiden WordPress Funktionen, mit denen wir CSS-Dateien über die functions.php laden.

wp_register_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Für JS-Dateien sind die verwendeten WordPress Funktionen sehr ähnlich.

wp_register_script( $handle, $src, $deps, $ver, $in_footer ); wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Aus ’style‘ wird ’script‘ und ‚$media‘ wird zu ‚$in_footer‘ – mehr ändert sich nicht. Mit wp_register_script() wird die jeweilige JS-Datei wieder nur bei Bedarf nachgeladen und wp_enqueue_script() erfolgt eine permanente Ladung der Datei in dem jeweiligen Theme.

Auch hier noch kurz zu den Variablen

  • $handle – ein einzigartiger Scriptname (erforderlich)
  • $src – der Pfad zur Datei, welche geladen werden soll (erforderlich)
  • $deps – Abhängigkeiten – Angabe von Scripts welche vorher geladen werden sollen – Standard array() – (optional)
  • $ver – individuelle Versionsnummer – Standard ?ver=WP-VERSION (optional)
  • $in_footer – die JS-Datei in den head oder in den footer laden – Standard = false = head, für footer => true  (optional)

Einige Scripte sind standardmäßig schon in WordPress ‚registriert‘ und können zB über diverse Plugins geladen werden. Als Beispiel laden wir hier den Syntax Highlighter Prettify welcher jquery benötigt – jquery ist aber schon in WordPress registriert.

// Lokal vom Theme-Ordner ohne Version in den FOOTER geladen
wp_enqueue_script( 'prettify-js', get_template_directory_uri() . '/js/prettify.js', array( 'jquery' ), null, true );

// über ein CDN-Netzwerk mit Versionsnummer in den HEAD geladen
wp_enqueue_script( 'prettify-js', '//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js', array( 'jquery' ), '298' );

Anstatt ‚true‚ wird mit ‚false‚ der Code in den head geladen – false muss dabei aber nicht angefügt werden, da es als Standard verwendet wird.

Ein Beispiel mit Conditional Tags

Wenn man mit Conditional Tags arbeitet, dann kann man unterschiedliche Scripte auch wirklich nur dort laden, wo man sie benötigt – Bei bestimmten Seiten, nur bei einer gewissen Kategorie, auf der Hauptseite, einem Seitentemplate und und und…

// Script nur auf der Hauptseite laden
if ( is_home() || is_front_page() ) {
    wp_enqueue_script( 'home-js', get_template_directory_uri() . '/js/home.js', array( 'jquery' ) );
}

// Script nur bei Beiträgen laden
if ( is_single() ) {
    wp_enqueue_script( 'post-js', get_template_directory_uri() . '/js/post.js', array( 'jquery' ) );
}

// Script nur bei einer bestimmten Seite laden
if ( is_page( 'eine-seite' ) ) {
    wp_enqueue_script( 'page-eine-seite-js', get_template_directory_uri() . '/js/page-eine-seite.js', array( 'jquery' ) );
}

// Script nur bei einem bestimmten Seitentemplate laden
if ( is_page_template( 'das-seitentemplate.php' ) ) {
    wp_enqueue_script( 'page-template-js', get_template_directory_uri() . '/js/page-template.js', array( 'jquery' ) );
}

// Script nur bei einer bestimmten Kategorie laden, zB WordPress
if ( is_category( 'wordpress' ) ) {
    wp_enqueue_script( 'cat-wordpress-js', get_template_directory_uri() . '/js/cat-wordpress.js', array( 'jquery' ) );
}

Conditional Tags gibt es mehr als genug in WordPress und bieten uns so sehr individuelle Anpassungsmöglichkeiten. Wer mit den verschiedenen Conditional Tags noch nicht so vertraut ist, dem kann ich die passende WordPress Codex-Seite hierzu empfehlen: https://codex.wordpress.org/Conditional_Tags.

Das integrierte jquery von WordPress durch ein CDN ersetzen.

WordPress liefert standardmäßig jquery mit aus – wissen wir schon. Dieses wird dann, falls benötig von dem eigenen Webserver geladen.

Es besteht aber auch die Möglichkeit ein CDN zu nutzen. Hierzu müssen wir allerdings zuerst das bereits registrierte jquery entfernen und die CDN-Version neu registrieren.

Das hat natürlich den großen Vorteil, dass die Seitenladegeschwindigkeit erhöht wird, CDN-Netzwerke sind ja normalerweise extrem schnelle Server mit sehr guter Internet-Anbindung.

Aber kein Vorteil ohne Nachteil. Bei der Verwendung von Plugins kann es zu Inkompatibilitäten kommen. Ich kann daher diese Methode auch nur denen empfehlen, die genau wissen was sie tun um nicht eine Überraschung erleben zu müssen.

Aber nun zu dem Code, welcher wieder in die oben erstellte Funktion eingefügt wird.

// Im Dashboard das WordPresseigene jquery verwenden, nur im Frontend ein CDN verwenden
if ( !is_admin() ) {
    // Integrierte Version entfernen
    wp_deregister_script( 'jquery' );
    // CDN registrieren - zB Version 2.2.0 - in den FOOTER laden
    wp_register_script( 'jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js', false, '2.2.0', true );

Eine tolle Möglichkeit die Version selbst zu bestimmen, sofern man auf die Kompatiblität von Plugins oder auch der gewünschten Browserunterstützung achtet. Für alte Internet Explorer Versionen verwenden sie am besten die Version 1.12.0, sofern sie mit ihrer Webseite diesen unterstützen wollen.

Es besteht für diesem Fall auch die Möglichkeit alten Internet Explorern, zB Version 8 und kleiner, HTML5 beizubringen. Über dieses Thema habe ich bereits einen Artikel geschrieben, den ich ihnen für diesen Zweck ans Herz legen kann.




Bitte beachten Sie, dass dieser Beitrag bereits vor über einem Jahr geschrieben wurde und unter umständen nicht mehr aktuell ist.

21. Februar 2016

In Blog, Wordpress

# # # # # # # #