Es gibt normalerweise viele Gründe, warum Sie Javascript zu WordPress hinzufügen möchten, entweder eine kleine Änderung an einer Funktion oder vielleicht möchten Sie ein Skript eines Drittanbieters hinzufügen. Betrachtenless des Grundes, warum Sie dies tun möchten, möchten Sie sicherstellen, dass Sie nichts falsch machen - weil Sie Ihre Website beschädigen oder einen Leistungsengpass verursachen könnten.
Das direkte Hinzufügen von Javascript zu WordPress-Seiten und -Beiträgen ist nicht möglich, daher schlagen wir eine Reihe verschiedener Möglichkeiten zum Hinzufügen von Javascript-Code zu Websites vor und welche unter den verschiedenen Umständen, auf die Sie stoßen sollten, verwendet werden sollten.
Wenn Sie es eilig haben, verwenden Sie das Inhaltsverzeichnis unten, um zum entsprechenden Teil des Artikels zu scrollen.
Dieser Artikel enthält Änderungen im WordPress-Code. Wenn Sie sich nicht sicher sind, den Code selbst zu optimieren, sollten Sie dies tun Erfahren Sie, wie Sie den besten WordPress-Entwickler für Ihr Unternehmen rekrutieren oder sehen Sie sich die folgenden günstigen Entwicklungsoptionen an.
Wenn Sie sich nicht sicher sind, ob dies für Sie richtig ist und was Sie schnell erledigen können, schauen Sie sich einige 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, sind Sie wahrscheinlich bereits mit JavaScript vertraut.
Damit es jedoch für alle zugänglich bleibt, werden wir kurz umreißen, was JavaScript ist und was es tut. Sie können diesen Teil gerne überspringen, wenn Sie es bereits wissen.
JavaScript ist eine Programmiersprache, die in einem Browser ausgeführt wird. Es kann vom Webserver aufgerufen werden, läuft aber im Browser des Besuchers.
Dies bietet ziemlich viel 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, damit Ihr Webserver dies nicht tun muss.
Dies verbessert die Benutzererfahrung durch die Einbindung von Videos, ohne Ihren Webserver durch die Wiedergabe des Videos zu belasten.
JavaScript wird auch in mobilen Apps, Spielen, Serveranwendungen, Front-End-Entwicklung und neuerdings auch in der KI-bezogenen Entwicklung verwendet.
Können Sie JavaScript in WordPress verwenden?
Ja, Sie können JavaScript in WordPress verwenden. Angesichts der inhärenten Flexibilität des CMS können Sie JavaScript verwenden, um interaktive Elemente hinzuzufügen oder APIs von Drittanbietern auf einer Seite zu platzieren.
Die Verwendungsmöglichkeiten sind vielfältig, aber da JavaScript vom Browser des Benutzers ausgeführt wird, kann es viel bewirken, ohne Ihren Webserver zu verlangsamen.
Sie können Skripte auf verschiedene Arten hinzufügen, wie wir gleich besprechen werden.
Bevor Sie Änderungen an Dateien vornehmen, empfehlen wir Ihnen, zuerst ein untergeordnetes Design zu erstellen und/oder Ihre Website zu sichern.
Sie können nicht zu vorsichtig sein!
So fügen Sie WordPress JavaScript hinzu
Es gibt mehrere Möglichkeiten, Ihrer WordPress-Site benutzerdefinierten Javascript-Code hinzuzufügen, von denen jede ihre eigenen Verwendungszwecke hat:
- Fügen Sie mithilfe eines Plugins wie WPCode ein Skript in ausgewählte Seiten ein
- Fügen Sie das Skript einer bestimmten oder einzelnen Seite Ihrer Wahl oder mehreren Seiten mit functions.php hinzu
- JavaScript zu allen Seiten hinzufügen
- Fügen Sie Ihrem Theme-Header eine Javascript-Datei hinzu
- Verwenden des wp_head-Hooks zum Hinzufügen von benutzerdefiniertem JavaScript
- Fügen Sie JavaScript zu Ihrer WordPress-Fußzeile hinzu
- Hinzufügen von JavaScript zu WordPress Video
- JavaScript zu einem WordPress-Widget hinzufügen
Lassen Sie uns jede dieser Methoden im Detail durchgehen.
Dann teilen wir Ihnen schnell mit, wie Sie JavaScript debuggen, nachdem Sie es einer Seite hinzugefügt haben.
NoteHinweis: Bei einigen dieser Techniken werden Änderungen an Kerndateien vorgenommen. Obwohl es normalerweise keine gute Idee ist, functions.php und andere zentrale WordPress-Dateien zu ändern, möchten wir Ihnen alle Möglichkeiten zeigen, Code hinzuzufügen.
Wir empfehlen nicht unbedingt, Änderungen auf diese Weise vorzunehmen, aber wir glauben daran, Ihnen alle Informationen zu geben und dann Ihre eigene Entscheidung zu treffen.
1. Verwenden Sie ein Plugin wie WPCode
Wenn Sie einfach ein Plugin zum Einbetten einer Javascript-Referenz in die Kopf- oder Fußzeilendatei des WordPress-Themes verwenden möchten, ist das WPCode-Plugin eine einfache und kostenlose Option.
Wir empfehlen die Verwendung eines Plugins für alle Codeänderungen, da es alles sauber hält und spätere Probleme vermeiden kann.
Anstatt die Dateien des Designs direkt mit dem benutzerdefinierten Javascript-Code zu ändern, ermöglicht Ihnen ein Plugin, den Code einzufügen, der dann je nach den von Ihnen gewählten Optionen zur Kopf- oder Fußzeile Ihrer Website hinzugefügt wird.
Dieses Plugin unterstützt mehrere verschiedene Optionen, daher beschreiben wir nur die häufigsten, die Sie verwenden müssen.
Du kannst dich Laden Sie WPCode herunter hier oder installieren Sie es mit der Install Plugins-Funktion von WordPress.
Installieren Sie das WPCode-Plugin:
- Melden Sie sich beim Backend oder Administrator Ihrer Site an.
- Gehen Sie zu Plugins > Hinzufügen neuer
- Suchen Sie nach dem Plugin „WPCode“ und klicken Sie auf Jetzt installieren.
- Klicken Sie nach der Installation auf Mehr erfahren
Sie können jetzt entweder ein benutzerdefiniertes Skript ohne Datei laden (z. B. um ein Skript hinzuzufügen, das Sie erhalten haben, z. B. Google Analytics) 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 hinzuzufügen.
Dies kann verwendet werden, wenn Sie einen Dienst eines Drittanbieters 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 der ab Globale Kopf- und Fußzeile Fenster.
Sie können wählen, ob Sie das Skript zur Kopf-, Haupt- oder Fußzeile hinzufügen möchten. Sie sollten sich vom Anbieter des Skripts beraten lassen, in welchen dieser Abschnitte Sie das Skript einfügen müssen.
Angenommen, Sie möchten es der Kopfzeile hinzufügen:
Klicken Sie auf Kostenlos erhalten und dann auf Installieren. Änderungen speichern beenden.
Das WPCode-Plugin fügt nun den Code zu jeder Seite Ihrer Website hinzu.
Laden Sie das Front-End neu und überprüfen Sie die Quelle Ihrer Website, um sicherzustellen, dass der Code jetzt angezeigt wird. Es ist auch eine gute Idee, ein paar Seiten zu durchsuchen, um zu bestätigen, dass alles noch gut funktioniert.
Mit WPCode können Sie auch Ihre eigenen Codeschnipsel erstellen.
Sie können Code-Snippets auch überall auf Ihrer Website einfügen, z. B. innerhalb von Beiträgen oder Seiten, vor oder nach einem Beitrag, vor oder nach Inhalten oder einer Reihe anderer Optionen, die Sie möglicherweise benötigen.
Einfach navigieren zu Code Snippets > Ausschnitt hinzufügen und dann auswählen Erstelle deine Eigenen.
Sie werden nun zu einem Benutzerdefiniertes Snippet erstellen Seite, auf der Sie Ihrem Code einen Titel geben und ihn in die einfügen können Code-Vorschau Box.
Dann von der Codetyp Dropdown-Menü, wählen Sie JavaScript-Schnipsel.
Scrollen Sie dann einfach nach unten, bis Sie das erreichen Einfügen Bereich.
Sie müssen nur noch einen Speicherort für den Code aus dem Dropdown-Menü auswählen. Lokalisieren Seite, Beitrag, benutzerdefinierter Beitragstyp und geben Sie an, wo der Code auf der Seite oder im Beitrag angezeigt werden soll.
Wenn Sie möchten, dass WPCode das Snippet vor oder nach einem Absatz platziert, können Sie angeben, vor welchem Absatz im Beitrag es erscheinen soll.
Wenn Sie beispielsweise eine 1 in das Feld „Nummer einfügen“ eingeben, wird das Code-Snippet vor oder nach dem ersten Absatz angezeigt. Verwenden Sie für den zweiten Absatz 2 und so weiter.
Schalten Sie danach einfach den Schalter am oberen Rand des Bildschirms 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 der Verwendung eines Plugins besteht darin, dass es sich um eine anfängerfreundliche Option handelt. Sie müssen sich keine Gedanken über die Bearbeitung der Dateien Ihres Designs machen. Das WPCode-Plugin könnte auch nützlich sein, wenn Sie nach einer Naht suchenless Möglichkeit, andere Arten von Code und benutzerdefiniertes CSS hinzuzufügen.
Der Nachteil dieser Methode besteht jedoch darin, dass ein Plugin eines Drittanbieters installiert werden muss, was einige Websitebesitzer zu vermeiden versuchen.
Wenn Sie Ihre Erweiterungen auf ein Minimum beschränken möchten, ist es möglicherweise besser, eine der anderen Methoden zu verwenden.
Auch wenn dies ziemlich einfach erscheint, liegt es möglicherweise außerhalb Ihrer Komfortzone. Wenn Sie dies also schnell erledigen möchten, sehen Sie sich einige an Entwickler auf Fiverr, der 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 einer einzelnen Seite Ihrer Wahl hinzuzufügen.
Dies nutzt die IS_PAGE Funktion, die Sie finden können hier:
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_adminusw.
Wenn Sie die Datei zu allen Seiten hinzufügen müssen, scrollen Sie weiter, um unten weitere 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 holen Sie sich dann die ID der Seite von der URL, wie Sie unten sehen können. Die ID ist die Nummer in der URL der Browserleiste.
- Nachdem Sie die ID der Seite haben, müssen Sie die .js-Datei an einen Speicherort hochladen. Wir empfehlen, dass Sie die .js-Datei in Ihren Vorlagenordner hochladen, möglicherweise im untergeordneten Verzeichnis.
- Sobald Sie das hochgeladen haben, müssen Sie genau das Verzeichnis und den Namen der .JS-Datei notieren, die wir anstelle von PATH_TO_JS_FILE unten verwenden. Als Beispiel könnte sich Ihre Datei in Folgendem befinden:
https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js - Notieren Sie sich diese vollständige URL und ersetzen Sie die unten stehende PATH_T_JS_FILE. Sie müssen auch die ID ersetzen, die Sie von oben gefunden haben.
- Fügen Sie den vollständigen Code unten am Ende des Funktionen Datei Ihrer Vorlage.
Funktion collectiveray_load_js_script() {
if (is_page (ID)) {
wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', Array ('jquery'), '', false);
// oder verwenden Sie die folgende Version, wenn Sie genau wissen, wo sich die Datei befindet
// wp_enqueue_script ('js-file', 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 geringfügige Variation des wp_enqueue_script verwenden:
wp_enqueue_script ('js-file', 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, werden Sie feststellen, dass die Datei hinzugefügt wurde. Sie können dies bestätigen, indem Sie auf Quelle anzeigen der Seite klicken.
Wenn Sie die Javascript-Datei nicht zu einer Seite hinzufügen, sondern zu einer einzelnen Seite hinzufügen möchten, können Sie diese Funktion leicht anpassen, damit sie auf einen einzelnen Beitrag angewendet wird. Sie können eine beliebige Variante der folgenden verwenden:
- is_single ('17') - verwendet die Post-ID
- is_single ('Mein Beitragstitel') - verwendet den Titel des Beitrags, um zu überprüfen, ob dies der Beitrag ist, zu dem die Datei hinzugefügt werden soll
- is_single ('mein-post-titel') - prüft gegen die Schnecke des Pfostens
- is_single (Array (17, 'Mein Post-Titel', 'Mein Post-Titel')) - Hiermit wird überprüft, ob eine der Bedingungen für die Post-ID "17", für den Slug "My-Post-Title" oder für den Titel "My Post Title" lautet.
- is_single () - andere Variationen der Funktion is_single, die ein Array von Werten verwenden, gegen die geprüft werden soll
Der Code wäre in diesem Fall der folgende oder eine geringfügige Abweichung in Abhängigkeit von den Parametern der Funktion is_single.
Funktion collectiveray_load_js_script() {
if (is_single ('17 ')) {
wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', Array ('jquery'), '', false);
// oder verwenden Sie die folgende Version, wenn Sie genau wissen, wo sich die Datei befindet
// wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
}
}
add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');
Wenn Sie den Beitragstitel haben, können Sie diesen anstelle des Parameters "17" verwenden. Auch hier kann das wp_enqueue_script angepasst werden an:
wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
3. JavaScript zu allen Seiten hinzufügen
Wie wir gesehen haben, ist die einfachste und sauberste Methode, Ihrem WordPress-Theme eine Javascript-Datei hinzuzufügen, die Verwendung von functions.php Datei mit wp_enqueue_script.
Anstatt eine Bedingung zum Hinzufügen des Inhalts zu bestimmten Seiten zu erstellen, fügen wir in diesem Fall eine generische Funktion hinzu.
Hier ist, wie es geht:
Öffne deine functions.php Datei und kopieren Sie das folgende Code-Snippet darauf. Stellen Sie sicher, dass Sie die Vorlagen-URL durch Ihre ersetzen, bevor Sie sie speichern.
Funktion collectiveray_theme_scripts_function() {
wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_thema_scripts_funktion');
Wenn du bist Verwenden eines untergeordneten Themasmü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 Datei functions.php bearbeiten. Diese Methode kann auch verwendet werden, um Features und Funktionen sowohl zu deinem Theme als auch zu WordPress selbst hinzuzufügen. Dieser Ansatz kann beispielsweise JavaScript in einem einzelnen Beitrag oder einer Seite oder allen Seiten installieren.
Der Hauptnachteil dieser Strategie besteht darin, dass Sie sich mit Code befassen und die Dateien Ihrer Website aktualisieren müssen. Wenn Ihnen die Erfahrung in diesem Bereich fehlt, 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 möglicherweise, dass die JavaScript-Datei auf Ihrer gesamten Website verwendet wird, möchten jedoch kein Plugin verwenden, um dies zu tun.
Wenn Sie beispielsweise allen Ihren Seiten ein Skript eines Drittanbieters hinzufügen möchten (z. B. das Skript instantpage.js, um Ihre Website schneller zu machen), können Sie das Skript oder die referenzierte Skriptdatei selbst in die einfügen head Ihrer header.php Vorlagendatei.
DAS IST NICHT IDEAL. Wenn Sie Ihr Design aktualisieren, gehen diese Änderungen möglicherweise verloren. Wenn Sie dies dennoch direkt tun möchten, wird dringend empfohlen, ein untergeordnetes Thema 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 hinzugefügt werden. Dies ist genau das Gleiche, als würden Sie Javascript-Code in eine HTML-Seite einfügen.
Um die Javascript-Datei zu Ihrer Site hinzuzufügen, klicken Sie auf headverwenden Sie den folgenden Code:
Stellen Sie sicher, dass Sie die definiert haben type richtig, sonst ist Ihre Seite nicht gültig. Stellen Sie außerdem sicher, dass das Verzeichnis / die Skripte im Thema vorhanden sind und Sie die Datei myscript.js hinzugefügt haben.
Sie können dann einen beliebigen Verweis auf Funktionen hinzufügen, die in der Datei verwendet werden, die Sie gerade zum HTML hinzugefügt haben, wo Sie sie verwenden müssen.
Dies ist beispielsweise ein Beispiel für die Verwendung der gerade hinzugefügten Funktion.
" >Überschrift geht hier
4. Verwenden des wp_head-Hooks zum Hinzufügen von benutzerdefiniertem JavaScript
Sie können Ihrem Header auch benutzerdefiniertes JavaScript hinzufügen, indem Sie das verwenden wp_head Aktionshaken. Auch diese Lösung wird nicht bevorzugt, da sie eine übermäßige Anzahl von Skripten generiert. Es ist, nieless, besser als das manuelle Einfügen der Skripte in Ihre header.php-Datei.
Diese Methode, die auch für die Fußzeile verwendet werden kann, verwendet die Aktionshaken, um Inline-Skripte in Ihre Website einzufügen. Anders als die wp-Enqueue-Skriptfunktion, die benutzerdefinierte Skripts in die Warteschlange einreiht, druckt die wp-Head-Methode die Skripts in Ihrer Kopfzeilenvorlage (und Fußzeile, 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 collecter_custom_javascript() { ?>
<?php } add_action('wp_head', 'collective_custom_javascript');
Es ist erwähnenswert, dass der wp head Hook nur am Frontend Ihrer Website funktioniert. Dies bedeutet, dass benutzerdefiniertes JavaScript, das durch diesen Ansatz hinzugefügt wird, nicht in den Verwaltungs- oder Anmeldebereichen angezeigt wird. Wenn Sie diesen Speicherorten jedoch JavaScript hinzufügen möchten, können Sie dies tun, indem Sie die Aktions-Hooks Admin Head und Login Head verwenden.
Entwickler mögen die wp-Enqueue-Skriptfunktion, weil sie Konflikte vermeidet, die mit anderen Lösungen auftreten können, wie z. B. das direkte Hinzufügen von Skripten zu Ihrer 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 stören kann, die ihre eigenen Skripte laden. Diese Konfiguration kann auch dazu führen, dass mehrere Skripts mehrmals geladen werden, was die Gesamtgeschwindigkeit und Leistung Ihrer Website verlangsamen kann.
5. Fügen Sie JavaScript zu Ihrer WordPress-Fußzeile hinzu
Das Hinzufügen von JavaScript zu Ihrer WordPress-Fußzeile ist relativ einfach. Sie können der Kopf- oder Fußzeilendatei Code hinzufügen, ein benutzerdefiniertes Codeelement in Ihrem Seitenersteller oder Design verwenden oder ein bestimmtes Kopf- und Fußzeilen-Plugin verwenden.
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 dem Kopf- und Fußzeilen einfügen Menü.
Fügen Sie dann Ihren JavaScript-Code in den Fußbereich der Seite ein.
Speichern Sie Ihre Änderungen, wenn Sie fertig sind.
IMH
Sie wollen eine schnelle Website?
Wen veräpple ich? Tun wir das nicht alle?
Warum also kämpfen so viele von uns?
Die größte Herausforderung besteht normalerweise darin, ein schnelles und zuverlässiges Hosting-Unternehmen zu finden.
Wir haben alle Albträume durchgemacht - der Support dauert ewig oder löst unser Problem nicht, indem wir immer etwas auf Ihrer Seite beschuldigen ...
Aber der größte Mist ist, dass sich die Website immer langsam anfühlt.
At CollectiveRay Wir hosten mit InMotion-Hosting und unsere Website ist verdammt schnell. Wir laufen auf einem benutzerdefinierten Stack von LightSpeed-Servern, die auf MariaDB mit einer PHP7.4-Engine eingerichtet sind und über Cloudflare laufen.
In Kombination mit unseren Front-End-Optimierungen bedienen wir jeden Tag zuverlässig 6000 Benutzer, mit Spitzen von mehr als 50 gleichzeitigen Benutzern.
Möchten Sie ein schnelles Setup wie unseres bekommen? Übertragen Sie Ihre Website kostenlos auf das InMotion-Hosting und erhalten Sie 50 % RABATT auf die aktuellen Preise.
Testen Sie InMotion Hosting mit 50 % RABATT für CollectiveRay Besucher NUR im April 2024!
6. Hinzufügen von JavaScript zu WordPress Video
WordPress ist so erweiterbar, dass Sie Ihrer Website auf einfache Weise neue Features und Funktionen hinzufügen können, ohne Ihr gesamtes Thema neu gestalten oder ersetzen zu müssen. Anstatt das WordPress-Theme von Grund auf neu zu erstellen, können Sie die Funktionalität durch einfaches Hinzufügen von Plugins hinzufügen.
Und wenn die Funktionalität, die Sie hinzufügen möchten, eher klein ist und Sie kein Plugin erstellen oder installieren müssen, können Sie das verwenden functions.php Datei oder verschiedene andere Möglichkeiten, um Javascript zu WordPress hinzuzufügen, ohne ein separates Plugin erstellen zu müssen.
Das Beste, was über die Funktionsdatei ist, dass es sich wie ein Plugin verhält, mit dem Funktionen hinzugefügt und die Funktionalität sowohl des Themas als auch von WordPress selbst erweitert werden können.
Obwohl Sie leicht hinzufügen können Javascript-Code direkt zu Ihrem header.php Datei, aber es gibt ein Problem mit dieser Methode.
Es kann tatsächlich zu Konflikten mit anderen Plugins führen, wenn diese ihre eigenen JS-Skripte laden.
In diesem Artikel von CollectiveRay, werfen wir einen Blick auf den richtigen Weg, um Javascript zu WordPress-Themes hinzuzufügen. Als WordPress-Entwickler ist dies eines der Dinge, die wir sehr oft tun müssen.
(Spezielle Notiz: Suchen Sie nach einer Liste von Optimierungen / Tricks, die Sie problemlos auf Ihrer WordPress-Site vornehmen können, ohne ein Plugin zu verwenden? Sie können unseren Leitfaden hier beziehen: 101 WordPress-Tricks, die jeder ernsthafte Blogger kennen muss.)
7. JavaScript zu einem WordPress-Widget hinzufügen
Wenn Sie etwas 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 aus Als HTML bearbeiten.
Fügen Sie Ihr JavaScript hinzu tags and select Aktualisierung.
Der von Ihnen hinzugefügte Code sollte sofort sichtbar sein, wenn Sie das Widget im Frontend Ihrer Website anzeigen.
So debuggen Sie einen JavaScript-Fehler auf einer WordPress-Seite
Das Debuggen von JavaScript ist ein zeitaufwändiger Prozess, aber für Anfänger unvermeidlich.
Glücklicherweise haben Sie die Tools zur Hand, um nach Fehlern zu suchen.
Öffnen Sie eine Seite in Ihrem Browser und drücken Sie F12 oder wählen Sie Entwicklertools aus dem Menü (Chrome). Sie können auch Strg + Umschalt + J (Windows/Linux) oder Cmd + Option + J (Mac) verwenden.
Wähle aus Konsul (Console) Registerkarte des neuen Teils des Bildschirms, der sich öffnet, und Sie sehen alle JavaScript-Fehler rot hervorgehoben.
Identifizieren Sie, woher der Fehler kommt, und korrigieren Sie den relevanten Teil des von Ihnen hinzugefügten JavaScripts.
Arbeiten Sie sich durch, bis alle Fehler behoben sind.
WordPress hat einen eigenen Debugging-Modus, aber die Verwendung kann etwas kompliziert sein. Ich würde empfehlen, sich die anzuschauen 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. Die clientseitige Programmierung ermöglicht es Entwicklern, eine Vielzahl interessanter Dinge zu erreichen, ohne Ihre Website zu verlangsamen. Möglicherweise werden Sie häufig aufgefordert, ein JavaScript-Code-Snippet zu kopieren und in Ihre WordPress-Website einzufügen, wenn Sie einen Videoplayer einbetten, Taschenrechner oder andere Dienste von Drittanbietern hinzufügen möchten.
Wie füge ich eine Javascript-Datei zu WordPress hinzu?
Der einfachste Weg, eine Javascript-Datei zu WordPress hinzuzufügen, ist die Verwendung des Insert WPCode-Plugins.
- Melden Sie sich bei Ihrer Website an und installieren Sie das WPCode-Plugin.
- Klicken Sie nach der Installation auf Aktivieren
- Speichern Sie Ihren JavaScript-Code oder Ihre JavaScript-Datei in einer neuen Datei mit dem . Js Erweiterung.
- Laden Sie es in Ihre Site in den folgenden Ordner hoch: wp-content / theme / / js /
- Gehen Sie zu Einstellungen > WPCode einfügen
- Fügen Sie den Skripten in der Kopfzeile Folgendes hinzu:
<script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>
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 „WPCode einfügen“ verwenden, um das Skript zum Header hinzuzufügen, und dann das Skript von einem beliebigen Teil des Themas, Posts oder Plugins aus aufrufen, von dem aus Sie es verwenden möchten.
Wie füge ich meinen eigenen Code zu WordPress hinzu?
Der beste Weg, um Ihren eigenen Code zu WordPress hinzuzufügen, ist über die Datei functions.php. Es wird empfohlen, dass Sie ein untergeordnetes Thema erstellen und dann Ihre eigenen Änderungen am untergeordneten Thema hinzufügen, damit die Aktualisierbarkeit Ihres Themas nicht beeinträchtigt wird.
Wie bearbeite ich Javascript in WordPress?
Der beste Weg, um Javascript in WordPress zu bearbeiten, besteht darin, ein untergeordnetes Thema zu erstellen und dann Ihre Änderungen an Javascript hinzuzufügen oder andere Funktionen im untergeordneten Thema anzupassen. Auf diese Weise können Sie Javascript nach Bedarf bearbeiten, ohne den Rest Ihres Themas oder die Aktualisierbarkeit des Themas zu beeinträchtigen.
Zusammenfassung
Die oben genannten drei Methoden sind der sauberste Weg, um Javascript zu WordPress hinzuzufügen. Im Allgemeinen sollten fortgeschrittene Benutzer, die über umfangreiche Codeerfahrung verfügen und sicher sein können, dass sie wissen, wie sie vorgenommene Änderungen rückgängig machen können, den Code direkt optimieren. Ansonsten ist es am besten, sich an Plugins zu halten. Wenn Sie den Code nicht selbst optimieren möchten, können Sie sich gerne an unsere Partner auf Fiverr wenden, die ihn für Sie heute erledigen können
Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden
Bitte kontaktieren Sie uns, wenn Sie Probleme im Zusammenhang mit dieser Website haben oder lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!
Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.
und viele mehr ...