So laden Sie eigene Skripte und Stile auf Ihre WordPress Seite

Dezember 2021

Trotz der Verfügbarkeit einer Unmenge von Plugins und Themes für WordPress, ist es manchmal notwendig, eigene Skripte und Stile zu laden.

Vielleicht möchten Sie diese coole JS-Bibliothek verwenden, um einige gutaussehende Diagramme oder Graphen zu erstellen.

Oder wie wäre es mit einem benutzerdefinierten JavaScript zum Abrufen und Anzeigen von Wechselkursen aus einer API?

Der Punkt ist, wenn Sie Ihre eigenen Skripte laden können, sind die Möglichkeiten endlos und hier erfahren Sie, wie Sie das tun können:

Laden Ihrer eigenen Skripte und Stile

Um Ihre eigenen Assets zu laden, müssen wir die `functions.php` verwenden. Sie ist die “Kerndatei” Ihres WordPress-Themes, im Normalfall ist sie vorhanden und kann im WordPress-Menü unter Design->Theme Editor aufgerufen werden (in der Liste rechts functions.php anklicken).

Wenn diese Datei noch nicht vorhanden ist, müssen Sie via FTP auf Ihre Webseite zugreifen, ein Basis-Tutorial für die Nutzung des kostenlosen FTP-Tools Filezilla finden Sie hier.

In Ihrem WordPress-Verzeichnis `wp_content/themes/` finden Sie all Ihre Themes, welche auf Ihrer Seite installiert sind. Navigieren Sie in den Ordner Ihres aktiven Themes und erstellen Sie eine neue `functions.php`. Wenn bereits eine vorhanden ist, können Sie diese einfach verwenden.

Erstellen Sie dort auch Ihre `.css` und oder `.js` Dateien.

Am Ende sollten Sie etwas in dieser Art haben:

themes/
├─ your_active_theme/
│  ├─ functions.php
│  ├─ my_scripts.js
│  ├─ my_styles.css

Jetzt ist es an der Zeit, unser Material zu laden, indem wir Folgendes in unsere `functions.php` einfügen:

// functions.php
// Die Funktion, die dafür verantwortlich ist, alle js und css zu laden
function loadMySrcriptsAndStyles() {

// Lädt my_styles.css
wp_enqueue_style("my_styles", get_theme_file_uri("my_styles.css"));

// my_scripts.js laden
wp_enqueue_script("my_scripts", get_theme_file_uri("my_scripts.js"));
}

// Weisen Sie Ihre Funktion der WP-Action zu
add_action("wp_enqueue_scripts", "loadMySrcriptsAndStyles");

Um zu überprüfen, ob `my_scripts.js` und `my_styles.css` korrekt geladen werden, können Sie folgendes hinzufügen:

```js
// my_scripts.js
alert("it works!");
```

```css
/* my_styles.css */
* {
border: 1px solid hotpink;
}

Wenn Sie dies in einer Live-Umgebung tun, sollten Sie vielleicht auf weniger einschneidende Methoden zurückgreifen.

`add_action` ist eine in WordPress eingebaute Funktion. Sie weist WordPress an, die zugewiesene Funktion auszuführen, wenn WordPress die definierte Aktion durchführt. Mit Aktionen (und Filtern) kann man sich in die Interna von WordPress einklinken und praktisch alles anpassen.

In unserem Fall verwenden wir die Aktion `wp_enqueue_scripts`. Jedes Mal, wenn Sie Skripte auf der Seite einreihen möchten, wollen wir, dass WordPress unsere Funktion ausführt.

wp_enqueue_style($handle, $src);

Diese Funktion ist die eigentliche Ladefunktion. Der erste Parameter ist ein Name.

Das ist im Grunde der Name des Skripts. Für unseren einfachen Zweck ist er nicht wichtig.

Der zweite Parameter ist der src-Pfad, der auf Ihre Datei zeigt.

Um unser Leben zu gestalten, verwenden wir die Funktion “get_theme_file_uri”. Sie gibt den vollständigen Pfad zum Verzeichnis des aktiven Themes an. Wir müssen nur noch den Dateinamen angeben und schon sind wir fertig.

Diese Funktion arbeitet genau wie `wp_enqueue_style`, lädt aber Javascript-Dateien.

wp_enqueue_script($handle, $src);

Laden von einem externen CDN

Es ist auch möglich, Skripte und Stile aus externen Quellen zu laden.

$script_url = "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js";

// Laden von extern gehostetem masonry js

wp_enqueue_script("masonry", $script_url);

Verwendung von JQuery in Ihrem eigenen Skript

Es ist möglich, Abhängigkeiten für Ihr eigenes Skript bereitzustellen. Ein Paradebeispiel wäre JQuery.

WordPress bietet bereits JQuery an und wir können es in unserem Skript wie folgt verwenden:

// Laden Sie my_scripts.js mit JQuery als Abhängigkeit

wp_enqueue_script("my_scripts", get_theme_file_uri("my_scripts.js")), ["jquery"]);

Registrieren Sie ein Skript und verwenden Sie es als eine neue Abhängigkeit

Sie können auch Ihre eigenen Abhängigkeiten einrichten, um sie in Ihrem eigenen Skript zu verwenden.

Dazu benötigen wir die Funktion `wp_register_script`. Sie funktioniert fast so wie `wp_enqueue_script`, aber sie fügt das Skript nicht sofort zu Ihrer Seite hinzu.

Stattdessen registriert sie das Skript und ermöglicht es Ihnen, es zu Ihrer Liste der Abhängigkeiten hinzuzufügen.

Es gibt auch eine Funktion `wp_register_style`, die dasselbe für Stylesheets tut.

$masonry_url = "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js";

// Extern gehostetes masonry js als Skript registrieren

wp_register_script("masonry", $masonry_url);

// my_scripts.js mit jquery und masonry als Abhängigkeit laden

wp_enqueue_script("my_scripts", get_theme_file_uri("my_scripts.js")), ["jquery", "masonry"]);

Zusammenfassung

Wie Sie sehen, ist es recht einfach, benutzerdefinierte Skripte und Stile zu Ihrer WordPress-Seite hinzuzufügen. Ich hoffe, Sie können dieses kurze Tutorial nutzen und Ihre WordPress-Seiten mit zusätzlichen coolen Funktionen erweitern.