Der Editor in WordPress verhindert das Einbinden von Skripten – das ist Absicht und ein Sicherheits-Feature. Content Management Systeme wie WordPress trennen den Inhalt vom Design: Der Administrator legt die Regeln für das Aussehen und die Formatierung der Website fest und die verschiedenen Autoren können daran nichts ändern. Allerdings gibt es gute Gründe, warum Sie Skripte wie Zum Beispiel JavaScript in WordPress einbinden sollten.

Gründe für die Einbindung von Skripten

Mit JavaScript lassen sich Veränderungen am Layout und Inhalt umsetzen, auch könnten Autoren einfach schadhafte Skripte einfügen und so Schaden anrichten. Für den normalen WordPress-Autor ist die Verhinderung von Skripten sinnvoll, dennoch kann das individuelle Hinzufügen von JavaScript zu bestimmten Seiten und Beiträgen ratsam sein:

  • Einige Audio- und Videoplayer benötigen zum Funktionieren ein Skript.
  • Interaktive Seiten erfordern die Einbettung von Drittanbieter-Skripten.
  • Formulare von Drittanbietern, zum Beispiel für die Lead-Generierung, funktionieren häufig nur mit Skripten.

3 Wege zum Hinzufügen von JavaScript zu Seiten und Beiträgen

Es stehen drei Möglichkeiten zur Verfügung:

  • das Filtern von Skript-Tags in WordPress deaktivieren
  • das Laden von Skripten mit einem Plugin ermöglichen
  • Advanced Custom Fields verwenden

1. Methode für JavaScript in WordPress: Filtern von Skript-Tags deaktivieren

Sie vertrauen Ihren Autoren? Dann deaktivieren Sie einfach das Blocken von Skript-Tags. Dafür bearbeiten Sie im Root-Verzeichnis der WordPress-Installation die Datei wp-config.php und fügen folgende Codezeile hinzu:

define( 'CUSTOM_TAGS', true );

Der Datei functions.php wird dieser Code hinzugefügt:

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

Wichtig: Mit dieser Methode deaktivieren Sie das Sicherheits-Feature für alle Zugangsebenen und die gesamte WordPress-Seite! Jeder zugriffsberechtigte Anwender kann nun einen potenziellen Schadcode einfügen.

2. Methode für JavaScript in WordPress: Skripte erlauben mit Scripts n Styles

Zum Verwalten von JavaScript in Seiten und Beiträgen existieren für WordPress zahlreiche Plugins. Zu den vielseitigsten und nützlichsten Plugins für das individuelle Laden von Skripten zählt Scripts n Styles. Mit diesem Plugin erlauben Sie das Einbinden von JavaScript über die gesamte Seite oder Teile der Seite.

Abbildung 1: Mit dem Plugin Scripts n Styles ermöglichen Sie das Einbinden von Skripten

Alternativ erlauben Sie das Einfügen von Skripten auf Seiten- oder Beitrags-Level:

Abbildung 2: Sie können ein <script>-Tag am Ende eines Beitrags oder einer Seite einfügen

Fügen Sie wahlweise einen eigenen JavaScript-Code oder eine externe Quelle ein, entweder innerhalb des <head>-Tags oder vor dem </body>-Tag.

3. Methode für JavaScript in WordPress: Advanced Custom Fields verwenden

Mit dem beliebten und weitverbreiteten Plugin Advanced Custom Fields implementieren Sie in WordPress ohne viel Aufwand Custom Fields. Nach der Installation und Aktivierung befindet sich im Admin-Bereich ein neuer Menüpunkt mit dem Namen „Custom Fields“. Mit dem folgenden Beispiel erstellen Sie ein neues Feld, das nur der Administrator nutzen kann. Wahlweise kann er einen JavaScript-Code oder eine JavaScript-Datei in den Header oder vor dem schließenden Body-Tag einfügen. Führen Sie dafür diese Schritte aus:

  1. Auf „Custom Fields“ > „Custom Fields“ und „Add New“ klicken.
  2. Der „Field Group“ einen Namen geben, zum Beispiel „JavaScript Settings“.

Abbildung 3: Das Plugin Advanced Custom bietet praktische Funktionen und wurde bereits mehr als eine Million Mal heruntergeladen

  1. Im Bereich „Rules“ legen Sie fest, dass das Feld für den Administrator und keine anderen Anwender sichtbar ist.
  2. Im Bereich „Style“ wählen Sie Standard (WP metabox) aus, damit das Feld unterhalb des Texteditors angezeigt wird.

Abbildung 4: Header- und Footer-Script hinzufügen

  1. Jetzt fügen Sie das Header-Script und Footer-Script hinzu und konfigurieren zwei wichtige Einstellungen: Tragen Sie den Field-Namen ein, der später im Template Code referenziert wird. Und setzen Sie die Formatierung auf „Convert HTML into tags“, damit das Template den Inhalt korrekt ausführt (siehe Abbildung 5 und 6).

Abbildung 5: Field Name und Formatierung eintragen

Abbildung 6: Bei der Formatierung "Convert HTML into tags" auswählen

Jetzt werden die Felder im Admin-Bereich angezeigt und Eingaben gespeichert. Was noch fehlt, ist die Anzeige über das Template.

  1. Öffnen Sie die Datei header.php im Ordner des aktiven Templates und fügen Sie folgende Codezeile vor dem </head>-Tag hinzu:

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

Abbildung 7: Das Header-Skript im Template

In der Datei footer.php ergänzen Sie vor dem </body>-Tag:

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

Abbildung 8: Der Skript-Code im Footer

  1. Speichern Sie die Template-Dateien ab, aktualisieren Sie die Seiten oder Beiträge mit JavaScript und klicken Sie auf veröffentlichen. Das JavaScript ist jetzt korrekt in WordPress eingebunden. Mit dem Plugin Advanced Custom Fields sind spezifischere Regelungen für bestimmte Nutzergruppen möglich. Wir empfehlen die Berechtigungen möglichst eng einzuschränken.

 
Bildnachweis: Fotolia, Lizenz: Host Europe

Wolf-Dieter Fiege

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/