So fügen Sie JavaScript zu einer WordPress -Seite (+ Debugging -Tipps) hinzu.

Möchten Sie JavaScript zu einer WordPress -Seite hinzufügen, aber Sie denken, Sie machen es falsch oder wissen nicht einmal, wo Sie anfangen sollen? Oder haben Sie es bereits getan und sehen Fehlermeldungen und/oder Leistungsprobleme, die Sie nicht wissen, wie Sie beheben sollen?

In jedem Fall sind Sie am richtigen Ort.

Dieser Beitrag wird eine erste Ausbildung in allen Dingen, die JavaScript und WordPress ausrichten. Am Ende wissen Sie alles, was Sie brauchen, um warum die Verwendung von JavaScript in WordPress eine gute Idee ist, wie Sie es Ihren Seiten hinzufügen und was zu tun ist, wenn es nicht ordnungsgemäß funktioniert oder Ihre Website verlangsamt.

Warum JavaScript zu Ihren WordPress -Seiten hinzufügen?

JavaScript, oft nach JS abgekürzt, ist eine beliebte Programmiersprache. Es ist eine der drei Haupttechnologien, die zum Erstellen von Webseiten verwendet werden. Die anderen beiden sind HTML, die Seitenstruktur und Inhalt sowie CSS definieren, was für das Styling verantwortlich ist.

JavaScript ist eine clientseitige Sprache, was bedeutet, dass sie im Browser ausgeführt wird, nicht auf dem Server. Aus diesem Grund können Sie es verwenden, um vorhandene CSS und HTML zu ändern und zu aktualisieren, auch nachdem eine Seite geladen wurde.

Deshalb ist eine der Hauptnutzungen, Webseiten interaktiver zu gestalten. Zum Beispiel macht JavaScript häufig Seitenelemente wie:

• Einschlägenmenüs

• Popups

• Animationen

Der WordPress -Block -Editor ist auch hauptsächlich in JavaScript geschrieben.

Neben der Interaktivität ist JavaScript auch eine häufige Möglichkeit, Dienste von Drittanbietern in Ihre Website zu integrieren, z. B. die Verfolgung von Skripten für Webanalysen. Weitere Beispiele sind:

• Live -Chat

• E-Mail-In-In-Kontaktformulare und Kontaktformulare

• Eingebettete Videos

• Interaktive Karten

• Social Media Feeds

Wichtige Überlegungen

Wenn Sie falsch gemacht werden, kann das Hinzufügen von JavaScript zu Ihren WordPress -Seiten zu Fehlern und Problemen führen. Wenn Sie von Anfang an Vorsichtsmaßnahmen treffen, können Sie später Zeit und Frustration sparen:

• Verwenden Sie JavaScript nur von vertrauenswürdigen Quellen, um Ihre Website sicher und stabil zu halten.

• Nehmen Sie eine vollständige Sicherung Ihrer Website -Dateien und -Datenbank, bevor Sie Änderungen vornehmen, falls etwas schief geht.

• Wenn Sie JavaScript direkt zu Themendateien hinzufügen, verwenden Sie immer ein untergeordnetes Thema. Wenn Sie das Hauptthema ändern, verlieren Sie Ihre Änderungen, wenn Sie es aktualisieren.

• Testen Sie Änderungen in einer Staging- oder Entwicklungsumgebung, bevor Sie sie auf Ihre Live -Website anwenden.

• JavaScript fügt Ihren WordPress -Seiten einen zusätzlichen Code hinzu, der sie verlangsamen kann. Behalten Sie den Überblick über die Leistung, wenn Sie neue Funktionen für Ihre Website einführen.

6 Möglichkeiten zum Hinzufügen von JavaScript zu einer Seite in WordPress

Genug mit der Theorie. Im Folgenden zeigen wir Ihnen sechs Möglichkeiten, JavaScript zu WordPress von den meisten bis zu den geringsten technischen hinzuzufügen.

1. Verwenden Sie WordPress -Haken und Funktionen

Hooks sind Code-Teile, die im Ladevorgang des WordPress-Ladevorgangs platziert sind, in dem Sie benutzerdefinierte Code (sogenannte „Funktionen“) anhängen können, damit er zu einem bestimmten Zeitpunkt oder zu einem bestimmten Ort ausgeführt wird.

