Aus Si­cher­heits­grün­den können Stan­dard­nut­zer und -nut­ze­rin­nen nor­ma­ler­wei­se in WordPress kein Ja­va­Script einbinden. Wollen Sie Ihre Website in­ter­ak­ti­ver gestalten, stellen Skripte aber eine bequeme und schnelle Lösung dar. Wir zeigen Ihnen, welche Mög­lich­kei­ten Sie haben, um in WordPress mit Ja­va­Script zu arbeiten.

KI-Assistent kostenlos – Ihr smarter All­tags­hel­fer
  • DSGVO-konform & sicher gehostet in Deutsch­land
  • Pro­duk­ti­vi­tät steigern – weniger Aufwand, mehr Output
  • Direkt im Browser starten – ohne In­stal­la­ti­on

Wann ist es sinnvoll, Ja­va­Script in WordPress ein­zu­bin­den?

WordPress ist ein klas­si­sches Content-Ma­nage­ment-System, das Inhalt und Design von­ein­an­der trennt. Grund­sätz­lich ist diese strikte Trennung praktisch und sinnvoll: Ad­mi­nis­tra­to­ren und Ad­mi­nis­tra­to­rin­nen haben die Mög­lich­keit, die tech­ni­schen und optischen Aspekte zu managen. Autoren und Au­torin­nen können sich derweil gänzlich auf die in­halt­li­che Ge­stal­tung fo­kus­sie­ren. In WordPress Ja­va­Script und andere Skripte für normale Backend-User zu blo­ckie­ren, ist daher grund­sätz­lich ein guter Ansatz – ins­be­son­de­re, da so das Risiko schad­haf­ter Codes minimiert wird.

Tipp

Ebenso wichtig wie die Wahl des ge­eig­ne­ten Content-Ma­nage­ment-Systems ist eine passende Web­adres­se. Bei IONOS können Sie mit wenigen Klicks eine in­di­vi­du­el­le Domain re­gis­trie­ren und dabei von Vorzügen wie einem kos­ten­frei­en SSL/TLS-Zer­ti­fi­kat oder einem Domain Lock pro­fi­tie­ren.

Soll in­ter­ak­ti­ver Content ein fester Be­stand­teil der in­halt­li­chen Ge­stal­tung sein, führt praktisch kein Weg an Ja­va­Script vorbei: Ver­schie­de­ne Audio- und Vi­deo­play­er funk­tio­nie­ren aus­schließ­lich mit dem passenden Skript. Gleiches gilt auch für viele Formulare von Dritt­an­bie­tern, die bei­spiels­wei­se zur Lead-Ge­ne­rie­rung im Einsatz sind. Auch wer verstärkt auf andere in­ter­ak­ti­ve Elemente wie Chats, Umfragen oder Wis­sens­tests setzen möchte, sollte in WordPress das Ja­va­Script-Einbinden unbedingt möglich machen.

Ja­va­Script in WordPress einbinden: Diese Mög­lich­kei­ten gibt es

Es exis­tie­ren ver­schie­de­ne Wege, um Nutzern und Nut­ze­rin­nen von WordPress die Ja­va­Script-Ein­bin­dung zu er­mög­li­chen bzw. Ja­va­Script in WordPress ein­zu­bin­den. Zu den besten und ein­fachs­ten Lösungen zählen die folgenden:

  1. Filtern von Skript-Tags de­ak­ti­vie­ren
  2. Ja­va­Script in Header der WordPress-Seiten einbinden
  3. Ja­va­Script in WordPress-Footer einbinden
  4. Ja­va­Script per WordPress-Plugin möglich machen
Tipp

Sie sind noch auf der Suche nach einer ge­eig­ne­ten Hosting-Umgebung für Ihr WordPress-Projekt? Mit dem Hosting für WordPress von IONOS erhalten Sie Zugriff auf leis­tungs­star­ke, aus­fall­si­che­re Hardware mit schnellem SSD-Speicher, Caching und CDN.

Mög­lich­keit 1: Filtern von Skript-Tags de­ak­ti­vie­ren

Sie können die stan­dard­mä­ßi­ge Blo­ckie­rung von Skript-Tags für alle Nut­zer­rol­len und das gesamte WordPress-Projekt aus­schal­ten. Dieses Si­cher­heits-Feature sollten Sie al­ler­dings nur dann de­ak­ti­vie­ren, wenn alle zu­griffs­be­rech­tig­ten Nutzer und Nut­ze­rin­nen erfahren im Umgang mit Skripten sind – an­dern­falls ist das Risiko schäd­li­cher Codes infolge un­se­riö­ser Skripte unnötig hoch.

Um die Filterung von Skript-Tags aus­zu­schal­ten, fügen Sie im ersten Schritt folgende Zeile in die Kon­fi­gu­ra­ti­ons­da­tei wp-config.php ein:

define( 'CUSTOM_TAGS', true );
php

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' );
php

