Javascript zur WordPress-Site hinzufügen – 7 Schritt-für-Schritt-Methoden

Es gibt viele Gründe, JavaScript in WordPress zu integrieren: Sei es eine kleine Funktionsoptimierung oder die Integration eines Drittanbieter-Skripts. Unabhängig vom Grund sollten Sie darauf achten, keine Fehler zu machen – denn sonst könnten Ihre Website beschädigt oder ein Leistungsengpass entstehen.

Das direkte Hinzufügen von Javascript zu WordPress-Seiten und -Beiträgen ist nicht möglich. Daher schlagen wir verschiedene Möglichkeiten zum Hinzufügen von Javascript-Code zu Websites vor und erläutern, welche davon in den unterschiedlichen Umständen verwendet werden sollten, auf die Sie stoßen können. 

Wenn Sie es eilig haben, können Sie über das Inhaltsverzeichnis unten zum entsprechenden Teil des Artikels scrollen.

 

Dieser Artikel enthält Änderungen im WordPress-Code. Wenn Sie sich nicht sicher sind, ob Sie den Code selbst anpassen können, sollten Sie Erfahren Sie, wie Sie den besten WordPress-Entwickler für Ihr Unternehmen rekrutieren oder sehen Sie sich die folgenden günstigen Entwicklungsmöglichkeiten an. 

Wenn Sie sich nicht sicher sind, ob dies das Richtige für Sie ist und was Sie schnell erledigen können, schauen Sie sich ein paar Fiverr-Gigs an, die dies schnell für Sie erledigen können

Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden

Was ist JavaScript?

Wenn Sie diesen Beitrag lesen, wissen Sie wahrscheinlich bereits, was JavaScript ist.

Damit es für alle verständlich bleibt, erläutern wir kurz, was JavaScript ist und was es tut. Wenn Sie bereits Bescheid wissen, können Sie diesen Teil überspringen.

JavaScript ist eine Programmiersprache, die im Browser ausgeführt wird. Sie kann vom Webserver aufgerufen werden, wird aber im Browser des Besuchers ausgeführt.

Dies bietet jede Menge Spielraum für coole Dinge wie das Einbetten von Videos und das Hinzufügen von Funktionen.

Sie können beispielsweise JavaScript verwenden, um einen Videoplayer einzubetten, sodass Ihr Webserver dies nicht tun muss.

Dies verbessert das Benutzererlebnis durch die Einbindung von Videos, ohne Ihren Webserver durch die Wiedergabe des Videos zusätzlich zu belasten.

JavaScript wird auch in mobilen Apps, Spielen, Serveranwendungen, der Front-End-Entwicklung und seit kurzem auch in der KI-bezogenen Entwicklung verwendet.

Kann man JavaScript in WordPress verwenden?

Ja, Sie können JavaScript in WordPress verwenden. Dank der Flexibilität des CMS können Sie JavaScript nutzen, um interaktive Elemente hinzuzufügen oder APIs von Drittanbietern auf einer Seite zu platzieren.

Die Einsatzmöglichkeiten sind vielfältig, aber da JavaScript vom Browser des Benutzers ausgeführt wird, kann es viel tun, ohne Ihren Webserver zu verlangsamen.

Sie können Skripte auf verschiedene Weise hinzufügen, wie wir gleich besprechen werden.

Bevor Sie Änderungen an Dateien vornehmen, empfehlen wir Ihnen, zunächst ein untergeordnetes Design zu erstellen und/oder Ihre Website zu sichern.

Man kann nicht vorsichtig genug sein!

So fügen Sie JavaScript zu WordPress hinzu

Es gibt mehrere Möglichkeiten, Ihrer WordPress-Site benutzerdefinierten Javascript-Code hinzuzufügen, jede mit ihrem eigenen Nutzen:

1. Fügen Sie mithilfe eines Plugins wie WPCode ein Skript in ausgewählte Seiten ein.
2. Fügen Sie das Skript mithilfe von functions.php einer bestimmten oder einzelnen Seite Ihrer Wahl oder mehreren Seiten hinzu
3. JavaScript zu allen Seiten hinzufügen
4. Fügen Sie Ihrem Theme-Header eine Javascript-Datei hinzu
5. Verwenden des wp_head-Hooks zum Hinzufügen von benutzerdefiniertem JavaScript
6. Fügen Sie JavaScript zu Ihrer WordPress-Fußzeile hinzu
7. Hinzufügen von JavaScript zu WordPress-Videos
8. Fügen Sie JavaScript zu einem WordPress-Widget hinzu

