3 Möglichkeiten JavaScript in Deine WordPress Website einzubinden

MacBook und iPhone. Auf dem Display des MacBook sind Codezeilen zu sehen.

Du hast einen JavaScript-Schnipsel und möchtest diesen auf einfache Weise in deiner Website integrieren?

Ich erkläre Dir die Möglichkeiten und warum ich Dir Möglichkeit 3 ganz klar empfehle.

Möglichkeit 1: Direkt innerhalb einer Seite oder eines Beitrag einfügen

Um JavaScript in WordPress zu integrieren, gibt es verschiedene Möglichkeiten. Eine davon ist, das JavaScript-Fragment in den HTML-Code einer WordPress-Seite oder -Beitrags einzufügen. Dazu kannst Du den HTML-Editor im WordPress-Editor (In Gutenberg nennt sich diese Ansicht „Code-Ansicht“) öffnen und den JavaScript-Code an der gewünschten Stelle im HTML-Code einfügen.

Ich empfehle diese Möglichkeit nicht, da JavaScript immer am Ende der Seite eingebunden werden sollte, damit der Browser JavaScript zuletzt verarbeitet und die Performance Deiner Website dadurch weniger negativ beeinflusst.

Möglichkeit 2: JavaScript mit einem PlugIn einbinden

Eine weitere Möglichkeit, JavaScript in WordPress einzubinden, besteht darin, ein WordPress-Plugin zu verwenden, das speziell für das Einbinden von JavaScript-Code entwickelt wurde. Es gibt zahlreiche solcher Plugins im WordPress-Plugin-Verzeichnis, die Dir dabei helfen können, JavaScript einfach und schnell in WordPress zu integrieren. Ein Beispiel wäre das PlugIn „Header and Footer Scripts“, um JavaScript-Code im Head- oder Footer-Bereich Deiner WordPress-Seite einzufügen.

Möglichkeit 3: Die functions.php Deines (Child-) Theme verwenden

In WordPress gibt es außerdem die Möglichkeit, JavaScript in der functions.php deines Themes einzufügen. Dazu kannst Du den JavaScript-Code in eine PHP-Funktion schreiben und diese Funktion dann mit dem wp_enqueue_scripts-Hook aufrufen. Hier ein Beispiel für eine PHP-Funktion, die JavaScript-Code enthält:

function my_custom_js() {
  ?>
    <script type="text/javascript">
      // My custom JavaScript goes here
    </script>
  <?php
}

Anschließend kannst du die Funktion wie folgt aufrufen:

add_action('wp_enqueue_scripts', 'my_custom_js');

Dieser Aufruf sorgt dafür, dass der JavaScript-Code automatisch durch WordPress auf Deiner Website geladen wird.

Methode 3 ist die – meiner Meinung nach – „sauberste“ Methode. Du verwendest die WP Engine, wodurch WordPress deinen Code an der passenden Stelle einfügt und es wird kein PlugIn eines Drittanbieters benötigt und somit die Gefahr eines (zusätzlichen) Einfallstores für Sicherheitslücken verringert.

Und denk‘ daran. Backups, Backups, Backups! Regelmäßig und vor jeder größeren Änderung.

Du brauchst Hilfe bei der Einrichtung von JavaScript oder möchtest Deine Website von A bis Z durch einen Experten entwickelt wissen? Melde dich gerne bei mir via Kontaktformular, per eMail oder Telefon. Ich freue mich von Dir zu hören. 🙂