Zum Beispiel läuft wp_head () im Abschnitt <kopf> oben auf Ihrer Website. Wenn Sie es verwenden möchten, um JavaScript zu einer WordPress -Seite hinzuzufügen, müssen Sie dies in der Funktion Ihres (untergeordneten) Themas.Php -Datei beispielsweise wie so tun:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Geben Sie Ihren JavaScript -Code ein, in dem er heißt: "Platzieren Sie Ihren JavaScript -Code hier." Sie können den Funktionsnamen auch von "add_custom_script" in etwas Deskriptiver ändern.

Diese Methode eignet sich hervorragend für kleinere Skripte mit sehr klar definierten Zwecken wie einfachen Analyse -Tracking -Code oder grundlegende interaktive Elemente. Es eignet sich auch zum Laden von JavaScript in die Fußzeile, eine beliebte Lösung zur Verbesserung der Seitenleistung. Verwenden Sie einfach wp_foter () anstelle von wp_head ().

Die Seitenkopf und die Fußzeile sind beliebte Standorte zum Laden von Skripten, da sie normalerweise überall auf einer Website angezeigt werden. Das macht sie zu einer großartigen Möglichkeit, JavaScript zu allen Seiten einer WordPress -Site hinzuzufügen.

Wenn Sie JavaScript nur auf bestimmten Seiten laden möchten, können Sie diese Methode mit einer bedingten Anweisung kombinieren:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

Der Teil, der dies auf eine einzelne Seite begrenzt, ist is_page (123). Das "123" ist die Seiten -ID, die Sie auf die ID Ihrer Seite aktualisieren müssen, wenn Sie diesen Code verwenden möchten. Es wird in der Browserleiste angezeigt, wenn Sie Ihre Seite im WordPress -Editor öffnen. Sie können auch is_page () verwenden, um Seiten mit Namen oder URL -Schnecken zu zielen.

2. Laden Sie JavaScript in eine separate Datei

Eine andere Möglichkeit besteht darin, Ihr JavaScript in eine eigene Datei zu setzen. Dies ist eine gute Idee, insbesondere für große Skripte, macht aber im Allgemeinen auch Sinn, da Sie Ihre Dateien mit den Funktionen wp_register_script () und wp_enqueue_script () laden können.

Dies ist die bevorzugte Methode, da sie dazu beiträgt, Konflikte zu vermeiden, Skripte in die richtige Reihenfolge zu laden und Abhängigkeiten zu verwalten. So sieht es aus:

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

In diesem Beispiel befindet sich das Skript im Themenverzeichnis, auf das wir mit Get_Template_Directory_uri () abzielen (für untergeordnete Themen verwenden Sie stattdessen get_stylesheet_directory_uri ()). Das Array ('JQuery') zeigt an, dass dieses Skript von JQuery abhängt und danach geladen werden sollte. Das '1.0.0' ist die Versionsnummer, und 'true' bedeutet, dass WordPress das Skript in die Fußzeile laden sollte.

Dies funktioniert auch und ist die richtige Möglichkeit, JavaScript von Drittanbietern wie Verfolgung von Codes zu laden. Achten Sie darauf, den Code auf Ihren Anwendungsfall zu aktualisieren, bevor Sie ihn auf Ihre Website setzen.

3.. Code in Themendateien eingeben

Hooks sind eine großartige Möglichkeit, alle Ihre JS -Skripte von einem einzelnen Ort aus zu begeben, aber nicht die einzige Möglichkeit, sie in Ihrem Thema zu laden.

Anstatt wp_head () zum Laden von etwas im Kopf zu verwenden, können Sie dasselbe erreichen, indem Sie Ihr Skript oder einen Link dazu direkt in die Themendatei in Ihre Header -Themendatei veröffentlichen.

In klassischen Themen ist das normalerweise Header.php . Finden Sie es in Ihrem Thema, erstellen Sie eine Kopie und platzieren Sie sie in Ihr Kinderthema und fügen Sie das Skript direkt irgendwo in den Abschnitt <Head> ein.

Wenn Sie es nur auf einer bestimmten Seite laden möchten, können Sie wie zuvor eine bedingte Anweisung verwenden. Dank der Vorlagenhierarchie ist es auch möglich, eine benutzerdefinierte Datei nur für diese Seite zu erstellen, z. B. Seite-contact.php .

4. Erstellen Sie ein benutzerdefiniertes Plugin

Das Problem beim Hinzufügen von JavaScript zu WordPress -Seiten mit Themendateien besteht darin, dass der Code vom Thema abhängt. Wenn Sie Themen wechseln, verschwindet auch Ihr JavaScript.

