# 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.

## Wann ist es sinnvoll, JavaScript in WordPress einzubinden?

[WordPress](https://www.ionos.at/digitalguide/hosting/cms/wordpress-das-bekannte-cms-unter-der-lupe/) 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.

Tipp Ebenso wichtig wie die Wahl des geeigneten [Content-Management-Systems](https://www.ionos.at/digitalguide/hosting/cms/cms-vergleich/ "CMS Vergleich") ist eine passende Webadresse. Bei IONOS können Sie mit wenigen Klicks eine individuelle [Domain registrieren](https://www.ionos.at/domains/domain-registrieren "Domain kaufen & günstig registrieren – IONOS") und dabei von Vorzügen wie einem kostenfreien SSL/TLS-Zertifikat oder einem Domain Lock profitieren.

Soll [interaktiver Content](https://www.ionos.at/digitalguide/online-marketing/suchmaschinenmarketing/interaktiver-content-mit-einzigartigem-inhalt-zum-erfolg/) 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](https://www.ionos.at/digitalguide/online-marketing/verkaufen-im-internet/lead-generation-die-ersten-schritte/) 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:

1. Filtern von Skript-Tags deaktivieren
2. JavaScript in Header der WordPress-Seiten einbinden
3. JavaScript in WordPress-Footer einbinden
4. JavaScript per WordPress-Plugin möglich machen

Tipp Sie sind noch auf der Suche nach einer geeigneten Hosting-Umgebung für Ihr WordPress-Projekt? Mit dem [Hosting für WordPress](https://www.ionos.at/hosting/wordpress-hosting "IONOS Hosting für WordPress aus Deutschland") von IONOS erhalten Sie Zugriff auf leistungsstarke, ausfallsichere Hardware mit schnellem SSD-Speicher, Caching und [CDN](https://www.ionos.at/digitalguide/hosting/hosting-technik/was-ist-ein-content-delivery-network-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:**

```php
define( 'CUSTOM_TAGS', true );
```

Danach erweitern Sie die Theme-Datei ***functions.php*** um folgenden Eintrag:

```php
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.

Tipp Lesen Sie an anderer Stelle im Digital Guide, wie Sie grundsätzlich vorgehen müssen, um [JavaScript in HTML einzubinden](https://www.ionos.at/digitalguide/websites/web-entwicklung/javascript-in-html-einbinden/).

### 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](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-header-bearbeiten/ "WordPress-Header bearbeiten") 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:

```php
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:

```php
function wpb_hook_javascript() {
	if (is_page ('10')) { 
		?>
			<script type="text/javascript">
				// JavaScript-Code
			</script>
		<?php
	}
}
add_action('wp_head', 'wpb_hook_javascript');
```

Tipp Bevor Sie Ihrem Projekt globalen JavaScript-Code hinzufügen, sollten Sie unbedingt ein [WordPress-Backup erstellen](https://www.ionos.at/digitalguide/hosting/blogs/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](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-footer-bearbeiten/ "WordPress-Footer bearbeiten") unterbringen. In diesem Fall ist der Parameter „wp\_head“ durch „**wp\_footer**“ zu ersetzen:

```php
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:

```php
function wpb_hook_javascript() {
	if (is_page ('10')) { 
		?>
			<script type="text/javascript">
				// JavaScript-Code
			</script>
		<?php
	}
}
add_action('wp_footer', 'wpb_hook_javascript');
```

Tipp 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:

- [WordPress-Gallery-Plugins](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-gallery-plugins/)
- [WordPress-Menü-Plugins](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-menue-plugins/)
- [WordPress-Mobile-Plugins](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-mobile-plugins/)
- [WordPress-Slider-Plugins](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-slider-plugins/)
- [WordPress-Tabellen-Plugins](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-tabellen/)

### 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](https://wordpress.org/plugins/scripts-n-styles/ "wordpress.org: Plugin „Scripts n Styles“"). Das Skript-Plugin installieren Sie folgendermaßen:

1. Melden Sie sich im WordPress-Backend an.
2. Wählen Sie im linken Seitenmenü nacheinander „**Plugins**“ und „**Installieren**“ aus.
3. Suchen Sie nach „Scripts n Styles“ und drücken Sie bei dem passenden Suchresultat auf „**Jetzt installieren**“.
4. Nach der Installation drücken Sie auf „**Aktivieren**“.

[![Bild: WordPress-Backend: Installation von „Scripts n Styles“](https://www.ionos.at/digitalguide/fileadmin/_processed_/a/6/csm_wordpress-backend-installation-von-scripts-n-styles_e5ad0e136b.webp "WordPress-Backend: Installation von „Scripts n Styles“")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-backend-installation-von-scripts-n-styles.jpg) WordPress-Backend: Installation von „Scripts n Styles“ 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“)

[![Bild: WordPress: JavaScript-Code einfügen mit dem Plugin „Scripts n Styles“](https://www.ionos.at/digitalguide/fileadmin/_processed_/0/e/csm_wordpress-javascript-code-einfuegen-mit-dem-plugin-scripts-n-style_44b240557a.webp "WordPress: JavaScript-Code einfügen mit dem Plugin „Scripts n Styles“")](https://www.ionos.at/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-javascript-code-einfuegen-mit-dem-plugin-scripts-n-style.jpg) WordPress: JavaScript-Code einfügen mit dem Plugin „Scripts n Styles“  Fazit 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.


This is a markdown version of: [https://www.ionos.at/digitalguide/hosting/blogs/javascript-in-wordpress-einbinden/](https://www.ionos.at/digitalguide/hosting/blogs/javascript-in-wordpress-einbinden/) for AI/LLM consumption.