Lassen Sie uns jede dieser Methoden im Detail durchgehen.

Anschließend erklären wir Ihnen kurz, wie Sie JavaScript debuggen, nachdem Sie es einer Seite hinzugefügt haben.

Hinweis: Einige dieser Techniken erfordern Änderungen an Kerndateien. Obwohl es normalerweise keine gute Idee ist, functions.php und andere WordPress-Kerndateien zu ändern, möchten wir Ihnen alle Möglichkeiten zum Hinzufügen von Code zeigen.

Wir empfehlen nicht unbedingt, Änderungen auf diese Weise vorzunehmen, sind jedoch der Meinung, dass Sie alle Informationen erhalten sollten, damit Sie dann Ihre eigene Entscheidung treffen können.

1. Verwenden Sie ein Plugin wie WPCode

Wenn Sie einfach ein Plugin zum Einbetten eines JavaScript-Verweises in die Header- oder Footer-Datei des WordPress-Themes verwenden möchten, ist das WPCode-Plugin eine einfache und kostenlose Option.

Wir empfehlen die Verwendung eines Plug-Ins für alle Codeänderungen, da dadurch alles sauber bleibt und spätere Probleme vermieden werden können.

Anstatt die Dateien des Designs direkt mit dem benutzerdefinierten Javascript-Code zu ändern, können Sie den Code mithilfe eines Plugins einfügen, der dann je nach den von Ihnen gewählten Optionen zum Header oder zum Footer Ihrer Site hinzugefügt wird. 

Dieses Plugin unterstützt mehrere unterschiedliche Optionen, daher beschreiben wir nur die gängigsten, die Sie verwenden müssen.

Nutze einfach das WPCode herunterladen hier oder installieren Sie es mit der Funktion „Plugins installieren“ von WordPress.

Installieren Sie das WPCode-Plugin:

• Melden Sie sich beim Backend oder Administrator Ihrer Site an.
• Gehe zu Plugins > Hinzufügen neuer
• Suchen Sie nach dem Plugin „WPCode“ und klicken Sie auf Jetzt installieren.
• Sobald es installiert ist, klicken Sie auf Mehr erfahren

 

Sie können jetzt entweder ein benutzerdefiniertes Skript ohne Datei laden (z. B. um ein Ihnen bereitgestelltes Skript wie Google Analytics hinzuzufügen) oder eine benutzerdefinierte Javascript-Datei hochladen. 

Die häufigste Option, die Sie mit diesem Plugin verwenden können, ist die Option, den Code direkt in WordPress einzufügen.

Dies kann verwendet werden, wenn Sie einen Drittanbieterdienst wie Google Analytics, Drip oder ein anderes Tool verwenden, für das ein Skript zu Ihrer Website hinzugefügt werden muss. Nehmen Sie einfach das Skript und legen Sie es in das Globale Kopf- und Fußzeile Fenster.

Sie können das Skript wahlweise in die Kopfzeile, den Textkörper oder die Fußzeile einfügen. Der Anbieter des Skripts sollte Sie anweisen, in welchen dieser Abschnitte Sie das Skript einfügen müssen.

Angenommen, Sie möchten es der Kopfzeile hinzufügen:

Klicke Änderungen speichern beenden.

Das WPCode-Plugin fügt den Code nun zu jeder Seite Ihrer Website hinzu.

Laden Sie das Frontend neu und überprüfen Sie den Quellcode Ihrer Website, um sicherzustellen, dass der Code jetzt angezeigt wird. Es empfiehlt sich auch, einige Seiten zu durchsuchen, um sicherzustellen, dass alles weiterhin einwandfrei funktioniert.

Mit WPCode können Sie auch eigene Code-Snippets erstellen.