Sie können dies vermeiden, indem Sie ein benutzerdefiniertes Plugin verwenden. Dies macht den Code themenunabhängig und ermöglicht es Ihnen auch, ihn im WordPress- Plugins -Menü zu aktivieren und zu deaktivieren.

Hier ist das Markup für ein einfaches Plugin zum Hinzufügen von JavaScript zu Ihren WordPress -Seiten:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Platzieren Sie diesen Code in eine PHP -Datei und stellen Sie sicher, dass Sie den Plugin -Namen , Plugin -URI , Beschreibung , Autor und Autor -URI an Ihre eigenen Informationen anpassen, wie er im Menü WordPress -Plugins angezeigt wird.

Nennen Sie die Datei etwas Sinnvolles, z. B. benutzerdefinierte Tracking-Code-Plugin.php und laden Sie sie in ein gleichnamiges Verzeichnis in WP-Content/Plugins in Ihrer WordPress-Installation hoch. Danach sollte es im Plugins -Menü angezeigt werden.

5. Fügen Sie JavaScript im WordPress -Editor hinzu

Dies ist zwar nicht die empfohlene Methode, aber es ist auch möglich, JavaScript mit dem WordPress -Editor direkt zu einer Seite hinzuzufügen. Fügen Sie dazu einen neuen Block hinzu (klicken Sie auf die Plus -Schaltfläche oder verwenden Sie einen Vorwärtsschild) und wählen Sie den benutzerdefinierten HTML -Block.

Fügen Sie Ihren JavaScript -Code einfach ein, damit er direkt auf der Seite geladen wird.

Verwenden Sie einfach die Eröffnungs <Script> und schließen Sie </script> Tags und speichern Sie Ihre Änderungen im Editor, damit sie wirksam werden können.

Sie können dem klassischen Editor auch JavaScript mithilfe der Registerkarte Code hinzufügen.

6. Verwenden Sie ein Code -Snippet -Plugin

Es wäre nicht WordPress, wenn es auch keine Plugin -Lösung gäbe, um Ihrer Website JavaScript hinzuzufügen. Tatsächlich gibt es mehrere, darunter:

• Wpcode

• Header -Fußzeile -Code -Code -Manager

• Einfache benutzerdefinierte CSS und JS

• CSS & JavaScript Toolbox

Mit Plugins können Sie Ihr JavaScript besser verwalten. Sie können Ihre Snippets benennen, in Kategorien organisieren, sie selektiv ein- und ausschalten und bedingte Regeln einrichten. Darüber hinaus macht es wie die benutzerdefinierte Plugin -Lösung Ihr JavaScript unabhängig vom Thema.

Die Verwendung dieser Plugins ist auch einfach. Normalerweise fügen sie Ihrer Website ein neues Menü hinzu, auf dem Sie Ihre JavaScript -Snippets verwalten können.

Erstellen Sie einfach ein neues Snippet, fügen Sie Ihren Code ein und konfigurieren Sie dann, wo es angezeigt werden soll.

Das ist so ziemlich es.

Fehlerbehebung bei JavaScript -Problemen in WordPress

Jetzt wissen Sie, wie Sie JavaScript zu Ihrer WordPress -Website und Ihren Seiten hinzufügen. Aber was ist, wenn etwas nicht funktioniert, wie es soll? Wir werden den letzten Teil dieses Artikels damit verbringen, wie Sie JavaScript -Probleme identifizieren und lösen können, auf die Sie möglicherweise begegnen.

1. Überprüfen Sie die Browser -Entwickler -Tools

Eine Möglichkeit, nach JavaScript -Fehlern zu suchen, besteht darin, die Entwickler -Tools Ihres Browsers zu verwenden. Sie ermöglichen es Ihnen, den zugrunde liegenden Site -Code, einschließlich aller Skripte, zu inspizieren.

Sie können sie öffnen, indem Sie mit der rechten Maustaste auf jede Webseite klicken und inspizieren .

Alternativ greifen Sie über das Browser -Menü auf sie zu, z. B. in Chrom, sie befinden sich unter weiteren Tools> Entwickler -Tools .

Es gibt auch Tastaturverknüpfungen, um sie in Chrom, Kante und Firefox zu öffnen. In Safari CMD+OPT+C ist es Strg/CMD+Shift+I .

Öffnen Sie die Entwickler -Tools auf Ihrer Website und gehen Sie zur Registerkarte Konsole . Sie sollten alle Fehler sehen, einschließlich derer, die hier durch JavaScript verursacht werden.

Beachten Sie, dass Sie möglicherweise die Seite neu laden müssen, damit sie angezeigt werden. Die häufigsten JavaScript -Fehler sind:

• ReferenzError: Zeigt eine fehlende oder undefinierte Variable oder Funktion an.

• TypeError: Schlägt vor, dass es ein Problem mit einer Operation gibt, beispielsweise versucht, einen Wert eines unangemessenen Typs zu verwenden.

• SyntaxError: Es tritt häufig aufgrund eines Tippfehlers oder einer falschen Formatierung im Code auf, wie fehlende Klammern, Semikolons oder Zitate.

Sie möchten herausfinden, welches Skript, die Datei oder die Funktion den Fehler verursachen, damit Sie ihn korrigieren können. Es hilft, Haltepunkte auf der Registerkarte Quellen zu verwenden, mit denen Sie die Ausführung von JavaScript innehalten und untersuchen können, was passiert.

Verwenden Sie Ihre bevorzugte Suchmaschine oder KI, um mehr über jede von Ihnen gefundene Fehlermeldung zu erfahren. Darüber hinaus möchten Sie möglicherweise auch die Registerkarte Netzwerk überprüfen, um festzustellen, ob Ihre Skripte ordnungsgemäß geladen werden.

2. Konflikte mit Thema und Plugin -Konflikten auflösen

JavaScript -Fehler können auch aufgrund von Themen- und Plugin -Konflikten auftreten, beispielsweise bei der Verwendung von inkompatiblen Bibliotheken oder doppelten Funktionen.

Hier erfahren Sie, wie diese JavaScript -Probleme beheben können:

• Aktualisieren Sie Themen und Plugins: Ihr Thema oder ein Plugin -Entwickler kennen möglicherweise bereits das Problem und haben sie in der neuesten Version korrigiert.

• Wechseln Sie vorübergehend zu einem Standardthema: Aktivieren Sie ein WordPress-Standardthema wie fünfundzwanzig. Wenn das Problem verschwindet, ist Ihr Thema wahrscheinlich schuld.

• Deaktivieren Sie Ihre Plugins: Schalten Sie alle Plugins auf Ihrer Website aus und schalten Sie sie einzeln ein, um zu sehen, wann das Problem wieder auftaucht. Aktualisieren oder ersetzen Sie das Plugin, das es verursacht.

Mit dem Health Check -Plugin können Sie alles, was oben aus dem WordPress -Dashboard erwähnt wird, simulieren (zur Registerkarte Fehlerbehebung ) und mit einem einzigen Klick zurückkehren.

Es gibt auch viel mehr zusätzliche Informationen über den Zustand Ihrer Website. Es wird empfohlen, diese Tests auf einer Entwicklungs- oder Inszenierungs -Website, nicht auf Ihrer Live -Website durchzuführen.

3. Verwenden Sie den Debug -Modus

WordPress verfügt über einen integrierten Debug-Modus, mit dem Sie Probleme mit der Website erkennen und beheben können. Es wird zwar keine direkten Probleme mit JavaScript angezeigt, aber es erleichtert es, PHP-, Plugin- und Themenfehler zu finden, die die Skripte auf Ihrer Website beeinträchtigen könnten.

Um den Debug-Modus zu aktivieren, öffnen Sie Ihre Datei wp-config.php (über FTP oder Ihren Hosting-Dateimanager) und fügen Sie die folgenden Zeilen hinzu:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Möglicherweise finden Sie bereits Define ('script_debug', false); in der Datei. Wenn ja, ändern Sie es einfach in "wahr". Speichern Sie die Datei und neu.

Die obigen Einstellungen ermöglichen den Debug-Modus, die Fehlerprotokollierung (Fehler werden in WP-Content/Debug.log angezeigt) und laden Sie unminifizierte Versionen von Core-CSS- und JavaScript-Dateien, um Probleme leichter zu verfolgen.

Tun Sie dies erneut auf einem Entwicklungsort, weg von den Augen Ihrer Besucher. Vergessen Sie nicht, diesen Code zu entfernen, um danach wieder normal zu werden.

4. Ansprechen von Leistungsproblemen

Wie jeder andere Code kann das Hinzufügen von JavaScript zu Ihren WordPress -Seiten Ihre Website langsamer machen. Sie werden häufig feststellen, dass Sie Ihre Website beschleunigen und eine Warnung erhalten, in der angezeigt wird: "Reduzieren Sie unbenutztes JavaScript."

Um die durch JavaScript verursachten Leistungsprobleme zu vermeiden, befolgen Sie diese Best Practices:

