113 VIEWS

It’s #FrontendFriday – WordPress – JavaScript in Beitrag einbetten

29.05.2020

Hallo #FrontendFriday-Leser/in,

ihr möchtet in euren Beitrag JavaScript einfügen, um etwas an einem Codebeispiel zu zeigen oder den Beitrag an sich ’smarter‘ zu machen? Dann habe ich euch hier einige Möglichkeiten zusammengetragen.

Generell im Editor die „Text“-Ansicht anstelle der „Visuell“ Ansicht wählen. So kann man auch eigene HTML Elemente hinzufügen und ist flexibler bei der Gestaltung.

Code darstellen

Hier im Beitrag nutze ich dazu die Seite codepen.io [1], die es erlaubt HTML, CSS wie auch JS Code anzuzeigen. Auch kann das Ergebnis angezeigt werden. Dazu muss man einen Account erstellen, einen eigenen Pen erstellen und unten rechts auf Embed drücken. Hier kann man dann die gewünschte Darstellung und Art der Einbettung wählen (hier habe ich das empfohlene html gewählt).

Code ausführen

Inline

Wenn ihr den Code direkt im Beitrag einfügen wollt, fügt euch WordPress <p> Tags in den Code und macht diesen kaputt (Google Suche). Um dies zu verhindern könnt ihr einfach
//<![CDATA[
um euren Code machen
//]]>.
Ob dieser Ansatz von der eingesetzten WordPress-Version abhängt weiß ich leider nicht. Für mich war er zumindest hier die Lösung :) Schreibt gerne eure Erfahrung.

Beispiel: Code hier in der Seite embedded:

changeMe


Extern laden

Ist euer Code auf einem Server gehostet, so könnt ihr diesen per script tag und dem attribut src einbinden.

Beispiel siehe 3D Visualisierung im Browser.

Es gibt auch extra WordPress Plugins, mit denen man Code einbinden kann. Ich finde diese einfachen Möglichkeiten aber am Besten, da man diese ohne weitere extra Plugins nutzen kann. Wenn ihr noch weitere Tipps habt, gerne in die Kommentare :)

Schönes Wochenende!
Nico


Links
[1] codepen.io – Abgerufen 2020-05-28

Zurück zur Übersicht

Kommentar verfassen

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

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.