So fügen Sie benutzerdefiniertes JavaScript zu Ihrer WordPress-Site hinzu

Durch das Hinzufügen von benutzerdefiniertem JavaScript zu Ihrer Website wird die Frontend-Funktionalität Ihrer Website erheblich verbessert. Möglicherweise fällt es Ihnen jedoch schwer, herauszufinden, wie Sie dies effektiv tun können. Abhängig von Ihrem technischen Hintergrund und dem Grund, warum Sie Ihrer WordPress-Website benutzerdefiniertes JavaScript hinzufügen, stehen Ihnen mehrere Möglichkeiten zur Auswahl.

In diesem Tutorial besprechen wir zwei Methoden zum Hinzufügen von benutzerdefiniertem JavaScript zu Ihrer WordPress-Site:

  • Nutzung des Kopf- und Fußzeilencode-Plugins (geeignet für Benutzer mit wenig oder keinem technischen Hintergrund)
  • Hinzufügen des Codes zur Datei „functions.php“.

Fix Nr. 1: Verwenden Sie ein Plugin wie Kopf- und Fußzeilencode

Die Verwendung eines Plugins ist die einfachste Möglichkeit, benutzerdefiniertes JavaScript zu Ihrer WordPress-Website hinzuzufügen und eignet sich für Websitebesitzer mit nicht technischem Hintergrund. Das Header- und Footer-Code-Plugin und ähnliche Plugins bieten eine intuitive und benutzerfreundliche Möglichkeit, benutzerdefiniertes JavaScript in Ihre Website einzubinden.

Mit dem kostenlosen Plugin können Sie Code auf verschiedene Arten nahtlos einfügen. Es bietet Dienstprogramme für verschiedene Anwendungen, darunter Facebook Pixel, Google Analytics, benutzerdefiniertes CSS und mehr.

So können Sie mithilfe eines Plugins benutzerdefiniertes JavaScript zu Ihrer WordPress-Site hinzufügen:

  1. Navigieren Sie im Admin-Dashboard zur Registerkarte „Plugins“  und klicken Sie auf die Option „Neu hinzufügen“  . Suchen Sie dann nach „Kopf- und Fußzeilencode“ und klicken Sie auf „ Jetzt installieren“ .
  2. Nachdem Sie das Plugin installiert und die Schaltflächen aktiviert haben, gehen Sie zu den Einstellungen des Plugins, indem Sie zum Abschnitt „Extras“ gehen  und Kopf- und Fußzeilencode auswählen . Hier finden Sie drei Abschnitte: Kopfzeile, Fußzeile und Text.
  1. Sie können je nach Ihren Anforderungen einfach Ihr benutzerdefiniertes WordPress-JavaScript in eines dieser Felder hinzufügen. Wenn Sie fertig sind , klicken Sie auf die Schaltfläche „Änderungen speichern“  und der Code wird dann für jede Seite Ihrer Website geladen.

Wie Sie sehen, ist diese Methode äußerst einsteigerfreundlich und erledigt den Zweck in drei einfachen Schritten. Darüber hinaus können Sie damit auch andere Arten von Code und benutzerdefiniertes CSS effektiv hinzufügen. Allerdings installieren Sie ein Drittanbieter-Plugin, das möglicherweise nicht für Sie geeignet ist, wenn Sie Ihre Erweiterungen auf ein Minimum beschränken möchten.

Lösung Nr. 2: Fügen Sie den Code zu Ihrer Datei „functions.php“ hinzu

Bei dieser Methode werden die integrierten Funktionen verwendet und die Datei „functions.php“ bearbeitet. Mit anderen Worten: Sie laden die Skripte manuell auf Ihren Server hoch.

Es empfiehlt sich, ein Child-Theme zu erstellen, bevor Sie diese Methode anwenden. Dadurch wird sichergestellt, dass Sie das übergeordnete Thema sicher aktualisieren können. Darüber hinaus wird Ihnen empfohlen, ein Backup Ihrer Website zu erstellen, falls etwas schief geht.

 In dieser Methode verwenden wir die Funktion IS_PAGE . Darüber hinaus können Sie bedingte Logik verwenden, um das benutzerdefinierte JavaScript auf ausgewählte Seiten oder Beiträge anzuwenden. Führen Sie die folgenden Schritte aus, um mithilfe der Datei „functions.php“ benutzerdefiniertes JavaScript zu Ihrer Website hinzuzufügen:

  1. Suchen und starten Sie die Datei „functions.php“ und fügen Sie den folgenden Codeausschnitt ein:
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    Funktion ha_custom_javascript ( ) {
    ?>
    <Skript>
    // Fügen Sie hier Ihren Code hinzu
    </script>
    <?php
    }
    add_action ( ‘wp_head’ , ‘ha_custom_javascript’ ) ;
    function ha_custom_javascript() {
    ?>
    <script>
    // add your code here
    </script>
    <?php
    }
    add_action(‘wp_head’, ‘ha_custom_javascript’);
    function ha_custom_javascript() {
       ?>
           <script>
             // add your code here
           </script>
       <?php
    }
    add_action('wp_head', 'ha_custom_javascript');

    Der oben angegebene Codeausschnitt fügt Ihrem Header benutzerdefiniertes JavaScript hinzu.

  1. Um benutzerdefiniertes JavaScript auf eine einzelne Seite anzuwenden, können Sie den folgenden Code verwenden.
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    Funktion ha_custom_javascript ( ) {
    if ( is_single ( ‘post_id’ ) ) {
    ?>
    <script type= « text/javascript » >
    // Fügen Sie hier Ihren Code hinzu
    </script>
    <?php
    }
    }
    add_action ( ‘wp_head’ , ‘ha_custom_javascript’ ) ;
    function ha_custom_javascript() {
    if (is_single (‘post_id’)) {
    ?>
    <script type= »text/javascript »>
    // add your code here
    </script>
    <?php
    }
    }
    add_action(‘wp_head’, ‘ha_custom_javascript’);
    function ha_custom_javascript() {
     if (is_single ('post_id')) {
       ?>
           <script type="text/javascript">
            // add your code here
           </script>
       <?php
     }
    }
    add_action('wp_head', 'ha_custom_javascript');
    Notiz

    Hinweis:  Sie müssen „post_id“ im Code durch die Post-ID-Nummer ersetzen, zu der Sie den Code hinzufügen möchten. Sie finden es in der URL nach „post=“ eines bestimmten Beitrags, wenn Sie ihn über das Admin-Dashboard bearbeiten.

  1. Nachdem Sie die ID-Nummer ersetzt und Ihr benutzerdefiniertes JavaScript hinzugefügt haben, speichern Sie die Datei. Sie werden sehen, dass sich die Änderungen auf Ihrer Website widerspiegeln. Der gleiche Vorgang kann für eine einzelne WordPress-Seite wiederholt werden.

Diese Methode bietet Ihnen die Flexibilität, benutzerdefiniertes JavaScript zu bestimmten Seiten oder Beiträgen oder der gesamten Website hinzuzufügen. Außerdem können Sie die Installation von Plugins vermeiden. Der einzige Nachteil dieser Methode besteht darin, dass sie möglicherweise nicht für Websitebesitzer geeignet ist, die über keine technischen Kenntnisse verfügen.

  • Schauen Sie sich unsere Empfehlungen für das beste WordPress-Webhosting an .