• Entfernen Sie Skripte, die Sie nicht benötigen: Prüfen Sie regelmäßig das Laden von JavaScript auf Ihrer Website, um festzustellen, ob Sie tatsächlich alles benötigen, insbesondere Dienste von Drittanbietern.

• Skripte in die Fußzeile laden: Platzieren Sie nur JavaScript -Dateien in den Kopfabschnitt, wenn es erforderlich ist, dass sie frühzeitig geladen werden.

• Kombinieren Sie Skripte: Kombinieren Sie mehrere Skripte zu einer einzelnen Datei (dies wird als „Verkettung“ bezeichnet). Eine einzelne große Datei lädt oft schneller als mehrere kleinere.

• JavaScript -Dateien minifieren : Dies beseitigt unnötige Formatierung und Whitespace, die für die Leserbarkeit von Code nicht erforderlich sind.

• Laden Sie JavaScript asynchron: Dies bedeutet, dass der Browser die Site beim Laden von JavaScript -Dateien nicht beendet, sondern im Hintergrund lädt und nach dem Herunterladen ausführt.

• Große Skripte aufschieben: Hier werden Ihre Dateien auch im Hintergrund heruntergeladen, aber erst nach Abschluss des Restes des Ladevorgangs ausgeführt, sodass er nicht unterbrochen wird.

• Verzögerung JavaScript Ausführung : Dadurch wird das Laden aller JavaScript -Dateien und Inline -Skripte bis zur Benutzerinteraktion verschoben. Es ist wie ein faules Laden für Bilder, aber für JavaScript -Dateien.

Vereinfachen Sie die JavaScript -Leistungsoptimierung mit WP Rocket

Anstatt dies von Hand zu tun, haben Sie auch die Möglichkeit, es viel leichter mit WP Rocket zu implementieren. Wenn Sie auf Ihrer Website aktiv sind, mindert das Plugin JavaScript standardmäßig und Sie können alle Skripte auf Ihrer WordPress -Site kombinieren, verzögern, verschieben und asynchron laden, indem Sie einfach einige Kästchen im Menü "Dateioptimierung" überprüfen.

Bei Bedarf haben Sie die Möglichkeit, einzelne Skripte, Plugins und Dateien von der Optimierung auszuschließen, falls sie die Reaktionsfähigkeit Ihrer Seitenelemente beeinträchtigt.

Abgesehen davon implementiert WP Rocket automatisch eine Reihe von Leistungsverbesserungen im Hintergrund, wie z. B.:

• Caching, einschließlich eines separaten mobilen Cache

• GZIP -Komprimierung

• Vorspannungscache und Links

• Kritische Bildoptimierung (um Bilder über der Falte von faulen Laden auszuschließen), um die größte inhaltliche Farbe zu verbessern

• Automatisches faultes Rendering, um Elemente schneller auf der Seite zu laden

Tatsächlich implementiert das einfache Installieren und Aktivieren des Plugins 80% der Best Practices auf Ihrer Website und macht es sofort schneller. Und wenn das nicht genug ist, können Sie viele andere Funktionen aktivieren, um Ihre Site -Geschwindigkeit zu erhöhen, z. B.:

• Faules Laden für Bilder, einschließlich CSS -Hintergründe, Videos und IFrames

• Vorspannung externe Dateien und Schriftarten

• Selbsthosting Google-Schriftarten

• Datenbankoptimierung

• Optionen, um einfach eine Verbindung zu einem CDN herzustellen, einschließlich RocketCDN

Bereit, Ihre WordPress -Seiten JavaScript hinzuzufügen?

JavaScript bietet viele aufregende Möglichkeiten für WordPress-Websites, egal ob zum Hinzufügen von Interaktivität oder Integration mit Software von Drittanbietern. Es gibt viele Möglichkeiten, wie Sie es Ihren Seiten hinzufügen können, abhängig von Ihren Fähigkeiten und den Vorlieben.

Gleichzeitig kann JavaScript Fehler einführen und ein großer Faktor für die Seitenleistung sein. Aus diesem Grund ist es unbedingt erforderlich, dass Sie Ihre WordPress -Seiten mit Sorgfalt JavaScript hinzufügen.

Wenn Sie mit Leistungsproblemen im Zusammenhang mit JavaScript zu kämpfen haben, hilft Ihnen WP Rocket, sie einfach und effektiv anzusprechen. Außerdem bietet es eine Menge anderer Funktionen, um Ihre Website zu beschleunigen. Holen Sie sich noch heute WP Rocket und versuchen Sie es für 14 Tage risikofrei!