Sie können Codeausschnitte auch überall auf Ihrer Website einfügen, beispielsweise in Beiträgen oder auf Seiten, vor oder nach einem Beitrag, vor oder nach Inhalten oder mit einer Reihe anderer Optionen, die Sie möglicherweise benötigen.

Einfach navigieren zu Code Snippets > Snippet hinzufügen und dann auswählen Erstelle deine Eigenen.

Sie gelangen nun zu einem Benutzerdefiniertes Snippet erstellen Seite, auf der Sie Ihrem Code einen Titel geben und ihn in die Codevorschau Box.

Dann von der Codetyp Dropdown-Menü, wählen Sie JavaScript-Schnipsel.

Scrollen Sie dann einfach nach unten, bis Sie das Einfügen Bereich.

Jetzt müssen Sie nur noch aus dem Dropdown-Menü einen Speicherort für den Code auswählen. Suchen Seite, Beitrag, benutzerdefinierter Beitragstyp und geben Sie an, wo der Code auf der Seite oder im Beitrag angezeigt werden soll.

Wenn WPCode den Snippet vor oder nach einem Absatz einfügen soll, können Sie angeben, vor oder nach welchem ​​Absatz im Beitrag er erscheinen soll.

Wenn Sie beispielsweise im Feld „Zahl einfügen“ eine 1 eingeben, erscheint der Codeausschnitt vor oder nach dem ersten Absatz. Für den zweiten Absatz verwenden Sie eine 2 usw.

Danach schalten Sie einfach den Schalter oben auf dem Bildschirm um, um Aktivesund dann auf die Schaltfläche Ausschnitt speichern Option daneben.

Das ist alles, was Sie brauchen, um JavaScript zu WordPress hinzuzufügen!

Der Hauptvorteil eines Plugins ist die anfängerfreundliche Option. Sie müssen sich nicht um die Bearbeitung Ihrer Theme-Dateien kümmern. Das WPCode-Plugin kann auch nützlich sein, wenn Sie nach einer nahtlosen Möglichkeit suchen, andere Codetypen und benutzerdefiniertes CSS hinzuzufügen.

Der Nachteil dieser Methode besteht jedoch darin, dass sie die Installation eines Drittanbieter-Plugins erfordert, was manche Websitebesitzer zu vermeiden versuchen.

Wenn Sie Ihre Erweiterungen auf ein Minimum beschränken möchten, sind Sie möglicherweise mit einer der anderen Methoden besser bedient.  

Auch wenn dies ziemlich einfach erscheint, liegt es möglicherweise außerhalb Ihrer Komfortzone. Wenn Sie dies also schnell erledigen möchten, schauen Sie sich einige an Entwickler auf Fiverr, wer das für Sie erledigen kann.

Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden

 

2. Fügen Sie JavaScript zu einer bestimmten WordPress-Seite oder einem bestimmten Beitrag hinzu

Diese Code-Optimierung verwendet die Funktionen Datei in Ihrem Vorlagenordner, um eine JS-Datei Ihrer Wahl nur zu einer einzelnen Seite Ihrer Wahl hinzuzufügen.

Dies nutzt die IS_PAGE Funktion, die Sie finden .: 

Sie können tatsächlich verschiedene andere Optionen verwenden, wenn Sie das Skript nur unter bestimmten Bedingungen hinzufügen möchten, wie zum Beispiel:

• is_single(),
• is_front_page(),
• is_home,
• is_admin usw. 

Wenn Sie die Datei zu allen Seiten hinzufügen müssen, scrollen Sie weiter, um unten andere Alternativen zu dieser Methode zu finden.

• Zuerst müssen Sie die ID der Seite identifizieren, zu der Sie das Skript hinzufügen möchten.
• Gehen Sie dazu auf die Seite, zu der Sie die Datei hinzufügen möchten, und klicken Sie auf Bearbeiten und rufe dann die ID der Seite aus der URL ab, wie unten zu sehen ist. Die ID ist die Nummer, die in der URL der Browserleiste zu finden ist.

