Shortcodes

 

 conblock  (Inhaltscontainer) 

Seiteninhalt, der nicht über die gesamte Breite des Browserfensters gehen soll, wird mit einem [conblock] Container umgeben. Es ist auch möglich, hier eine Hintergrundfarbe oder ein Hintergrundbild zu definieren.

Parameter (alle optional)

+ color=“white“ (Die Schrift wird mit weißer Farbe dargestellt)
+ bgcolor=“#000000″ (Hier kann man einen Farbwert als Hex-Code angeben)
+ bg=“meinbild.jpg“ (Dateiname des Hintergrundbildes – muss sich in der Mediathek befinden)

Codebeispiel – Standard

[conblock]

Mein Inhalt

[/conblock]

Codebeispiel – Hintergrundbild

[conblock bg="hintergrund.jpg" color="white"]

Mein Inhalt

[/conblock]

 cols / col  (Spalten) 

Mit diesen Befehlen erzeugt man ein Spaltenlayout. Die einzelnen [col] Spalten werden von einem [cols] Block umgeben. Man kann ein 2, 3, 4 oder 5-Spalten-System erstellen. Außerdem können auch Spalten miteinander verbunden werden (zb 2/3 und 1/3). Die letzte Spalte sollte immer den Parameter class=“last“ haben.

Parameter für [cols] (alle optional)

+ columns=“2/3/4/5″ (Anzahl der Spalten, Standardwert: 3)
+ gap=“0/1/2″ (Abstandsgröße zwichen den Spalten, Standardwert: 2)
+ margin=“true/false“ (Spalten-Abstand nach unten kann hier mit true aktiviert werden, Standardwert: false)
+ class=“css-klasse“ (Hier kann eine zusätzliche Klasse zur CSS Formatierung angegeben werden)

Parameter für [col] (alle optional)

+ colspan=“2/3/4″ (Anzahl der zu verbindenden Spalten)
+ class=“last“ (Wird bei der letzten Spalte angegeben)

Codebeispiel – 50% 50%

[cols columns="2"]

[col] Inhalt 1. Spalte [/col]

[col class="last"] Inhalt 2. Spalte [/col]

[/cols]

Codebeispiel – 67% 33%

[cols columns="3"]

[col colspan="2"] Inhalt 1. Spalte / 67% Breite [/col]

[col class="last"] Inhalt 2. Spalte / 33% Breite [/col]

[/cols]

 spacer  (Abstand) 

Mit diesem Shortcode wird ein Abstand zwischen zwei Elementen erzeugt. Der Standardwert ohne Parameter-Eingabe beträgt 20 Pixel. Wenn man hier einen negativen Wert eingibt, wird der Abstand zum vorigen Element verringert.

Parameter (optional)

+ height=“40″ (Abstand in Pixel eingeben, Negativwerte sind möglich – Standardwert: 20)

Codebeispiel

[spacer height="40"]

 colorline  (Trennlinie) 

Mit diesem Shortcode wird eine farbige Trennlinie eingefügt.

Parameter

keine

Codebeispiel

[colorline]

 colorbox (Farbige Box)

Mit diesem Shortcode kann man eine farbig hinterlegte Box erstellen, in der Inhalte eingefügt werden können.

Parameter

keine

Codebeispiel

[colorbox]

Mein Inhalt

[/colorbox]

 articles  (Artikelsystem) 

Mit dem Artikelsystem kann man Beiträge aus einer definierten Kategorie übersichtlich in Blöcken anzeigen. Etliche Parameter sind dazu da, um das Erscheinungsbild zu verändern. Weiters unterstützt das System auch eine Seitenpaginierung (die Artikel werden auf mehreren Einzelseiten angezeigt, inkl. Seitennavigation unterhalb der Artikel).

Parameter (Pflichtparameter: category)

