It’s #FrontendFriday – WordPress – JavaScript in Beitrag einbetten
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 solltet ihr 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
See the Pen
Wordpress – Show JavaScript by Nico (@nmutter)
on CodePen.
Code ausführen
Inline
//<![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
See the Pen
Wordpress – Inline JavaScript by Nico (@nmutter)
on CodePen.
Extern laden
Beispiel siehe 3D Visualisierung im Browser.
See the Pen
Wordpress – External JavaScript by Nico (@nmutter)
on CodePen.
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
