Javascript und WordPress

JavaScript in Wordpress

Tipps und Tricks zu Javascript in WordPress

Erklärung meiner Empfehlung zur Einbettung per IFrame

Sicherlich hast du schon darüber nachgedacht oder dich verwundert, das ich dir empfehle Javascript in WordPress Beiträge per Iframe über eine HTML oder HTM Seite einzubinden!

Nun das hat jede Menge Gründe, bei grossen aufwendigen JavaScripten in deren Ausführung, zum beispiel ein Spiel ist, so musst du im Header die Funktion einfügen, im BodyTag das Load Ereigniss und im Body deine Definition inclusive eines oder mehreren Stylesheets und JavaScripten. Das kannst du Extern über eine HTML-Seite, geladen über IFrame problemlos bewerkstelligen und ausführen. Aber über deinen Blog nicht ohne grösseren Aufwand der Programmierarbeit und Probleme. Auch über ein grösseres Plugin könntest du das bewerkstelligen, keine Frage. Wenn du beispielsweise Entwickler eines solchen Plugin wärst, so wäre das auch eine sehr gute Lösung ohnehin. Aber hast du schon einmal darüber nachgedacht wenn der Entwickler eines solchen Plugins seine Dienste einstellt und du auf höhere WordPress Versionen ein Update ausführst oder musst, so könnte es sein das dieses Plugin in neueren Versionen deines Blogs, Onlineshop oder Homepage nicht mehr kompatibel ist und seinen Dienst versagt.

Aus diesem Grunde empfehle ich die Einbettung von JavaScript über eine externe Seite via IFrame (Inline Frame). Die in das IFrame geladene externe Seite sowie das IFrame kannst du zu 100% ohne grossen Aufwand voll an deinen Blog, Blogbeitrag, Onlineshop, Homepage oder sonstige Internetpräsenzen anpassen. Du kannst diese Technik über IFrame, nicht nur in WordPress verwenden, sondern auch auf beliebig anderen Internetpräsenzen, vollkommen Versionsunabhängig einsetzen. Die problemlose Anpassung der geladenen Seite im IFrame, kannst du über den BodyTag bewerkstelligen indem du innerhalb dieses Tags keine Attribute schreibst, wie <body bgcolor=“green> , sondern den BodyTag wie nachfolgend so belässt <body>. Somit wird die im IFrame geladene Seite Transparent geladen und wird mit dem Background (Hintergrundfarbe oder Textur) deines Blogs, Blogbeitrag, Onlineshops oder Homepage angezeigt. Wie du bemerkt hast kein grosser Aufwand oder ?

Auch das IFrame lässt sich problemlos anpassen in das deine Seite, die das JavaScript aufruft geladen wird. Indem du einige Parameter der Attribute nach deinem Geschmack änderst. Nachstehender Code für das IFrame zeigt einen neutralen Fensterbereich an wie du auf den vorangegangenen Beispielseiten gesehen hast. Den nachstehenden Code musst du anpassen an deine URL wo du die Seiten abgelegt hast (Ordner) und Name deiner Seite, beispiel meine_seite.html. Danach an eine beliebige Stelle in deinem Beitrag in den Quelltext einfügen, wo du das Anzeigen möchtest.

<iframe src=“http:// deine seite.de/html_ordner/beispiel.html“ style=“width:600px; height: 300px; border:none;“ name=“Deine Seite“ title=“Generische Beschreibung des Iframe-Inhalts“ scrolling=“no“ frameborder=“0″ align=aus marginheight=“0″ marginwidth=“0″></iframe>

Tipp: Wenn du die Attribute width und height im IFrame-Code entfernst, so passt sich dein JavaScript (Inhalt) automatisch an. Diese Attribute in obig stehendem Code sind für Themes, die Tabellenstrukturen mit mehreren Zellen als Grundgerüst verwenden. Wenn du dir aber nicht sicher bist, so belasse diese Attribute. Die Weite und die Höhe deines IFrames kannst du in Pixel (px) unter width und height auch problemlos festlegen.

Sicherlich ist dir auch schon aufgefallen das hier im IFrame weitere Attribute wie name und title vorhanden sind. Diese solltest du im IFrame verwenden für die Suchmaschinen. Die geladenen Seiten in den IFrames werden nicht Indexiert von den Suchmaschinen, aber den Namen und die Beschreibung der Seiten werden von den Robots eingelesen, die auf deinen Blog oder Beitrag verweisen und bei Suchanfragen angezeigt. Ich denke mal jetzt bist du bereit deine Scripte einzufügen in deine WordPress Beiträge

Hier noch ein Tipp zu JavaScript

Wenn du ein grösseres Aufwendiges Script verwendest oder ein external Browserübergreifendes Script, so Empfehle ich dir an einem nachfolgend kleinen beispiel einen CDATA Abschnitt zum Aufruf in deiner Seite die im IFrame angezeigt wird zu verwenden.

<script type=“text/javascript“>

  <![CDATA[

Function („http://www.dein_blog.de/dein_zielordner/dein_javascript.js“);

   ]]>

</script>

Unter Function die im Script-Code gelb hinterlegt ist kommt der Functionsaufruf deines zu ladenten Scripts hin.

Erklärung: CDATA steht für Charakter Data und bewirkt, das der Browser die Korrektheit des Codes (Syntax) beim Laden der Datei nicht prüft. In deinem Falle die Javascript Datei. Man spricht davon, das die Datei geparst wird. Dazu kommt der so genannte Parser zum Einsatz, der im Browser enthalten ist. Du und deine Besucher merken nichts davon, dass dieser im Hintergrund abläuft. Der Inhalt, der sich zwischen <![CDATA[ und ]] befindet wird vom Parser übersprungen. Somit hast du auch die Möglichkeit dein JavaScript ganz oder Teilweise auszuführen und Anzuzeigen etwaiger kleiner Syntaxfehler. Gerade bei Anfänger, aber auch Profis schleichen sich kleine Fehler ein. Bei Profis schlägt hier meistens die Routine zu.

Tatsache ist aber nun auch mal, das überwiegend viele Blogbetreiber mittlere oder wenig Erfahrung in der Programmierung und Anwendung von JavaScript haben, betreff von Internetrecherchen von mir. Aus diesem Grunde hat es mich bewogen diesen Beitrag zu schreiben und weitere folgen in naher Zukunft. Einfach von Zeit zur Zeit mal kurz vorbeischauen. Desweiteren biete ich dir noch eine weitere Anlaufstelle auf der Suchmaschine Steganus. Über die Suchmaschine Steganus kannst du dich kostenlos auf einem Forum zu WordPress und einer Kategorie anmelden, sollte noch keine Kategorie für deine Anfrage oder Beitrages vorhanden sein, so kannst du auch eine Erstellen. Auf allen Foren ist MyCode eingeschaltet womit du über Shortcuts deine Forumanfragen und Beiträge monetarisieren und dynamisch aufwerten kannst. Dieses Foren-Portal ist relativ neu, aber bietet dir enorme möglichkeiten. Eine Antwort für dich lässt nicht lange auf sich warten. Auch kannst du deinen Blog, Onlineshop oder jede andere Internetpräsenz kostenlos bei Steganus Eintragen mit weiteren Einträgen bei anderen Suchmaschinen im Netzwerk.

Zum Abschluss meines Beitrages möchte ich auch mal meinen persönlichen Dank an meine Kollegen aussprechen die sich der Entwicklung von Plugins für WordPress verschrieben haben. Ich selbst nutze diese Vorteile und verwende einige Plugins, was mir in hohem Masse die Arbeit erleichtert. Wirklich sehr, sehr gute Arbeit vom feinsten. Auch möchte ich dir ein ganz ausserordentlich sehr gutes Plugin empfehlen zu deiner Sicherheit auf deinem Blog. Jetpack sollte auf keinem Blog fehlen zumal dieses Plugin dir sehr viele möglichkeiten bietet auch zum Thema Sicherheit und vieles mehr.

Nachfolgend ein paar nützliche Links, die dir weiterhelfen könnten.

Zur Suchmaschine Steganus

Foren-Portal Steganus

Hier kannst du den Beitrag und Anleitung zu JavaScript per IFrame einfügen downloaden. Der Download besteht aus einem ZIP-Archiv und beinhaltet diesen Blogbeitrag sowie eine Anleitung hierzu und eine Musterseite im HTM-Format.

Dein Download

Dir hat mein Beitrag weitergeholfen und zum gewünschten Ergebniss geführt, so hätte ich nichts dagegen meinen Beitrag weiter zu empfehlen. Das kannst du über soziale Netzwerke und bei anderen WordPress Nutzern. Ich wünsche dir viel Spass und Erfolg mit deinen JavaScripts in WordPress eingebettet.sun_red