Shortcodes

Mit Shortcodes hast du die Möglichkeit bestimmte vordefinierte Elemente in deinen Artikel oder deine Seite einzubauen. So kannst du den Text 2- oder 3-spaltig darstellen, per Info-Box wichtigen Inhalt besonders hervorheben oder einen Button einfügen.

Mehrspalten-Layout

Du kannst Text-Abschnitte in mehrere Spalten aufteilen.

Syntax 2 Spalten

[two-columns]Inhalt des Textabschnitts[/two-columns]

Syntax 3 Spalten

[three-columns]Inhalt des Textabschnitts[/three-columns]

Syntax 4 Spalten

[four-columns]Inhalt des Textabschnitts[/four-columns]

Syntax 5 Spalten

[five-columns]Inhalt des Textabschnitts[/five-columns]

Info-Boxen

Wenn du etwas besonders hervorheben möchtest, kannst du dazu Info-Boxen verwenden. Diese stehen in verschiedenen Farben zur Verfügung.

Syntax

[infobox color="farbe" border="rahmenart" type="typ"]Inhalt der Info-Box[/infobox]

Parameter

color=“farbe“

Mit diesem Parameter legst du die Hintergrundfarbe der Infobox fest. Als „Farbe“ kannst du verwenden:

• yellow
• orange
• red
• blue
• olive
• lightgray
• darkgray
• white
• transparent

border=“rahmenart“

Mit diesem Parameter kannst du einen Rahmen für die Infobox festlegen. Als „rahmenart“ stehen zur Verfügung:

• solid
• dotted
• dashed

solid gibt eine durchgezogene Linine aus. Mit dotted wird eine gepunktete Linie gezeichnet und beim Parameter dashed wird die Infobox mit einer gestrichelten Linie dargestellt.

type=“typ“

Mittels dieses Parameters kannst du oben links in der Infobox ein Icon darstellen. Diese Funktion nutzt die freie Icon-Schriftart „Genericons“.

Folgende Icons stehen zur Verfügung:

Beispiele

[infobox color="yellow" type="genericon-info"]Inhalt der Info-Box[/infobox]

[infobox color="orange"]Inhalt der Info-Box[/infobox]

[infobox color="red" border="dashed"]Inhalt der Info-Box[/infobox]

[infobox color="blue" type="genericon-home"]Inhalt der Info-Box[/infobox]

[infobox color="olive" border="solid"]Inhalt der Info-Box[/infobox]

[infobox color="lightgray" type="genericon-dropbox"]Inhalt der Info-Box[/infobox]

[infobox color="lightgray" border="dotted" type="genericon-cart"]Inhalt der Info-Box[/infobox]

[infobox color="white"]Inhalt der Info-Box[/infobox]

[infobox color="transparent"]Inhalt der Info-Box[/infobox]

Tipps

Wenn du in einer Infobox eine Überschrift (h1 bis h6) verwenden möchtest, wird diese mit einem Außenabstand nach oben dargestellt. Du kannst dies verhindern, indem du der Überschrift die Klasse .infobox-title zuweist, also so

[infobox color="yellow" type="genericon-warning"]

<h4 class="infobox-title">Info-Box mit formatierter Überschrift</h4>

Inhalt der Info-Box

[/infobox]

Buttons

Du kannst per Shortcode auch einen Button einfügen. Für diesen kannst du Farbe, Größe, Typ und Ausrichtung bestimmen.

Syntax

[button target="blank" color="Farbe" size="Größe" align="Ausrichtung" type="Art" link="Link"]Beschriftung des Button[/button]

Parameter

target=“blank“

Mit diesem Parameter kannst du festlegen, ob der Link eine neue Seite bzw. ein neues Tab öffnen soll. Falls der Link auf derselben Seite geöffnet werden soll, lass den Parameter einfach weg.

color=“Farbe“

Mit diesem Parameter bestimmst du die Hintergrundfarbe des Buttons. Folgende Farben stehen zur Verfügung:

• yellow
• orange
• red
• blue
• olive
• lightgray
• darkgray

Wenn du keine Farbe angibst, werden die Theme-Standard-Farben verwendet.

size=“Größe“

Mit diesem Parameter bestimmst du die Größe des Buttons. Du kannst verwenden:

• medium
• big

Fehlt die Angabe des Parameters wird ein kleiner Button ausgegeben.

align=“Ausrichtung“

Mittels dieses Parameters bestimmst du die Ausrichtung des Buttons. Du kannst wählen zwischen

• right
• center
• left

Gibst du keine Ausrichtung vor, wird der Button als Blockelement mit Ausrichtung links ausgegeben.

type=“Art“

Mit diesem Parameter hast du die Möglichkeit ein Button mit Icon zu erstellen. Das Icon wird vor dem Button-Text angezeigt. Diese Funktion nutzt die freie Icon-Schriftart „Genericons“.

Folgende Icons stehen zur Verfügung:

link=“Linkziel“

Der wichtigste Parameter eines Buttons ist das Ziel des Buttons. Achte darauf eine vollständige URI anzugeben, entsprechend folgender Beispiele:

• http://www.example.org/
• http://www.example.org/index.htm
• http://www.example.org/index.htm#impressum
• http://www.example.org/hintergrund.gif
• http://www.example.org/praesentation.pdf
• http://www.example.org/cgi-bin/suche.cgi?ausdruck=Hasenjagd
• http://www.google.com/search?hl=de&safe=off&q=Stefan+M%FCnz&lr=
• ftp://www.example.org/praesentation.pdf
• http://192.168.78.10/
• http://www.example.org:8082/geheim.htm

Beispiele

[button align="center" type="genericon-picture" link="#"]kleiner Standard-Button zentriert[/button]

[button size="medium" link="#"]medium Standard-Button ohne Ausrichtung[/button]

[button color="yellow" size="big" type="genericon-twitter" link="#"]großer gelber Button[/button]

[button color="orange" size="medium" link="#"]medium oranger Button[/button]

[button color="red" type="genericon-help" link="#"]kleiner roter Button[/button]

[button color="blue" size="big" link="#"]großer blauer Button[/button]

[button color="olive" size="medium" link="#"]medium oliver Button[/button]

[button color="lightgray" size="big" type="genericon-subscribe" link="#"]großer leichtgrauer Button[/button]

[button color="darkgray" size="medium" type="genericon-skype" link="#"]medium dunkelgrauer Button[/button]

[button color="transparent" type="genericon-cloud-download" link="#"]kleiner transparenter Button[/button]

Eine ganz kurze Variante:

[button link="#"]Link ins Nirgendwo[/button]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

[button color="red" size="medium" align="right" link="http://www.olivergast.de"]Rechts ausgerichteter medium Button in rot[/button]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

[button color="blue" size="big" type="genericon-warning" align="left" link="http://www.olivergast.de"]Links ausgerichteter großer blauer Button mit Icon[/button]

Shortcodes kombiniert

[infobox color="orange"][two-columns] ... [button color="red" size="small" align="right" link="http://www.olivergast.de"]olivergast.de[/button] ... [/two-columns][/infobox]