Im Anschluss können alle Nutzer und Nut­ze­rin­nen Ja­va­Script in WordPress einbinden, indem sie an der ge­wünsch­ten Stelle einer Seite die ent­spre­chen­den Skript-Tags einbinden.

Tipp

Lesen Sie an anderer Stelle im Digital Guide, wie Sie grund­sätz­lich vorgehen müssen, um Ja­va­Script in HTML ein­zu­bin­den.

Mög­lich­keit 2: Ja­va­Script in Header der WordPress-Seiten einbinden

Die Option, in WordPress Ja­va­Script ein­zu­bin­den, soll nicht pauschal für alle Zu­griffs­be­rech­tig­ten geöffnet werden? In diesem Fall können Sie auch mit der manuellen Skript-Ein­bin­dung via WordPress-Header arbeiten. Der Code muss bei dieser Vor­ge­hens­wei­se manuell in der functions.php eingefügt werden, sodass sich die Be­rech­ti­gung in­di­vi­du­ell festlegen lässt.

Möchten Sie ein Skript für die gesamte Website im Header einbinden – bei­spiels­wei­se den Code eines Tracking-Tools – fügen Sie in der Theme-Kon­fi­gu­ra­ti­ons­da­tei folgenden Input ein:

function wpb_hook_javascript() {
	?>
		<script>
			// JavaScript-Code
		</script>
	<?php
}
add_action('wp_head', 'wpb_hook_javascript');
php

Natürlich können Sie den ge­wünsch­ten Ja­va­Script-Code auch nur in eine einzelne Seite einbinden. Hierfür benötigen Sie lediglich die ID der ge­wünsch­ten 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 bei­spiels­wei­se 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');
php
Tipp

Bevor Sie Ihrem Projekt globalen Ja­va­Script-Code hin­zu­fü­gen, sollten Sie unbedingt ein WordPress-Backup erstellen!

Mög­lich­keit 3: Ja­va­Script in Footer des WordPress-Projekts einbinden

Anstatt Ja­va­Script über den Header Ihrer Website ein­zu­fü­gen, können Sie die Skripte auch im WordPress-Footer un­ter­brin­gen. 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');
php

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');
php
Tipp

Plugins sind ein ele­men­ta­rer Be­stand­teil von WordPress – doch welche Er­wei­te­run­gen lohnen sich ei­gent­lich wirklich? Im Digital Guide finden Sie Artikel zu den ver­schie­dens­ten Plugin-Ka­te­go­rien inklusive der be­lieb­tes­ten Vertreter:

Mög­lich­keit 4: Ja­va­Script mit Wordpress-Plugin einbinden

Wenn Ihnen die manuelle Anpassung der Theme-Datei nicht möglich oder zu kom­pli­ziert ist, können Sie auch auf WordPress-Plugins zu­rück­grei­fen, um Ja­va­Script in Ihr Projekt ein­zu­bin­den. Eine der be­lieb­tes­ten Er­wei­te­run­gen hierfür ist Scripts n Styles. Das Skript-Plugin in­stal­lie­ren Sie fol­gen­der­ma­ßen:

  1. Melden Sie sich im WordPress-Backend an.
  2. Wählen Sie im linken Sei­ten­me­nü nach­ein­an­der „Plugins“ und „In­stal­lie­ren“ aus.
  3. Suchen Sie nach „Scripts n Styles“ und drücken Sie bei dem passenden Such­re­sul­tat auf „Jetzt in­stal­lie­ren“.
  4. Nach der In­stal­la­ti­on drücken Sie auf „Ak­ti­vie­ren“.
Bild: WordPress-Backend: Installation von „Scripts n Styles“
WordPress-Backend: In­stal­la­ti­on von „Scripts n Styles“

Nach der In­stal­la­ti­on finden Sie das WordPress-Ja­va­Script-Plugin in der Rubrik „Werkzeuge“ im linken Sei­ten­me­nü. Wenn Sie das Menü der Er­wei­te­rung aufrufen, können Sie wahlweise Snippets in HTML, CSS oder Ja­va­Script in Ihr WordPress-Projekt einbinden. Für Ja­va­Script haben Sie die drei Optionen:

  • Cof­fee­Script
  • Skripts im Header („for the head element“)
  • Skripts im Footer („end of the body element“)
Bild: WordPress: JavaScript-Code einfügen mit dem Plugin „Scripts n Styles“
WordPress: Ja­va­Script-Code einfügen mit dem Plugin „Scripts n Styles“
Fazit

Mit Ja­va­Script-Code verleihen Sie Ihrem WordPress-Projekt mehr In­ter­ak­ti­vi­tät. Wollen Sie allen Nutzern und Nut­ze­rin­nen die Mög­lich­keit geben, Skripte ein­zu­bin­den, können Sie die De­ak­ti­vie­rung von Skript-Tags aufheben oder ein Plugin verwenden. Al­ter­na­tiv haben User mit Zugriff auf die functions.php die Option, Code in Header oder Footer ein­zu­bin­den.

Zum Hauptmenü