+ category=“kategoriename“ (hier die Kategorie mit der Titelform (kleingeschrieben) angeben – siehe Beiträge/Kategorien)
+ template=“vorlagenname“ (standardmäßig gibt es hier keine Vorlagen, es ist allerdings möglich bei einem Projekt eine andere Vorlage zu programmieren)
+ lightbox=“true/false“ (kann angegeben werden, wenn die Detailseite in einer Lightbox geöffnet werden soll – Standardwert: false)
+ links=“true/false/images“ (wenn die Beiträge nicht verlinkt sein sollen, kann man hier false angeben oder images für Beitragsbilder – Standardwert: true)
+ columns=“2/3/4/5″ (Anzahl der Spalten – Standardwert: 4)
+ desc=“true/false“ (hier kann die Anzeige des Auszugs deaktiviert werden – Standardwert: true)
+ text=“true/false“ (wenn man hier false angibt, wird nur das Bild ohne Titel und Beschreibung angezeigt – Standardwert: true)
+ gap=“0/1/2″ (Abstand zwischen den Spalten – Standardwert: 2)
+ type=“stripes“ (Darstellung in Zeilenform, hier gibt es derzeit nur stripes zum Auswählen)
+ count=“anzahl“ (hier kann man eine Ziffer angeben, um die Anzahl der Beiträge zu limitieren)
+ height=“200″ (um die Höhe der Beschreibungstexte zu definieren, kann man hier einen Pixelwert angeben)
+ order=“date/title/rand/modified“ (damit wird die Sortierreihenfolge bestimmt – rand steht für zufällig – Standardwert: date)
+ pagination=“true/false“ (true angeben, wenn eine Seitenpaginierung erstellt werden soll – Standardwert: false)

Codebeispiele

Typisches Beispiel:

[articles id="bezeichnung" category="kategoriename" columns="3" height="160"]

Inklusive Paginierung mit 8 Einträgen pro Seite:

[articles id="bezeichnung" category="kategoriename" columns="3" height="160" pagination="true" count="8"]

Schmale Abstände, ohne Verlinkung und Text

[articles id="bezeichnung" category="kategoriename" columns="3" height="160" gap="1" links="false" text="false"]

 articlenav  (Kategorienavigation für Artikelsystem) 

Dieser Shortcode kann verwendet werden, um die Unterkategorien einer Kategorie zu verlinken. Wird im Normalfall gemeinsam mit dem [articles] System eingesetzt. Der Parameter page bestimmt die Seite, welche bei den Links aufgerufen werden soll.

Parameter (Pflichtparameter: id / category)

+ id=“kurzbezeichnung“ (keine Großschreibung, Umlaute, Sonderzeichen, Leerzeichen – Trennung von Wörtern mit Bindestrich erlaubt)
+ category=“kategoriename“ (hier die Kategorie mit der Titelform angeben – siehe Beiträge/Kategorien)
+ page=“zielseite“ (hier die URL der gewünschten Zielseite angeben – ohne Domain und /wp/)

Codebeispiele

[articlenav id="bezeichnung" category="kategoriename"]

[articles id="bezeichnung" category="kategoriename" columns="3" height="160"]

 articleslider  (Slider für Artikelsystem) 

Mit diesem Shortcode kann man das Artikelsystem in einem horizontalen Slider anzeigen lassen.

Parameter (Pflichtparameter: id)

+ id=“kurzbezeichnung“ (keine Großschreibung, Umlaute, Sonderzeichen, Leerzeichen – Trennung von Wörtern mit Bindestrich erlaubt)

Codebeispiel

[articleslider id="bezeichnung"]

[articles id="bezeichnung" category="kategoriename" height="160" desc="false" lightbox="true"]

[/articleslider]

 newsfields  (Newsbeiträge) 

Mit diesem Shortcode werden die letzten Beiträge der Kategorie News angezeigt. Alternativ dazu kann auch das [articles] System verwendet werden.

Parameter (alle optional)

