Aufbau und Funktionsweise des Plugins
Funktion des WP-MobileWebAppViewer Plugins (SVG 7 kByte)
Mit dem Plugin lassen sich mobile Webapplikationen auf Seiten oder in Beiträge deines WordPress Blogs mittels Shortcode einfügen. Den Shortcode habe ich mit mehreren Attributen versehen. Wenn du überhaupt keine Attribute in den Shortcode [[webappviewer]] eingibst, wird nur ein Beispiel mit einem meiner kleinen WebAppSpiele angezeigt. Daher solltest du mindestens das Attribut src=“deineurl.xyz“ verwenden um deine gewünschte Seite in den Viewer zu laden.
Prezi Präsentation zum Plugin
Downloadmöglichkeiten
Download lokal Download GitHub
Beispiel mit src-Attribut
Jeder Shortcode wird mit dem Namen des Shortcodes webappviewer in eckigen Klammern aufgerufen.
[[webappviewer src="http://m.mesch.de"]]
Beispiel mit outerstyle- und innerstyle-Attributen
Mit den outer- und innerstyle-Attributen kannst du über CSS verschiedene Layouts laden bzw. eigene Layouts erstellen. Bisher habe ich vier Styles erstellt. Das Flat Style ist das Standard-Layout und wird verwendet, wenn du kein outerstyle- und innerstyle-Attribut in deinem Shortcode verwendest.
- Flat Style: outerstyle=“deviceholderflat“, innerstyle=“devicedisplayflat“ (Standard)
- iPhone 6 Style: outerstyle=“deviceholderip6″, innerstyle=“devicedisplayip6″
- iPhone 5 Style: outerstyle=“deviceholderip5″, innerstyle=“devicedisplayip5″
- Samsung S6 Style: outerstyle=“deviceholders6″, innerstyle=“devicedisplays6″
[[webappviewer outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://m.mesch.de"]]
Beispiel mit width- und height-Attributen
Mit Hilfe der width- und height-Attribute kannst du die Breite und Höhe des iframe-Elements im Displaybereich (DIV-Element mit der Class innerstyle) angeben. Die Standardwerte sind: width=“375px“ und height=“667px“.
[[webappviewer width="320px" height="568px" outerstyle="deviceholderip5" innerstyle="devicedisplayip5" src="http://m.mesch.de"]]
Beispiel im iPhone 5 Mockup
[[webappviewer width="320" height="568" src="https://norbat.de/m3/" outerstyle="deviceholderip5" innerstyle="devicedisplayip5"]]
Beispiel im Samsung S6 Mockup
[[webappviewer width="380px" height="670px" outerstyle="deviceholders6" innerstyle="devicedisplays6" src="http://kamerunschaf.de"]]
Beispiel im iPhone 6 Mockup
[[webappviewer width="375px" height="667px" outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://getbootstrap.com"]]