✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

JavaScript zu WordPress hinzufügen: So geht’s ganz einfach

86

Leute, die WordPress verwenden, sollten mehr über JavaScript erfahren und wie es für eine Website verwendet wird. Um JavaScript zu WordPress hinzuzufügen, müssen Sie den am besten geeigneten Weg finden, es für Ihre eigene Website zu implementieren.

Forschung ist von großer Bedeutung, da eine falsche Implementierung von JavaScript zu schwer zu behebenden Konsequenzen führen kann.

Inhaltsverzeichnis

Was ist ein WordPress-JavaScript?

Ein WordPress-JavaScript ist eine Möglichkeit, einer Website zusätzliche Funktionen hinzuzufügen, ohne sie zu verlangsamen. JavaScript stellt eine Programmiersprache dar, die auf dem Browser des Benutzers ausgeführt wird. Diese Art der Programmierung bietet Entwicklern die Möglichkeit, alle möglichen Funktionen zu ihren Websites hinzuzufügen, beispielsweise eingebettete Videoplayer, Taschenrechner oder andere Dienste. Der JavaScript-Code muss einfach kopiert und in den Code der Website eingefügt werden.

Warum sollten Sie benutzerdefiniertes JavaScript in WordPress hinzufügen?

JavaScript zu WordPress hinzufügen: So geht’s ganz einfach

Es gibt mehrere Gründe, warum Sie JavaScript zu WordPress hinzufügen sollten, aber dazu müssen Sie wissen, wie die Website codiert ist. Beim Codieren einer WordPress-Website gibt es drei Elemente, die Ihnen helfen können:

  • HTML
  • CSS
  • JavaScript

Um eine sehr solide Basis für die WordPress-Site zu schaffen, können Sie HTML und CSS verwenden. Obwohl sie großartig sind, um das Fundament der Website zu legen, sind sie in Bezug auf die Änderung des Verhaltens der Website begrenzt. Wenn Sie möchten, dass sich Ihre Website auf eine bestimmte Weise verhält, können Sie JavaScript verwenden, um eine der folgenden Aktionen auszuführen:

  • Ändern, Ausblenden oder Anzeigen bestimmter HTML-Elemente auf der Website
  • Werte zu CSS-Variablen hinzufügen sowie komplexere Vorgänge ausführen (Variablen zusammenführen oder ein Element durch Klicken interaktiv machen)
  • Ändern des Layouts des WordPress-Themes durch Hinzufügen eines weiteren Codeblocks darin
  • Ändern einer bestimmten Funktionalität eines WordPress-Plugins
  • Anreicherung der Website mit dynamischen Inhalten (Animationen, Videos etc.)
  • Einbinden eines externen Elements in die Website (APIs von Drittanbietern)

All dies – und mehr – kann mit JavaScript durchgeführt werden.

Verwenden von Kopf- und Fußzeilen einfügen zum Hinzufügen von JavaScript

JavaScript zu WordPress hinzufügen: So geht’s ganz einfach

Wenn Sie JavaScript zu WordPress hinzufügen, müssen Sie einfach den Block des JavaScript-Codes kopieren und auf der Website einfügen. Diese einfache Aktion fügt der Website ein Tool eines Drittanbieters hinzu, sei es ein Videoplayer oder ein anderes Element. Diese Code-Snippets wurden entweder direkt unter dem Head-Bereich oder direkt vor dem Tag im Hauptcode der Website hinzugefügt. Dies beeinflusst, wo das Element platziert wird. Um dieses Plugin mit dem Namen Kopf- und Fußzeilen einfügen zu aktivieren, müssen Sie es zuerst installieren.

Um es nach der Installation zu aktivieren, müssen Sie nur die Einstellungen und dann die Seite Kopf- und Fußzeilen einfügen erreichen. Es gibt zwei verschiedene Kästchen, die Sie ankreuzen können – eines für die Kopfzeile, eines für die Fußzeile. Sobald Sie dieses Plugin aktiviert haben, können Sie einfach das JavaScript-Code-Snippet einfügen und auf Speichern klicken. Da das Plugin aktiviert ist, wird das von Ihnen eingefügte Code-Snippet automatisch für alle Seiten Ihrer Website geladen. Dies ist das grundlegendste Wissen, das Sie benötigen, um JavaScript zu WordPress hinzuzufügen.

WordPress-Filter deaktivieren

Wenn Sie JavaScript in WordPress verwenden, sollten Sie auch das Blockieren von Skript-Tags von JavaScript deaktivieren. Diese Einstellung befindet sich in wp-config.php, die sich im Root-Webverzeichnis befindet. Um benutzerdefinierte Tags zu aktivieren, fügen Sie dort diese Codezeile hinzu:

define( 'CUSTOM_TAGS', true );

Wenn Sie zur Seite functions.php wechseln, kopieren Sie dieses Code-Snippet und fügen Sie es in Ihren Basiscode ein:

function add_scriptfilter( $string) {global $allowedtags;$allowedtags['script'] = array( 'src' => array() );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );

Extra-Tipp: Die Verwendung dieser Methode bedeutet, dass Sie die Sicherheitsfunktion auf Ihrer Website für jede Benutzerberechtigungsstufe deaktivieren. Verwenden Sie diese Methode nur, wenn Sie Ihren Autoren tief vertrauen. Das Aktivieren des script-Tags ist auf diese Weise manchmal riskant.

