JavaScript in WordPress einbinden – Wege und Anleitungen
Aus Sicherheitsgründen können Standardnutzer und -nutzerinnen normalerweise in WordPress kein JavaScript einbinden. Wollen Sie Ihre Website interaktiver gestalten, stellen Skripte aber eine bequeme und schnelle Lösung dar. Wir zeigen Ihnen, welche Möglichkeiten Sie haben, um in WordPress mit JavaScript zu arbeiten.
Domain Bundle Aktion
Nur für kurze Zeit: So erhalten Sie zwei Gratis-Domains!
Kaufen Sie eine .de-Domain und erhalten eine .com und .info Domain gratis dazu.
Wann ist es sinnvoll, JavaScript in WordPress einzubinden?
WordPress ist ein klassisches Content-Management-System, das Inhalt und Design voneinander trennt. Grundsätzlich ist diese strikte Trennung praktisch und sinnvoll: Administratoren und Administratorinnen haben die Möglichkeit, die technischen und optischen Aspekte zu managen. Autoren und Autorinnen können sich derweil gänzlich auf die inhaltliche Gestaltung fokussieren. In WordPress JavaScript und andere Skripte für normale Backend-User zu blockieren, ist daher grundsätzlich ein guter Ansatz – insbesondere, da so das Risiko schadhafter Codes minimiert wird.
Ebenso wichtig wie die Wahl des geeigneten Content-Management-Systems ist eine passende Webadresse. Bei IONOS können Sie mit wenigen Klicks eine individuelle Domain registrieren und dabei von Vorzügen wie einem kostenfreien SSL/TLS-Zertifikat oder einem Domain Lock profitieren.
Soll interaktiver Content ein fester Bestandteil der inhaltlichen Gestaltung sein, führt praktisch kein Weg an JavaScript vorbei: Verschiedene Audio- und Videoplayer funktionieren ausschließlich mit dem passenden Skript. Gleiches gilt auch für viele Formulare von Drittanbietern, die beispielsweise zur Lead-Generierung im Einsatz sind. Auch wer verstärkt auf andere interaktive Elemente wie Chats, Umfragen oder Wissenstests setzen möchte, sollte in WordPress das JavaScript-Einbinden unbedingt möglich machen.
JavaScript in WordPress einbinden: Diese Möglichkeiten gibt es
Es existieren verschiedene Wege, um Nutzern und Nutzerinnen von WordPress die JavaScript-Einbindung zu ermöglichen bzw. JavaScript in WordPress einzubinden. Zu den besten und einfachsten Lösungen zählen die folgenden:
- Filtern von Skript-Tags deaktivieren
- JavaScript in Header der WordPress-Seiten einbinden
- JavaScript in WordPress-Footer einbinden
- JavaScript per WordPress-Plugin möglich machen
Sie sind noch auf der Suche nach einer geeigneten Hosting-Umgebung für Ihr WordPress-Projekt? Mit dem WordPress-Hosting von IONOS erhalten Sie Zugriff auf leistungsstarke, ausfallsichere Hardware mit schnellem SSD-Speicher, Caching und CDN.
Möglichkeit 1: Filtern von Skript-Tags deaktivieren
Sie können die standardmäßige Blockierung von Skript-Tags für alle Nutzerrollen und das gesamte WordPress-Projekt ausschalten. Dieses Sicherheits-Feature sollten Sie allerdings nur dann deaktivieren, wenn alle zugriffsberechtigten Nutzer und Nutzerinnen erfahren im Umgang mit Skripten sind – andernfalls ist das Risiko schädlicher Codes infolge unseriöser Skripte unnötig hoch.
Um die Filterung von Skript-Tags auszuschalten, fügen Sie im ersten Schritt folgende Zeile in die Konfigurationsdatei wp-config.php ein:
define( 'CUSTOM_TAGS', true );Danach erweitern Sie die Theme-Datei functions.php um folgenden Eintrag:
function add_scriptfilter( $string ) {global $allowedtags;$allowedtags['script'] = array( 'src' => array () );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );Im Anschluss können alle Nutzer und Nutzerinnen JavaScript in WordPress einbinden, indem sie an der gewünschten Stelle einer Seite die entsprechenden Skript-Tags einbinden.
Lesen Sie an anderer Stelle im Digital Guide, wie Sie grundsätzlich vorgehen müssen, um JavaScript in HTML einzubinden.
Möglichkeit 2: JavaScript in Header der WordPress-Seiten einbinden
Die Option, in WordPress JavaScript einzubinden, soll nicht pauschal für alle Zugriffsberechtigten geöffnet werden? In diesem Fall können Sie auch mit der manuellen Skript-Einbindung via WordPress-Header arbeiten. Der Code muss bei dieser Vorgehensweise manuell in der functions.php eingefügt werden, sodass sich die Berechtigung individuell festlegen lässt.
Möchten Sie ein Skript für die gesamte Website im Header einbinden – beispielsweise den Code eines Tracking-Tools – fügen Sie in der Theme-Konfigurationsdatei folgenden Input ein:
function wpb_hook_javascript() {
?>
<script>
// JavaScript-Code
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');Natürlich können Sie den gewünschten JavaScript-Code auch nur in eine einzelne Seite einbinden. Hierfür benötigen Sie lediglich die ID der gewünschten Seite, die Sie im Rahmen einer einfachen if-Anweisung angeben. Für die WordPress-Seite mit der ID „5“ sieht der passende Eintrag in der functions.php beispielsweise wie folgt aus:
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// JavaScript-Code
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');Bevor Sie Ihrem Projekt globalen JavaScript-Code hinzufügen, sollten Sie unbedingt ein WordPress-Backup erstellen!
Möglichkeit 3: JavaScript in Footer des WordPress-Projekts einbinden
Anstatt JavaScript über den Header Ihrer Website einzufügen, können Sie die Skripte auch im WordPress-Footer unterbringen. In diesem Fall ist der Parameter „wp_head“ durch „wp_footer“ zu ersetzen:
function wpb_hook_javascript() {
?>
<script>
// JavaScript-Code
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript');Auch bei dieser Variante lassen sich Skripte nur in einzelne Seiten einbinden, indem Sie eine if-Anweisung ergänzen und die ID angeben:
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// JavaScript-Code
</script>
<?php
}
}
add_action('wp_footer', 'wpb_hook_javascript');Plugins sind ein elementarer Bestandteil von WordPress – doch welche Erweiterungen lohnen sich eigentlich wirklich? Im Digital Guide finden Sie Artikel zu den verschiedensten Plugin-Kategorien inklusive der beliebtesten Vertreter:
Möglichkeit 4: JavaScript mit Wordpress-Plugin einbinden
Wenn Ihnen die manuelle Anpassung der Theme-Datei nicht möglich oder zu kompliziert ist, können Sie auch auf WordPress-Plugins zurückgreifen, um JavaScript in Ihr Projekt einzubinden. Eine der beliebtesten Erweiterungen hierfür ist Scripts n Styles. Das Skript-Plugin installieren Sie folgendermaßen:
- Melden Sie sich im WordPress-Backend an.
- Wählen Sie im linken Seitenmenü nacheinander „Plugins“ und „Installieren“ aus.
- Suchen Sie nach „Scripts n Styles“ und drücken Sie bei dem passenden Suchresultat auf „Jetzt installieren“.
- Nach der Installation drücken Sie auf „Aktivieren“.
Nach der Installation finden Sie das WordPress-JavaScript-Plugin in der Rubrik „Werkzeuge“ im linken Seitenmenü. Wenn Sie das Menü der Erweiterung aufrufen, können Sie wahlweise Snippets in HTML, CSS oder JavaScript in Ihr WordPress-Projekt einbinden. Für JavaScript haben Sie die drei Optionen:
- CoffeeScript
- Skripts im Header („for the head element“)
- Skripts im Footer („end of the body element“)
Mit JavaScript-Code verleihen Sie Ihrem WordPress-Projekt mehr Interaktivität. Wollen Sie allen Nutzern und Nutzerinnen die Möglichkeit geben, Skripte einzubinden, können Sie die Deaktivierung von Skript-Tags aufheben oder ein Plugin verwenden. Alternativ haben User mit Zugriff auf die functions.php die Option, Code in Header oder Footer einzubinden.
Ähnliche Artikel
WordPress-Child-Themes erstellen: Funktionsweise und Aufbau
Mit einem WordPress-Child-Theme führen Sie Änderungen an Ihrem Haupt-Theme durch, ohne sich sorgen zu müssen, dass ein Theme-Update diese überspielt. Gerade wenn Sie größere Anpassungen im CSS vornehmen oder sogar den Aufbau des Layouts bearbeiten, lohnt es sich, ein WordPress-Child-Theme zu erstellen. Wir klären auf, was die wichtigsten Bestandteile sind und wie das Child-Theme funktioniert.
WordPress CSS: So bearbeiten Sie das Design Ihrer Website
Möchten Sie Ihre eigene Website nach Ihren Vorstellungen gestalten oder anpassen, können Sie auch WordPress direkt im Code arbeiten. Hier erklären wir Ihnen, mit welchen Tools Sie in WordPress das CSS bearbeiten, anpassen und speichern können. Durch unsere leicht verständlichen Anleitungen nehmen Sie die Änderungen unkompliziert selbst vor.
REDPIXEL.PLShutterstock In WordPress Lazy Loading einsetzen – so geht’s!
Die Performance von WordPress kann mit Lazy Loading noch verbessert werden. Indem Sie das smarte Laden von Bildern oder Videos einsetzen, verbessern Sie die User Experience und damit potenziell auch Ihre Positionierung in den Suchergebnissen von Google. Mithilfe von WordPress-Lazy-Load-Plugins können Sie die wichtige Funktion ganz einfach konfigurieren.
WordPress auf Nginx installieren und konfigurieren
Nginx hat sich als gute Alternative für einen klassischen Apache-Server etabliert. Den modernen Webserver kann man auch mit einem Content-Management-System verbinden. Wenn Sie WordPress mit Nginx kombinieren, erstellen Sie eine sehr leistungsfähige Website, die Ihre Besucherinnen und Besucher überzeugt. In nur wenigen Schritten ist die Installation aller Komponenten erledigt.