+ count=“4″ (hier die Anzahl der anzuzeigenden Beiträge angeben – Standardwert: 99)
+ lightbox=“true/false“ (um die Detailansicht in einer Lightbox anzuzeigen hier true eingeben – Standardwert: false)

Codebeispiel

[newsfields count="4"]

 anchor  (Sprungmarke / Menüpunkt für OnePager) 

Der Shortcode [anchor] wird für zweierlei verwendet:

+ zum einen wird damit bei einem OnePager ein Menüpunkt eingefügt
+ zum anderen dient er als Sprungmarke zu dieser Position auf der Seite (man kann #id an die URL in der Browser-Adressleiste anhängen)
Beispiel: http://www.domain.at/leistungen/#id – hier wird nach der # die ID des Shortcodes angegeben

Parameter (Pflichtparameter: id / title)

+ id=“kurzbezeichnung“ (keine Großschreibung, Umlaute, Sonderzeichen, Leerzeichen – Trennung von Wörtern mit Bindestrich erlaubt)
+ title=“Name des Menüpunktes“ (hier den gewünschten Menüpunkt-Namen für die Navigationsleiste angeben, nur bei OnePager)

Codebeispiel

[anchor id="kurzbezeichnung" title="Menüpunkt-Name"]

 scroller  (Bild-Balken mit 100% Breite) 

Mit diesem Shortcode kann man ein Bild aus der Mediathek als Bild-Balken, der sich über die gesamte Breite des Browserfensters erstreckt, einfügen. Es ist auch möglich, über dem Bild eine mittig gesetzte Überschrift oder normalen Text zu platzieren. 

Parameter (Pflichtparameter: id)

+ id=“kurzbezeichnung“ (keine Großschreibung, Umlaute, Sonderzeichen, Leerzeichen – Trennung von Wörtern mit Bindestrich erlaubt)
+ bg=“dateiname.jpg“ (Dateiname des Bildes inkl. Dateiendung, muss sich in der Mediathek befinden)
+ height=“100%“ (die Höhe des Bildes kann entweder mit 100% oder als Pixelwert (zb 550px) angegeben werden)
+ color=“#ffffff“ (hier kann man die Farbe des Textes als Hex-Wert definieren, #ffffff entspricht weiss)
+ bgcolor=“#000000″ (alternativ zu einem Hintergrundbild kann man auch eine Hintergrundfarbe als Hex-Wert setzen, #000000 entspricht schwarz)

Codebeispiel

[scroller id="kurzbezeichnung" bg="dateiname.jpg" height="100%" color="#ffffff"]

Mein Text - wird mittig über dem Bild angezeigt

[/scroller]

 backbutton  (Zurück-Button mit Sprungmarke) 

Wenn man einen Zurück-Button auf einer Seite benötigt, kann dieser Shortcode verwendet werden. Zusätzlich kann man hier als section Parameter die gewünschte Sprungmarke auf der Seite angeben. Hinweis: Bei Beiträgen ist dieser Button nicht notwendig, weil er automatisch eingefügt wird. 

Parameter (alle optional)

+ section=“id-sprungmarke“ (hier die ID der gewünschten Sprungmarken-Position angeben)
Hinweis: Sprungmarken werden mit [anchor id=“id“] erzeugt – genau diese ID benötigt man dann für den section Parameter.

Codebeispiel

[backbutton section="section1"]

 youtube  (YouTube Video Einbettung) 

Hiermit kann ein YouTube Video eingebettet werden. Zwischen dem öffnenden und schließenden youtube Shortcode einfach die YouTube-Adresse eintragen.

Parameter

+ keine

Codebeispiel

[youtube]https://www.youtube.com/watch?v=rVqAdIMQZlk[/youtube]

 sectionblock  (versteckter Inhaltsbereich) 

Mit diesem Shortcode kann man einen versteckten Inhaltsbereich erstellen. Um einen Button zu erstellen, der diesen Bereich aufklappt, wird der Shortcode [sectionopener] verwendet.

Parameter (Pflichtparameter: id)

+ id=“kurzbezeichnung“ (keine Großschreibung, Umlaute, Sonderzeichen, Leerzeichen – Trennung von Wörtern mit Bindestrich erlaubt)

Codebeispiel

[sectionblock id="kurzbezeichnung"]

Mein versteckter Inhalt

[/sectionblock]

 sectionopener  (Button für versteckte Inhaltsbereiche) 

Mit diesem Shortcode kann man einen Button erstellen, der versteckte Inhaltsbereiche, die mit [sectionblock] erstellt wurden, auf- und zuklappt. 

Parameter (Pflichtparameter: id)

+ id=“sectionblock-id“ (hier die ID vom anzuzeigenden [sectionblock] Container angeben)
+ class=“design“ (hier kann man eine andere Design-Vorlage für den Button angeben, derzeit gibt es noch keine weiteren Vorlagen)

Codebeispiel

[sectionopener id="sectionblock-id"]

[sectionblock id="sectionblock-id"]

Mein versteckter Inhalt

[/sectionblock]

 picblock  (Einzelnes Bild rechts) 

Wenn ein einzelnes Bild rechts neben einem Texblock stehen soll, muss der Text inkl. Bild mit diesem Code umschlossen sein, damit es keine Formatierungsfehler gibt. Das eingefügte Bild sollte keine Ausrichtung haben.

Parameter

keine

Codebeispiel

[picblock]

BILD

Mein Text

[/picblock]

container  (Container zur Zuweisung von Formatierungen etc.) 

Mit dem Shortcode [container] kann man Inhaltsblöcken eine bestimmte ID oder Klasse zuweisen. Sie benötigen diesen Shortcode nur, wenn der Programmierer Sie darauf hinweist.

Damit ist es möglich, Inhaltsbereiche in Absprache mit dem Programmierer speziell zu formatieren (mit CSS). Wenn man zwei Container ineinander verschachteln will, muss der Container in der zweiten Ebene mit dem Shortcode [container-sub] erstellt werden.

Parameter (Pflichtparameter: id oder class)

+ id=“kurzbezeichnung“ (keine Großschreibung, Umlaute, Sonderzeichen, Leerzeichen – Trennung von Wörtern mit Bindestrich erlaubt)
+ class=“kurzbezeichnung“ (keine Großschreibung, Umlaute, Sonderzeichen, Leerzeichen – Trennung von Wörtern mit Bindestrich erlaubt)

Codebeispiel

[container class="kurzbezeichnung"]

Inhalt

[/container]

Codebeispiel Verschachtelung

[container id="mein-container"]

Inhalt erste Ebene

[container-sub class="kurzbezeichnung"]

Verschachtelter Container-Inhalt (zweite Ebene)

[/container-sub]

[/container]

 redirect  (Seiten-Weiterleitung) 

Mit diesem Shortcode kann man eine Weiterleitung zu einer anderen Seite oder URL erstellen.

Parameter (Pflichtparameter: url oder pageid)

+ url=“http://www.domain.at“ (Weiterleitung auf eine andere Internet-URL)
+ pageid=“21″ (hier die ID der gewünschten Seite eintragen)

So erhält man die pageid:
In WordPress unter Seiten über die gewünschte Seite mit der Maus drüberfahren. Jetzt erscheint ganz unten links im Browser die Ziel-Adresse des Links. Diese lautet zB http://www.domain.at/wp/wp-admin/post.php?post=21&action=edit / hier die Zahl nach ?post= verwenden (also in diesem Fall 21).

Codebeispiel

[redirect pageid="21"]

 code  (Quellcode Formatierung) 

Mit diesem Shortcode kann man Text einfügen, der als Quellcode formatiert wird (siehe Codebeispiele auf dieser Seite). Wenn eckige Klammern [ ] im Code vorhanden sind, müssen diese mit { } geschrieben werden.

Parameter 

keine

Codebeispiel

[code]

Mein Quellcode

[/code]