• Nachdem Sie die ID der Seite kennen, müssen Sie die JS-Datei an einen bestimmten Ort hochladen. Wir empfehlen, die JS-Datei in Ihren Vorlagenordner hochzuladen, vorzugsweise in das Unterverzeichnis.
• Sobald Sie das hochgeladen haben, müssen Sie sich das Verzeichnis und den Namen der JS-Datei genau notieren. Diesen verwenden wir unten anstelle von PATH_TO_JS_FILE. Ihre Datei könnte sich beispielsweise hier befinden: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
• Notieren Sie sich die vollständige URL und ersetzen Sie unten die PATH_T_JS_FILE. Sie müssen auch die ID ersetzen, die Sie oben gefunden haben.
• Fügen Sie den vollständigen Code unten am Ende des Funktionen Datei Ihrer Vorlage.

Funktion collectiveray_load_js_script() {
  if( ist_Seite(ID) ) {
    wp_enqueue_script('js-Datei', 'PFAD_ZUR_JS-DATEI', Array('jquery'), '', false);
    //oder verwenden Sie die folgende Version, wenn Sie genau wissen, wo sich die Datei befindet
    //wp_enqueue_script( 'js-Datei', get_template_directory_uri() . '/js/myscript.js');
  }
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Wenn Sie genau wissen, wo Sie die JS-Datei abgelegt haben, können Sie eine leichte Variation des wp_enqueue_script verwenden: 

wp_enqueue_script( 'js-Datei', get_template_directory_uri() . '/js/myscript.js');

In diesem Fall ist die Datei /js/mysript.js der Speicherort der Datei, die Sie hinzufügen möchten.

Sobald Sie die Seite neu laden, sehen Sie, dass die Datei hinzugefügt wurde. Sie können dies bestätigen, indem Sie auf „Quelltext anzeigen“ klicken.

Wenn Sie die Javascript-Datei nicht einer Seite, sondern einer einzelnen Seite hinzufügen möchten, können wir diese Funktion leicht anpassen, sodass sie nur für einen einzelnen Beitrag gilt. Sie können eine der folgenden Varianten verwenden:

• ist_einzeln( '17' ) - verwendet die Post-ID
• is_single( 'Mein Beitragstitel' ) - verwendet den Titel des Beitrags, um zu prüfen, ob dies der Beitrag ist, zu dem die Datei hinzugefügt werden soll
• is_single( 'mein-Beitragstitel' ) - prüft anhand des Slugs des Beitrags
• is_single( array( 17, 'my-post-title', 'Mein Beitragstitel' ) ) - Hiermit wird geprüft, ob eine der Bedingungen „Post-ID“ „17“, „Slug“ „my-post-title“ oder „Titel“ „My Post Title“ lautet.
• ist_einzeln() - andere Variationen der is_single-Funktion, die ein Array von Werten zur Überprüfung verwenden

Der Code wäre in diesem Fall der folgende oder eine leichte Variation, abhängig von den Parametern der Funktion is_single. 

Funktion collectiveray_load_js_script() {
  wenn( ist_einzeln('17') ) {
    wp_enqueue_script('js-Datei', 'PFAD_ZUR_JS-DATEI', Array('jquery'), '', false);
    //oder verwenden Sie die folgende Version, wenn Sie genau wissen, wo sich die Datei befindet
    //wp_enqueue_script( 'js-Datei', get_template_directory_uri() . '/js/myscript.js');
  } 
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Wenn Sie den Beitragstitel kennen, können Sie diesen anstelle des Parameters „17“ verwenden. Auch hier kann das wp_enqueue_script wie folgt angepasst werden:

wp_enqueue_script( 'js-Datei', get_template_directory_uri() . '/js/myscript.js');

3. Fügen Sie allen Seiten JavaScript hinzu

Wie wir gesehen haben, ist die einfachste und sauberste Methode, eine Javascript-Datei zu Ihrem WordPress-Theme hinzuzufügen, die Verwendung von functions.php Datei mit wp_enqueue_script.

In diesem Fall fügen wir eine allgemeine Funktion hinzu, anstatt eine Bedingung zum Hinzufügen des Inhalts zu bestimmten Seiten zu erstellen.

Hier ist, wie es geht:

Öffne deine functions.php Datei und kopieren Sie den folgenden Codeausschnitt hinein. Stellen Sie sicher, dass Sie die Vorlagen-URL vor dem Speichern durch Ihre eigene ersetzen.

Funktion collectiveray_theme_scripts_function() {
  wp_enqueue_script( 'js-Datei', get_template_directory_uri() . '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_theme_scripts_function');

Wenn du bist Verwenden eines untergeordneten Designs, müssen Sie get_stylesheet_directory_uri() anstelle von get_template_directory_uri() verwenden 

Mit dieser Methode müssen Sie kein weiteres Plugin installieren, wenn Sie Ihre functions.php-Datei bearbeiten. Diese Methode kann auch verwendet werden, um sowohl Ihrem Theme als auch WordPress selbst Funktionen und Funktionalitäten hinzuzufügen. Mit diesem Ansatz können Sie beispielsweise JavaScript in einen einzelnen Beitrag, eine einzelne Seite oder alle Seiten installieren.

Der Hauptnachteil dieser Strategie besteht darin, dass Sie sich mit Code befassen und die Dateien Ihrer Website aktualisieren müssen. Wenn Sie auf diesem Gebiet keine Erfahrung haben, ist dies daher möglicherweise nicht die ideale Alternative.

Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden

4. Fügen Sie Ihrem Theme-Header JavaScript hinzu

In bestimmten Fällen möchten Sie vielleicht, dass die JavaScript-Datei auf Ihrer gesamten Site verwendet wird, möchten hierfür aber kein Plug-In verwenden.

Wenn Sie beispielsweise ein Drittanbieter-Skript zu allen Ihren Seiten hinzufügen möchten (z. B. das Skript instantpage.js, um Ihre Website schneller zu machen), können Sie das Skript einfügen oder die referenzierte Skriptdatei selbst hinzufügen in der head Ihrer header.php Vorlagendatei. 

DAS IST NICHT IDEALWenn Sie Ihr Design aktualisieren, gehen diese Änderungen möglicherweise verloren. Wenn Sie dies dennoch direkt tun möchten, wird dringend empfohlen, ein untergeordnetes Design zu erstellen.

In diesem Szenario, in dem dieses Skript überall hinzugefügt werden soll, können Sie die Datei gemäß den folgenden Anweisungen direkt zur Vorlage hinzufügen:

Dieser Aufruf der Datei (oder des Skripts) sollte zwischen den Meta-Tags und dem Stylesheet-Link eingefügt werden. Dies entspricht genau dem Einfügen von Javascript-Code in eine HTML-Seite. 

Um die Javascript-Datei in Ihre Site einzufügen, headverwenden Sie den folgenden Code:

Stellen Sie sicher, dass Sie die type korrekt, sonst ist Ihre Website ungültig. Stellen Sie außerdem sicher, dass das Verzeichnis /scripts im Design vorhanden ist und Sie die Datei myscript.js hinzugefügt haben.

Sie können dann beliebige Verweise auf Funktionen, die in der gerade hinzugefügten Datei verwendet werden, dort zum HTML hinzufügen, wo Sie sie verwenden müssen. 

Dies ist beispielsweise ein Beispiel für die Verwendung der Funktion, die Sie gerade hinzugefügt haben.

" >Überschrift kommt hierhin

4. Verwenden des wp_head-Hooks zum Hinzufügen von benutzerdefiniertem JavaScript

Sie können Ihrem Header auch benutzerdefiniertes JavaScript hinzufügen, indem Sie wp_head Aktions-Hook. Auch diese Lösung ist nicht empfehlenswert, da sie eine übermäßige Anzahl von Skripten generiert. Sie ist jedoch dem manuellen Einfügen der Skripte in die Datei header.php vorzuziehen.

Diese Methode, die auch für den Footer verwendet werden kann, nutzt die Action-Hooks, um Inline-Skripte in Ihre Website einzufügen. Im Gegensatz zur wp-enqueue-Skriptfunktion, die benutzerdefinierte Skripte in die Warteschlange einreiht, druckt die wp-head-Methode die Skripte in Ihre Header-Vorlage (und in den Footer, wenn Sie die wp_footer Haken).

Navigieren Sie zunächst zu Ihrer Datei functions.php und kopieren Sie den folgenden Code und fügen Sie ihn ein:

Funktion collectiver_custom_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

Beachten Sie, dass der WP-Head-Hook nur im Frontend Ihrer Website funktioniert. Das bedeutet, dass benutzerdefiniertes JavaScript, das über diesen Ansatz hinzugefügt wird, nicht im Admin- oder Login-Bereich angezeigt wird. Wenn Sie jedoch JavaScript an diesen Stellen hinzufügen möchten, können Sie dies mithilfe der Action-Hooks „Admin Head“ und „Login Head“ tun.

Entwickler schätzen die WP-Enqueue-Skriptfunktion, da sie Konflikte vermeidet, die bei anderen Lösungen auftreten können, wie z. B. das direkte Hinzufügen von Skripten zur header.php-Datei. Darüber hinaus generiert diese Lösung keine abhängigen Skripte.

Das Hauptproblem beim Hinzufügen von benutzerdefiniertem WordPress-JavaScript zum Header Ihrer Website besteht darin, dass es andere Plugins, die ihre eigenen Skripte laden, beeinträchtigen kann. Diese Konfiguration kann auch dazu führen, dass mehrere Skripte mehrfach geladen werden, was die Gesamtgeschwindigkeit und Leistung Ihrer Website beeinträchtigen kann.

5. Fügen Sie JavaScript zu Ihrer WordPress-Fußzeile hinzu

Das Hinzufügen von JavaScript zu Ihrem WordPress-Footer ist relativ einfach. Sie können Code in die Header- oder Footer-Datei einfügen, ein benutzerdefiniertes Codeelement in Ihrem Page Builder oder Theme verwenden oder ein spezielles Header- und Footer-Plugin nutzen.

Da Sie das Hinzufügen von JavaScript zu Ihren header.php- oder footer.php-Dateien vermeiden sollten, verwenden wir ein Plugin.

Ich empfehle das WPCode – Fügen Sie Kopf- und Fußzeilen + benutzerdefinierte Code-Snippets ein plugin.

Auswählen Einstellungen und der Kopf- und Fußzeilen einfügen Menü.

Fügen Sie dann Ihren JavaScript-Code in den Fußzeilenbereich der Seite ein.

Speichern Sie Ihre Änderungen, wenn Sie fertig sind.

6. Hinzufügen von JavaScript zu WordPress-Videos

WordPress ist so erweiterbar, dass Sie Ihrer Website problemlos neue Features und Funktionen hinzufügen können, ohne Ihr gesamtes Theme neu gestalten oder ersetzen zu müssen. Anstatt das WordPress-Theme von Grund auf neu zu erstellen, können Sie die Funktionalität einfach durch Hinzufügen von Plugins hinzufügen.

Und wenn die Funktionalität, die Sie hinzufügen möchten, eher klein ist und es nicht notwendig ist, ein Plugin zu erstellen oder zu installieren, können Sie das functions.php Datei oder verschiedene andere Möglichkeiten, Javascript zu WordPress hinzuzufügen, ohne ein separates Plugin erstellen zu müssen.

Das Beste, was über die Funktionsdatei ist, dass es wie ein Plugin funktioniert, mit dem Funktionen hinzugefügt und die Funktionalität sowohl des Designs als auch von WordPress selbst erweitert werden können.

Sie können jedoch ganz einfach hinzufügen Javascript-Code direkt zu Ihrem header.php-Datei, aber bei dieser Methode gibt es ein Problem.

Es kann tatsächlich zu Konflikten mit anderen Plugins kommen, wenn diese ihre eigenen JS-Skripte laden.

In diesem Artikel von CollectiveRayWir schauen uns an, wie man JavaScript richtig in WordPress-Themes einfügt. Als WordPress-Entwickler müssen wir das sehr oft tun.

(Spezielle NotizSuchen Sie nach einer Liste mit Optimierungen/Tricks, die Sie ganz einfach ohne Plugin auf Ihrer WordPress-Seite vornehmen können? Hier finden Sie unseren Leitfaden: 101 WordPress-Tricks, die jeder ernsthafte Blogger kennen muss.)

7. Fügen Sie JavaScript zu einem WordPress-Widget hinzu

Wenn Sie JavaScript in ein WordPress-Widget einfügen möchten, könnte es nicht einfacher sein.

Fügen Sie ein Widget hinzu, wählen Sie das Menü und wählen Sie Als HTML bearbeiten.

Fügen Sie Ihr JavaScript hinzu innerhalb tags and select Aktualisierung.

Der von Ihnen hinzugefügte Code sollte sofort sichtbar sein, wenn Sie das Widget im Frontend Ihrer Site anzeigen.

So debuggen Sie einen JavaScript-Fehler auf einer WordPress-Seite

Das Debuggen von JavaScript ist ein zeitaufwändiger Prozess, für Anfänger jedoch unvermeidlich.

Glücklicherweise stehen Ihnen die Tools zur Verfügung, um nach Fehlern zu suchen.

Öffnen Sie eine Seite in Ihrem Browser und drücken Sie F12 oder wählen Sie im Menü „Entwicklertools“ (Chrome). Alternativ können Sie Strg + Umschalt + J (Windows/Linux) oder Befehl + Wahl + J (Mac) verwenden.

Wähle aus Console Registerkarte des neuen Teils des Bildschirms, der geöffnet wird, und Sie sehen alle JavaScript-Fehler rot hervorgehoben.

Identifizieren Sie die Fehlerursache und korrigieren Sie den entsprechenden Teil des von Ihnen hinzugefügten JavaScripts.

Arbeiten Sie sich durch, bis alle Fehler behoben sind.

WordPress verfügt über einen eigenen Debugging-Modus, dessen Bedienung jedoch etwas kompliziert sein kann. Ich empfehle Ihnen, sich den offizielle Debugging-Seite für weitere Informationen.

Häufig gestellte Fragen zum Hinzufügen von Javascript zu WordPress

Was ist Javascript?

JavaScript ist eine Computersprache, die im Browser des Benutzers und nicht auf Ihrem Server ausgeführt wird. Clientseitige Programmierung ermöglicht Entwicklern, eine Vielzahl interessanter Dinge zu erreichen, ohne Ihre Website zu verlangsamen. Sie werden häufig aufgefordert, einen JavaScript-Codeausschnitt zu kopieren und in Ihre WordPress-Website einzufügen, wenn Sie einen Videoplayer einbetten, Rechner hinzufügen oder andere Dienste von Drittanbietern nutzen möchten.

Wie füge ich WordPress eine Javascript-Datei hinzu?

Kann ich Javascript in WordPress verwenden?

Ja, es gibt viele Möglichkeiten, Javascript in WordPress zu verwenden. Wenn Sie ein einfaches Skript hinzufügen möchten, können Sie das Plugin „Insert WPCode“ verwenden, um das Skript in den Header einzufügen und es dann von der Stelle im Theme, Beitrag oder Plugin aus aufzurufen, an der Sie es verwenden möchten.

Wie füge ich WordPress meinen eigenen Code hinzu?

Eigenen Code fügst du am besten über die Datei functions.php zu WordPress hinzu. Es empfiehlt sich, ein Child-Theme zu erstellen und anschließend eigene Änderungen daran vorzunehmen, um die Aktualisierbarkeit des Themes nicht zu beeinträchtigen.

Wie bearbeite ich Javascript in WordPress?

Die beste Möglichkeit, JavaScript in WordPress zu bearbeiten, besteht darin, ein Child-Theme zu erstellen und anschließend Ihre JavaScript-Änderungen oder Anpassungen anderer Funktionen in das Child-Theme einzufügen. So können Sie JavaScript nach Bedarf bearbeiten, ohne den Rest Ihres Themes oder dessen Aktualisierungsfähigkeit zu beeinträchtigen.

Fazit

Die oben genannten drei Methoden sind die sauberste Möglichkeit, Javascript in WordPress einzufügen. Generell sollte die direkte Code-Optimierung nur von erfahrenen Benutzern durchgeführt werden, die über umfassende Code-Erfahrung verfügen und wissen, wie sie vorgenommene Änderungen rückgängig machen können. Ansonsten empfiehlt es sich, Plugins zu verwenden. Wenn Sie sich nicht sicher sind, ob Sie den Code selbst optimieren möchten, kontaktieren Sie am besten unsere Partner auf Fiverr, die dies noch heute für Sie erledigen können.

Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden