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]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
Syntax 3 Spalten
[three-columns]Inhalt des Textabschnitts[/three-columns]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
Syntax 4 Spalten
[four-columns]Inhalt des Textabschnitts[/four-columns]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
Syntax 5 Spalten
[five-columns]Inhalt des Textabschnitts[/five-columns]
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
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
Gelbe Info-Box
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="yellow" type="genericon-info"]Inhalt der Info-Box[/infobox]
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="orange"]Inhalt der Info-Box[/infobox]
Rote Info-Box
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="red" border="dashed"]Inhalt der Info-Box[/infobox]
Blaue Info-Box
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="blue" type="genericon-home"]Inhalt der Info-Box[/infobox]
Olive Info-Box
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="olive" border="solid"]Inhalt der Info-Box[/infobox]
Hellgraue Info-Box
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="lightgray" type="genericon-dropbox"]Inhalt der Info-Box[/infobox]
Dunkelgraue Info-Box
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="lightgray" border="dotted" type="genericon-cart"]Inhalt der Info-Box[/infobox]
Weiße Info-Box
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[infobox color="white"]Inhalt der Info-Box[/infobox]
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[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
Info-Box mit formatierter Überschrift
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[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.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[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.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[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
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
[infobox color="orange"][two-columns] ... [button color="red" size="small" align="right" link="http://www.olivergast.de"]olivergast.de[/button] ... [/two-columns][/infobox]