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.
Alternativ erlauben Sie das Einfügen von Skripten auf Seiten- oder Beitrags-Level:
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:
- Auf „Custom Fields“ > „Custom Fields“ und „Add New“ klicken.
- Der „Field Group“ einen Namen geben, zum Beispiel „JavaScript Settings“.
- Im Bereich „Rules“ legen Sie fest, dass das Feld für den Administrator und keine anderen Anwender sichtbar ist.
- Im Bereich „Style“ wählen Sie Standard (WP metabox) aus, damit das Feld unterhalb des Texteditors angezeigt wird.
- 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).
Jetzt werden die Felder im Admin-Bereich angezeigt und Eingaben gespeichert. Was noch fehlt, ist die Anzeige über das Template.
- Ö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'); ?>
In der Datei footer.php ergänzen Sie vor dem </body>-Tag:
<?php the_field(‘footer_script'); ?>
- 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
