Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

Präsentation –
WP Jetpack Shortcode

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Das entsprechende Plug-in hier nicht in Anwendung, daher ist es ohne Funktionalität der Beispiele.

Durch Plug-in "Slimpack — Lightweight Jetpack", wie WP-Jetpack sind einige Shortcodes verfügbar. Hier sind die welche für Presentations vorstellen:

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]
Bild
[/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 ↑


Aktualisiert im Jahr 2020-Oktober