JavaScript-Funktionen in WordPress-Artikeln aufrufen?

Für die Ausführung kleiner eigener JavaScript-Funktionen durch den Seitenbesucher wollte ich diese ganz einfach in einem anchor-Tag einbauen, sodass diese wie ein Link angeklickt werden können. Eine Aufgabe die normalerweise (k)eine Minute dauert, wenn man sich Zeit lässt und dabei noch anderen Kram macht. Bei WordPress führte dies zu einer unverhätnismäßigen Recherche, viel Unverständnis und Zeitverschwendung.

Grundsätzlich

Um eigene oder weitere JavaScript-Dateien in WordPress hinzuzufügen bedarf es auch noch einigen Aufwandes oder eines Plugins wie „Scripts ’n Styles“, da man nicht einfach Skripte im Header oder Footer reinballern kann. Dazu folgt noch ein weiterer Artikel.

 

Was wollte ich erreichen?

Über ein einfaches anchor-Tag wollte ich die Funktion aus meinem JavaScript-Code aufrufen. Dies geht auf zwei Arten eigentlich relativ simpel.

Entweder so:

oder so:

 

Das Problem

Der Wechsel zwischen Text- und visuellem Editor schmeißt einem Javascript-Aufrufe, wie die zuvor gezeigten, einfach wieder aus dem Artikel raus! Der Link bleibt zwar stehen, aber der JavaScript-Aufruf fehlt dann. Dieser wird wohl „zur Sicherheit“ herausgefiltert. So wie es aussieht, kann man dies auch nicht deaktivieren.

 

Lösung

Solange man den Artikel im Texteditor abspeichert und nicht wieder in den visuellen Editor wechselt bleibt der anchor-Tag mit dem JavaScript-Aufruf auch nach dem Speichern stehen und kann genutzt werden. Wahrscheinlich müsste man, sofern man sich mit diesem Problem nicht weiter aufhalten möchte, mit einem Event-Listener darauf prüfen ob der Link geklickt wird, damit dieser vom eigentlichen Text getrennt ist. Aber das war mir dann doch etwas zu viel des Guten.

Statt den anchor-Tag aber einfach so in den Artikel zu packen, den ich mit Sicherheit irgendwann wieder bearbeiten und aus Vergesslichkeit dafür sorgen würde, dass der Code wieder verschwindet und dies dann auch nicht mehr merken würde, habe ich das Problem lieber wie folgt umgangen:

Mit Hilfe des Plugins „Shortcoder“, mit welchem ich auch Adsense-Anzeigen und der gleichen mit eigenen Shortcodes in Artikel integriere, habe ich für die entsprechenden JavaScript-Aufrufe neue einzelne Shortcodes angelegt, welche jeweils den gesamten anchor-Tag enthalten:

 

Wichtig ist, dass man auch hier darauf achtet im „Text-Editor“-Modus zu bleiben.

Da dieser nun nicht direkt im Artikel „drin steht“, sondern wie rechts abgebildet auf diesen verwiesen wird, kann nichts passieren. Solange man den Shortcode nicht mehr bearbeitet und dort nicht in die visuelle Ansicht wechselt.

Am besten testen kann man das ganze einfach mit der alert-Funktion, welche ich in meiner eigenen Funktion „testMessage“ benutzt habe um ein einfaches Dialogfenster im Browser anzeigen zu lassen:

 

Fazit

WordPress mag wirklich toll sein um schnell eine Webseite aufzuziehen und auch komplett unbedarften Anwendern eine Plattform zum Eintippen von Text zu bieten und ist über viele Plugins und Themes individuell nutzbar. Sobald es aber ans Eingemachte geht hat man ordentlich Probleme, da vermeintlich einfache Dinge einfach nicht wie gewohnt funktionieren. Bei einem selbstgecodeten Projekt habe ich für die gleiche Aktion einen Bruchteil der nun verschwendeten Zeit benötigt…

 

 

Tobias Langner

Tobias Langner

Ich arbeite seit mehreren Jahren als Software-Release-Manager, zuvor als IT-Administrator, bin ausgebildeter Fachinformatiker für Systemintegration und Studium-"Pausierer" an der FernUni Hagen. Achtung: Für die Richtigkeit der zur Verfügung gestellten Informationen, Skripte, etc. übernehme ich keine Gewähr. Deren Nutzung geschieht ausdrücklich auf eigene Gefahr!

Alle Beiträge ansehen von Tobias Langner →

Schreibe einen Kommentar

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