Javascript zu Wordpress hinzufügen [2024] 💥
Möglicherweise benötigen Sie JavaScript für einen bestimmten Inhalt oder die gesamte Website. Dies ist nützlich, um Tools von Drittanbietern einzubetten, Tracking-Skripte wie Google Analytics und Facebook Pixel hinzuzufügen und sogar Funktionen zu Ihrer Website hinzuzufügen. Es gibt viele Optionen zum Hinzufügen von JavaScript in WordPress.
Anzeige
1. Javascript zu Wordpress hinzufügen mit Gutenberg
Einzelner Beitrag/Seite
Es ist möglich, Javascript zu einem einzelnen Beitrag oder einer Seite hinzuzufügen, indem der standardmäßige Wordpress-Editor namens Gutenberg verwendet wird. Öffnen Sie einen Beitrag/eine Seite mit Gutenberg. Klicken Sie auf das Symbol + (Plus), um einen neuen Block hinzuzufügen. Verwenden Sie das Suchfeld, geben Sie ein: "html". Klicken Sie auf „Benutzerdefiniertes HTML“. Hier können Sie Ihren JS-Code schreiben oder einfügen. Vergessen Sie nicht, mit script-Tags zu öffnen und zu schließen. Siehe Screenshot unten.
Websiteweit
Wenn Sie Javascript-Code zu Wordpress hinzufügen möchten, der auf der gesamten Website und nicht nur auf einer Seite oder einem Beitrag funktioniert, benötigen Sie entweder ein gutes Thema wie Divi oder jede gute Prämie Theme oder du musst mit einem Plugin arbeiten. Siehe Optionen unten.
2. Javascript zu Wordpress hinzufügen mit DiviBuilder
Einzelner Beitrag/Seite
Fahren wir mit dem besten Seitenersteller da draußen fort. Öffnen Sie Ihren Beitrag oder Ihre Seite mit DiviBuilder . Klicken Sie auf das graue Plus (+), das ein neues Modul öffnet. Klicken Sie auf das Modul „Code“. Es gibt 3 Registerkarten, gehen Sie zur Registerkarte "Inhalt" und fügen Sie dort Ihr Javascript ein. Vergessen Sie nicht, mit script-Tags zu öffnen und zu schließen.
Websiteweit
Das Codemodul kann verwendet werden, um ein paar Codezeilen zu einer Seite oder einem Beitrag auf Ihrer Website hinzuzufügen. Wenn Sie jedoch möchten, dass Ihr Code-Code auf Ihrer gesamten Website ausgeführt wird, müssen Sie die Divi-Designoptionen-Konsole verwenden, um Ihr JavaScript und jQuery einzugeben. Navigieren Sie zu „Divi-Designoptionen“ und klicken Sie dann auf die Registerkarte „Integration“. Suchen Sie den Schalter „Header-Codes aktivieren“ und stellen Sie sicher, dass er aktiviert ist. Fügen Sie Ihr Javascript zu diesem Abschnitt hinzu: "Code zum HEAD Ihres Blogs hinzufügen". Vergessen Sie nicht, mit script-Tags zu öffnen und zu schließen.
3. Javascript zu Wordpress hinzufügen mit Elementor
Einzelner Beitrag/Seite
Und so fügen Sie mit dem zweitbesten Pagebuilder namens Elementor Javascript zu Wordpress hinzu. Öffnen Sie Ihren Beitrag oder Ihre Seite mit Elementor. Verwenden Sie die Suche in Elementor, geben Sie „html“ ein. Ziehen Sie das HTML-Modul auf das Quadrat in der Mitte der Seite. Siehe Screenshot.
Jetzt können Sie Ihr Javascript in das Feld einfügen. Vergessen Sie nicht, den Code mit Skript-Tags zu öffnen und zu schließen. Siehe Screenshot unten.
4. Javascript zu Wordpress hinzufügen mit Plugin
Wir werden das beliebte WPCode-Plugin verwenden. WPCode ist ein beliebter Code-Editor, der früher als Insert Headers or Footers bekannt war. Sie können JavaScript direkt in die Fuß- oder Kopfzeile Ihrer Website einfügen, getreu seinem früheren Namen. Sie können die Funktionen verwenden, um JavaScript bedingt für bestimmte Inhalte oder Benutzer zu laden.
Laden Sie zunächst das kostenlose WordPress.org-Plugin herunter und aktivieren Sie es. Alternativ gehen Sie zu „Plugins“ >> „Neu hinzufügen“ und suchen Sie nach dem Namen des Plugins. Navigieren Sie als Nächstes zu „Codeschnipsel“. Klicken Sie dann auf „+Snippet hinzufügen“. Auf diese Weise können Sie Ihr erstes JavaScript-Snippet erstellen.
Sie können einige voreingestellte Snippets verwenden, die im Plugin enthalten sind. Sie können Ihr eigenes Snippet hinzufügen, indem Sie den Mauszeiger über die Option „Eigenen benutzerdefinierten Code hinzufügen (neues Snippet)“ bewegen und auf „Snippet verwenden“ klicken.
Geben Sie Ihrem Snippet als Nächstes einen Namen, damit Sie sich daran erinnern können. Wählen Sie JavaScript-Snippet als Codetyp aus. Sie können dann Ihr JavaScript-Code-Snippet zum Codefeld hinzufügen. Unten sehen Sie, wie es aussieht, wenn Sie den Tracking-Code von Google Analytics hinzufügen.
5. Javascript zu Wordpress hinzufügen using functions.php
Diese Methode ist nichts für Anfänger. Functions.php wird verwendet, um die Funktionalität von WordPress CMS zu verbessern, indem benutzerdefinierter Code zugelassen wird. Sie benötigen ein Child-Theme, um functions.php verwenden und Ihrer Website benutzerdefinierte Funktionen hinzufügen zu können. Nachdem Ihr Child-Theme eingerichtet wurde und Sie eine functions.php-Datei erstellt haben, können Sie mit der Vorbereitung des Skriptcodes Ihrer Website beginnen. Führen Sie die obigen Schritte aus, um einen Ordner (mit dem Namen „js“ in Ihrem untergeordneten Themenordner) zu erstellen, und fügen Sie dann die entsprechenden Skriptdateien hinzu, z. B. javascript-file.js.
Nachdem die Dateien hinzugefügt wurden, gehen Sie zu functions.php und fügen Sie den folgenden Code ein:
function mycustomscript_enqueue() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/javascript-file.js' );
}
add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );Anzeige