Erfahren Sie, wie Sie das Plugin Script n Styles verwenden

JavaScript zu WordPress hinzufügen: So geht’s ganz einfach

Sie können JavaScript zu WordPress hinzufügen, indem Sie ein Plugin verwenden. Normalerweise müssten Sie JavaScript innerhalb der Tags und laden. Um JavaScript global zu laden, kann ein Plugin verwendet werden. Ein reaktionsschnelles ist Script n Styles. Sie können Skripte entweder auf der gesamten Website oder auf Seiten- oder sogar Beitragsebene einfügen. Sie können auch Benutzerberechtigungen ändern. Autoren können Beiträge veröffentlichen und das JavaScript aktivieren, und Mitwirkende können die Beiträge speichern, ohne sie tatsächlich zu veröffentlichen.

Verwenden Sie erweiterte benutzerdefinierte Felder

JavaScript zu WordPress hinzufügen: So geht’s ganz einfach

Wenn Sie sich fragen, wie Sie am einfachsten JavaScript zu WordPress hinzufügen können, könnte dieses Plugin die Lösung sein. Sobald Sie das Plugin installiert und aktiviert haben, können Sie auf die Option Benutzerdefinierte Felder im Verwaltungsmenü zugreifen. Dann können Sie auf Neu hinzufügen klicken. Der Zweck besteht darin, ein Feld hinzuzufügen, auf das Administratoren zugreifen können und das eine JavaScript-Quelldatei oder JavaScript-Code in die Tags einbetten kann.

  • Der erste Schritt ist die Benennung der Feldgruppe. Dies kann durch Aktivieren einer Regel erfolgen, die diese Option anzeigt, wenn sich der Benutzer als Administrator anmeldet. Dies bedeutet, dass nur der Administrator diese auf der Site hinzufügen kann.
  • Die Felder sollten unterhalb des Inhaltsbereichs angezeigt werden, was bedeutet, dass Sie Standard auswählen, wenn es um die Auswahl des Stils der Feldgruppe geht. Setzen Sie die Formatierung des Feldes auf „HTML in Tags umwandeln”. Dies führt zu einer guten Ausgabe, andernfalls könnte es schlecht übersetzt werden.
  • Fügen Sie den folgenden Code in header.php hinzu:

<?php the_field('header_script'); ?>

Dies sollte vorher hinzugefügt werden.

<?php the_field('footer_script'); ?>

Dies sollte vorher hinzugefügt werden.

  • Speichern Sie die Vorlagendateien, aktualisieren Sie die Seite und klicken Sie auf „Veröffentlichen”.

Die Seite wird mit dem hinzugefügten JavaScript veröffentlicht. Die erweiterten benutzerdefinierten Felder sind eine geeignete Option, wenn Sie mehr Funktionalität für Benutzer, bereits veröffentlichte Seiten usw. wünschen.

Hey, wussten Sie, dass Daten auch schön sein können?

wpDataTables kann es so machen. Es gibt einen guten Grund, warum es das Nr. 1-WordPress-Plugin zum Erstellen von reaktionsschnellen Tabellen und Diagrammen ist.

JavaScript zu WordPress hinzufügen: So geht’s ganz einfach

Ein aktuelles Beispiel für wpDataTables in freier Wildbahn

Und es ist wirklich einfach, so etwas zu tun:

  1. Sie stellen die Tabellendaten bereit
  2. Konfigurieren und anpassen
  3. Veröffentlichen Sie es in einem Beitrag oder einer Seite

Und es ist nicht nur hübsch, sondern auch praktisch. Sie können große Tabellen mit bis zu Millionen Zeilen erstellen, oder Sie können erweiterte Filter und Suchfunktionen verwenden, oder Sie können wild werden und sie bearbeitbar machen.

„Ja, aber ich mag Excel einfach zu sehr und auf Websites gibt es so etwas nicht”. Ja, das gibt es. Sie können bedingte Formatierung wie in Excel oder Google Sheets verwenden.

Habe ich Ihnen schon gesagt, dass Sie mit Ihren Daten auch Diagramme erstellen können? Und das ist nur ein kleiner Teil. Es gibt viele andere Funktionen für Sie.

Abschließende Gedanken zum Hinzufügen von JavaScript zu WordPress 

Diese Tipps sollten ausreichen, um Ihnen beizubringen, wie Sie auf einfache Weise JavaScript zu WordPress hinzufügen können, ohne auf Probleme zu stoßen. Nachdem Sie es einmal getan haben, wird das zweite Mal viel einfacher und weniger zeitaufwändig sein.

Wenn Ihnen dieser Artikel über das Hinzufügen von JavaScript zu WordPress gefallen hat, sollten Sie sich diesen Artikel über das Zurücksetzen von WordPress ansehen.

Wir haben auch über einige verwandte Themen geschrieben, z. B. wie man die WordPress-URL ändert, wie man Videos in WordPress einbettet, wie man HTML in WordPress bearbeitet, wie man eine Seite in WordPress dupliziert, wie man WordPress-Benutzerrollen bearbeitet und wie man WordPress-Feature-Bilder hinzufügt .

Aufnahmequelle: wpdatatables.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen