Präsentation –
Jetpack Shortcode

Da das entsprechende Plug-in hier nicht in Anwendung, ist es ohne Funktionalität der Beispiele. Dieser Beitrag findet sich nicht im Inhaltsverzeichnis und folgt lediglich Linkhinweis Beitrags Plug-in WP-Jetpack

Durch Plug-in „Slimpack — Lightweight Jetpack“, wie WP-Jetpack sind einige Shortcodes verfügbar. Heute Morgen möchte ich die welche für „Presentations“ (in Übersetzung) vorstellen:

Übersetzung Google

Was ist ein Kurzcode?

Ein Kurzcode ist ein WordPress-spezifischer Code, mit dem raffinierte Dinge mit sehr wenig Aufwand möglich sind. Shortcodes in nur einer Zeile können Dateien einbetten oder Objekte erstellen, die normalerweise einen komplizierten Code erfordern würden. Ein Shortcode ist wie eine Verknüpfung.

Überblick Präsentations-Shortcodes:

Folgende Shortcodes sind zu verwenden, um eine Folienpräsentation zu erstellen und sie auf der Website anzuzeigen.

Inhaltsverzeichnis

Erstellung

Shortcodes ohne Leerzeichen an den Innenklammern.

Um eine Präsentation zu erstellen, verwenden Sie

[ presentation ]

Um folgend eine Folie zu erstellen, verwenden Sie:

[ slide ]

Alle [Folien] Shortcodes müssen durch einen Shortcode [ presentation ] umbrochen werden – ansonsten werden die Folien nicht angezeigt.

Presentationsweite Einstellungen wie Höhe, Breite und Übergangsdauer (in Sekunden) können über die entsprechenden Attribute im Shortcodes [ presentation ]
eingestellt werden.

Inhaltsverzeichnis ↑

Größe der Präsentation

Um eine Präsentation bestimmter Größe wie 400 × 300 zu erstellen:

[ presentation width=400 height=300 ]

Übergangsdauer der Folien

Um die Übergangsdauer für jede Folie auf 5 Sekunden einzustellen:

[ presentation duration=5 ]

Vorab Tipp:

Jede Option, die auf einer [ slide ] eingestellt werden kann, kann auch in der [ presentation ] eingestellt werden, die sie als Standardeinstellung für die Präsentation festlegt.

Inhaltsverzeichnis ↑

Eine Liste von Übergangs-Shortcodes

Übergang, der nach unten verschoben wird (welches der Standardübergang ist):

[ slide transition="down" ]

Übergang, der sich nach rechts bewegt:

[ slide transition="right" ]

Übergang, der nach oben verschoben wird:

[ slide transition="up" ]

Übergang , der sich nach links bewegt:

[ slide transition="left" ]

Um keinen Übergang festzulegen:

[ slide transition="none" ]

Die Einstellung „Kein Übergang“ funktioniert, wenn Fading aktiviert ist – siehe unten.

Inhaltsverzeichnis ↑

Rotation und Skalierung

Drehen und skalieren, um verschiedene Effekte zu erstellen.

Folie drehen:

[ slide rotate=]

Der Wert nach dem = ist in Grad. Zum Beispiel:

[ slide rotate=45 ].

Folie zur Betonung skalieren:

[ slide scale= ]

Der Wert nach dem Wert = kann ein beliebiger Skalarwert sein, einschließlich Dezimalstellen. Beispiel:

[ slide scale=5 ] oder [ slide scale=1.75 ].

Inhaltsverzeichnis ↑

Fading

Das Fading zwischen den Folien ist standardmäßig aktiviert.

Das Fading deaktivieren:

[ slide fade="off" ] oder [ slide fade="false" ]

Und um das Fading wieder zu aktivieren:

[ slide fade="on" ] oder [ slide fade="true" ]

Inhaltsverzeichnis ↑

Hintergrundfarbe

Folien können mit einer Hintergrundfarbe oder einem benutzerdefinierten Bild verkleidet werden. Um eine einheitliche Farbe festzulegen:

[ slide bgcolor= ]

Der Wert nach dem Wert = ist eine gültige HTML-Farbe. Zum Beispiel: [ slide bgcolor=#d3e7f8 ].

Inhaltsverzeichnis ↑

Ein Bild einstellen:

[ slide bgimg= ]

Der Wert nach dem Wert = ist eine gültige Image-URL. Das Bild wird dehnen, um die Folie passen.

Anmerkung: Ein Bild kann ebenso als <image class>, also über Datei hinzufügen eingestellt sein und wird hiermit in erwünschter Größe dargestellt. Siehe folgendes Beispiel.

Inhaltsverzeichnis ↑

Darstellung

Eine Präsentation im Vollbildmodus ist durch klick auf das Vier-Pfeilsymbol unten rechts in der Diashow möglich. Mit ESC auf der Tastatur, wird auch der Vollbildmodus beendet.

Zum Navigieren die Pfeile auf dem Bildschirm (oder die Pfeiltasten der Tastatur). Es sind auch Tab oder Leertaste zu verwenden, um die Diashow nach vorne zu verschieben.

Die Shortcodes in Aktion in dieser Beispielpräsentation:

Shortcode Präsentation

[presentation
bgimg=https://wegerl.at/wordpress/wp-content/uploads/2015/05/image61-1280×960.jpg]
[slide]
 Ziemlich cool, oder? 
[/slide]
[slide]
 kühle dich 
[/slide]
[slide rotate=45 slide bgcolor=black]
Rotation, oh boy

  • ein Punkt für Mama
  • noch ein Punkt für Papa
  • und einer für Oma und Opa

[/slide]

[slide scale=5]
 Scale – geht doch! 
[/slide]
[slide ]

image [/slide]
[/presentation]

[[presentation
bgimg=https://wegerl.at/wordpress/wp-content/uploads/2015/04/image.png]
[slide]
Ziemlich cool, oder?
[/slide]
[slide]
kühle dich
[/slide]
[slide rotate=45 slide bgcolor=#d3e7f8]
<span style="font-size: 18px; color: #ffffff;">Rotation, oh boy</span>
<ul style="color: white; padding: 50px 100px;">
 <li>ein punkt</li>
 <li>noch ein punkt</li>
 <li>und einer für Oma und Opa</li>
</ul>
[/slide]

[slide scale=5]
Scale – geht doch!
[/slide]
[slide]
image[/slide]
[/presentation]]

Konformer Anzeige der Schortcodes im <pre> Tag, also ohne Leerzeichen an den Innenklammern, ist bei für sich abgeschlossenen Codes möglich, wenn am Anfang und am Ende eine zusätzliche eckige Klammer gesetzt ist.

[presentation width=“350″ height=“300″]
[slide bgcolor=“grey“]Hallo, das ist Test.[/slide]
[slide bgimg=https://wegerl.at/wordpress/wp-content/uploads/2015/10/image6.png][/slide]
[/presentation]

[[presentation width="350" height="300"]
[slide bgcolor="grey"]Hallo, das ist Test.[/slide]
[slide bgimg=https://wegerl.at/wordpress/wp-content/uploads/2015/10/image6.png][/slide]
[/presentation]]

Inhaltsverzeichnis ↑