Shortcodes

Shortcodes sind kurze Code-Elemente in eckigen Klammern. Sie sind ein typisches Inhaltselement von WordPress und lassen sich (fast) überall in einem eigenen Absatz einfügen. Mithilfe von Attributen entstehen benutzerdefinierte Varianten. Beispiel:

[esf_sitemap]

Der Shortcode fügt in einem Beitrag oder auf einer Seite eine Sitemap ein. Sie ist hierarchisch dargestellt wie das Navigationsmenü. Wird das Attribut «type» auf «alphabetic» gesetzt, erscheinen alle Navigationstitel in alphabetischer Reihenfolge. Der vollständige Shortcode lautet dann

[esf_sitemap type="alphabetic"]

Viele Attribute haben einen Standardwert. Beim «type»-Attribut des Shortcodes [esf_sitemap] ist es z. B. der Wert «hierarchical». Dieser Wert darf angegeben werden, muss aber nicht. Die Reihenfolge der Attribute ist unerheblich.

[esf_post_show_list]

Fügt eine Liste mit Beiträgen ein.

Attribute

aspectratio – Breitenverhältnis zwischen linker und rechter Spalte; nur bei design=“imageandtext“; Standardwert: 1:1 – weitere Möglichkeiten: 1:2, 1:3, 1:5, 1 (beide Spalten 100%)

cats – Kategorie(n) in Titelform (→ Slug ←) oder als ID (auch gemischt); mehrere durch Komma getrennt; bleibt das Attribut leer, werden alle Kategorien angezeigt

count – Standardwert: 10; weitere Möglichkeiten: beliebige Zahlenwerte, um die Anzahl der angezeigten Beiträge zu bestimmen

design – Standardwert: nichts; weitere Möglichkeiten: imageandtext (Darstellung zweispaltig, links Beitragsbild, rechts Titel und Textauszug)

hide – Standardwert: nichts; weitere Möglichkeit: content; ohne Auszug

show – date

uncats – Kategorie(n) in Titelform (Slug) oder als ID (auch gemischt); mehrere durch Komma getrennt

[esf_event_reservations]

fügt einen Belegungsplan ein. Die Räume lassen sich selektieren, und es stehen drei Ansichten zur Verfügung: ein Kalender, eine nach Räumen geordnete Liste und eine chronologische.

In der Bearbeitungsansicht sehen Sie am Ende jedes Beitrags und jeder Seite einen Bereich, in dem Sie weitere Beitragsbilder definieren können.

Der Button «Bild hinzufügen» führt Sie in die Mediathek. Dort wählen Sie entweder vorhandene Bilder oder laden neue hoch.

Um die Bilder als Galerie in einem Raster anzeigen zu lassen, geben Sie folgenden Shortcode ein.

[esf_gallery]

Attribute

columns – Standardwert: 3 (auf einem grossen Bildschirm werden die Bilder in 3 Spalten angezeigt, auf einem kleineren in 2 und auf dem Mobiltelefon im Hochformat nur noch in 1 Spalte) – weitere Möglichkeiten: 12, 6, 4, 3, 2, 1 (Teiler von 12) – Soll z. B. von Anfang an nur 1 Spalte angezeigt werden, heisst der Shortcode

[esf_gallery columns="1"]

postid – Standardwert: die ID des Beitrags oder der Seite, in der/dem der Shortcode enthalten ist – weitere Möglichkeiten: die ID eines beliebigen Beitrags oder einer Seite, die weitere Beitragsbilder enthält. Die ID lässt sich in der Bearbeitungsansicht in der Adresszeile ablesen. Es ist die Zahl, die nach «post=» folgt. Sollen in einer Galerie die weiteren Beitragsbilder der Seite mit der ID 123456 in 6 Spalten dargestellt werden, heisst der Shortcode

[esf_gallery columns="6" postid="123456"]

Google Maps ist nicht mehr in jedem Fall kostenlos. Nach einer gewissen Nutzungszeit verlangt Google eine Anmeldung und die Hinterlegung einer Kreditkarte. Überschreiten die Seiten-Abrufe ein bestimmtes Mass, behält sich Google das Recht vor, die Kreditkarte zu belasten.

Um eine Google-Maps-Karte in Ihre Website einzufügen, gehen Sie folgendermassen vor.

1. Suchen Sie die gewünschte Adresse unter www.google.com/maps. Klicken Sie oben links auf die Hamburger-Navigation und wählen Sie «Karte teilen oder einbetten».
2. In der Auswahl «Link senden | Karten einbinden» klicken Sie auf «Karten einbinden» und kopieren den angezeigten HTML-Code (HTML kopieren) in Ihre Zwischenablage (z. B. Ctrl-c).
3. Nun wechseln Sie in die Dashboard-Ansicht Ihrer Website. Dort finden Sie eine Box namens «Shortcode-Schöpfer». Fügen Sie den Inhalt Ihrer Zwischenablage ins Feld «Konstruktor einfügen» ein.
4. Darunter erscheint nun sogleich ein Button namens «Karte». Wenn Sie darauf klicken, wird der vollständige Shortcode in Ihre Zwischenablage kopiert (ohne dass Sie etwas davon sehen).
5. Wecheln Sie zum Beitrag oder zur Seite, in dem/der Sie Ihre Karte einfügen lassen möchten, und fügen Sie den Inhalt der Zwischenablage in einen eigenen Absatz ein. Er verwandelt sich automatisch in einen Shortcode-Block.

Im Frontent erscheint nun die responsive (sie passt sich an unterschiedliche Bildschirmgrössen an) und interaktive (man kann den Ausschnitt verschieben, zoomen usw.) Karte Ihrer Wahl.

Für die Herrnhuter Losungen bietet https://www.combib.de/losungformat/hyperlinkgenerator.html ein reichlich antiquiert anmutendes HTML-Skript für die Einbettung der aktuellen Bibelstellen. Es bietet leider kaum Gestaltungsmöglichkeiten. Fügen Sie einen neuen Shortcode-Block ein mit dem folgenden Shortcode.

[esf_herrnhut_watchwords]

Standardmässig nehmen die eingefügten Losungen die ganze Breite des umgebenden Bereichs ein (100%) und haben eine bestimmte Höhe (für Profis: 12rem). Mit Attributen lassen sich diese beiden Grössen anpassen.

Attribute

height – die Höhe des Darstellungsbereichs (z. B. 200px)

width – die Breite des Darstellungsbereichs (z. B. 640px)

Ein modales Fenster ist ein Kasten, der sich über die aktuelle Seite legt, während diese sich verdunkelt. Klicken Sie auf den nachfolgenden Link, um ein Beispiel zu sehen.

Der Shortcode heisst

[esf_modal link="" content=""]

Attribute

link – Standardwert: «Modal» [ohne Anführungszeichen) – weitere Möglichkeiten: der Text, der angeklickt werden kann (ohne HTML) | ein beliebiger absoluter Bild-URL | die ID eines WordPress-Bildes

content – Standardwert: ein Hilfetext – weitere Möglichkeiten: die ID eines WordPress-Posts | Text (mit HTML und Content-Filterung)

Beispiel

[esf_modal link="Was ist ein modales Fenster?" content="<h1>Modales Fenster</h1><p>Ein modales Fenster ist ein Kasten, der sich über die Seite legt, während sich der Hintergrund verdunkelt.</p>"]

Erklärung: Anzeige der Frage «Was ist ein modales Fenster?»; beim Anklicken öffnet sich ein modales Fenster mit der Überschrift «Modales Fenster» und dem Text «Ein modales Fenster ist ein Kasten, der sich über die Seite legt, während sich der Hintergrund verdunkelt»

OpenStreetMap ist eine weltweite Community, die mit viel Liebe zum Detail eine Karte der Welt erstellt hat und ständig aktualisiert. Wie aktuell und vollständig die Daten sind, hängt davon ab, ob sich jemand in der Freizeit mit viel Eifer eines bestimmten Gebiets annimmt. Stellen Sie Fehler fest oder möchten Sie etwas ergänzen, können Sie das leicht selber machen. Der Karten-Editor ist sehr intuitiv.

Um eine OpenStreetMap-Karte in Ihre Website einzufügen, gehen Sie folgendermassen vor.

1. Suchen Sie die gewünschte Adresse unter www.openstreetmap.org. Klicken Sie rechts auf das Teilen-Symbol , setzen Sie einen Kartenmarker (wenn Sie möchten).
2. In der Auswahl «Link | Kurz-URL | HTML» klicken Sie auf HTML und kopieren den angezeigten HTML-Code in Ihre Zwischenablage (z. B. Ctrl-c).
3. Nun wechseln Sie in die Dashboard-Ansicht Ihrer Website. Dort finden Sie eine Box namens «Shortcode-Schöpfer». Fügen Sie den Inhalt Ihrer Zwischenablage ins Feld «Konstruktor einfügen» ein.
4. Darunter erscheint nun sogleich ein Button namens «Karte». Wenn Sie darauf klicken, wird der vollständige Shortcode in Ihre Zwischenablage kopiert (ohne dass Sie etwas davon sehen).
5. Wecheln Sie zum Beitrag oder zur Seite, in dem/der Sie Ihre Karte einfügen lassen möchten, und fügen Sie den Inhalt der Zwischenablage in einen eigenen Absatz ein. Er verwandelt sich automatisch in einen Shortcode-Block.

Im Frontent erscheint nun die responsive (sie passt sich an unterschiedliche Bildschirmgrössen an) und interaktive (man kann den Ausschnitt verschieben, zoomen usw.) Karte Ihrer Wahl.

Die Beschreibung der Personen erfolgt über den speziellen Beitragstyp «Personen». Sie setzen als Titel z. B. den Familiennamen und den/die Vornamen der Person, beschreiben anschliessend im Textfeld das Aufgabengebiet und/oder den Charakter der Person – natürlich nur positiv – und füllen schliesslich so viele der zusätzlichen Felder aus, wie Sie möchten. Sie fügen die Person einer Gruppe (oder mehreren Gruppen) hinzu.

Bei der Bearbeitung eines Beitrags, einer Seite oder eines Termins finden Sie dann in der rechten Spalte ganz unten die Möglichkeit, eine oder alle Personengruppe(n) anzeigen zu lassen. Rechts neben jeder Person und am Ende bei «alle» steht ein Clipboard-Icon. Wenn Sie darauf klicken, kopieren Sie den oder die Shortcode(s) in Ihre Zwischenablage und können sie von da in einen beliebigen Inhaltsbereich einfügen.

Attribute

hide – Standardwert: “ – weitere Möglichkeit: content (der Inhalt des Textfelds wird nicht angezeigt)

id – Post-ID der Person

imageposition – Standardwert: left – weitere Möglichkte: right (das Bild wird rechts des Textes angezeigt)

Beispiel

[esf_person id="12345" name="Dau Kleck"]

Alle Personen (einer Gruppe) einfügen

Attribute

group – Standardwert: “ (alle Gruppen werden angezeigt) – weitere Möglichkeit:

hide – Standardwert: “ – weitere Möglichkeit: content (der Inhalt des Textfelds wird nicht angezeigt)

imageposition – Standardwert: left – weitere Möglichkte: right (das Bild wird rechts des Textes angezeigt)

Beispiel

[esf_persons imageposition="right"]

[esf_sitemap]

Fügt automatisch eine Sitemap ein. Ohne Attribute ist sie hierarchisch und stellt das Hauptmenü dar.

Attribute

menu_id – Standardwert: null – weitere Möglichkeiten: ID des gewünschten Menüs (auch wenn es nicht einer Position zugeordnet ist)

menu_name – Standardwert: null – weitere Möglichkeiten: Name des gewünschten Menüs (auch wenn es nicht einer Position zugeordnet ist)

menu_slug – Standardwert: null – weitere Möglichkeiten: Slug (Titelform) des gewünschten Menüs (auch wenn es nicht einer Position zugeordnet ist)

menu_location – Standardwert: primary – weitere Möglichkeiten: footer-menu | utility-menu

type – Standardwert: hierarchic – weitere Möglichkeit: alphabetic

In der Bearbeitungsansicht sehen Sie am Ende jedes Beitrags und jeder Seite einen Bereich, in dem Sie weitere Beitragsbilder definieren können.

Der Button «Bild hinzufügen» führt Sie in die Mediathek. Dort wählen Sie entweder vorhandene Bilder oder laden neue hoch.

Um die Bilder als Slideshow anzeigen zu lassen, geben Sie folgenden Shortcode in eine Shortcode-Block ein.

[esf_slideshow]

Attribute

fx – Standardwert: scrollHorz (Verschiebung des neuen Bilds von rechts über das bestehende); im Moment keine weiteren Möglichkeiten

postid – Standardwert: die ID des Beitrags oder der Seite, in der/dem der Shortcode enthalten ist – weitere Möglichkeiten: die ID eines beliebigen Beitrags oder einer Seite, die weitere Beitragsbilder enthält. Die ID lässt sich in der Bearbeitungsansicht in der Adresszeile ablesen. Es ist die Zahl, die nach «post=» folgt. Sollen in einer Slideshow die weiteren Beitragsbilder der Seite mit der ID 123456 dargestellt werden, heisst der Shortcode

[esf_slideshow postid="123456"]

size – Grösse der Bildanzeige. Standardwert: large; weitere Möglichkeiten: thumbnail, medium. Sollen die Bilder als quadratische Daumennagelbilder angezeigt werden (aber wer will das schon ;-), heisst der Shortcode

[esf_slideshow size="thumbnail"]

timeout – Zeitdauer der Anzeige jedes Bildes in Millisekunden. Standardwert: 5000 (= 5 Sekunden). Soll jedes Bild nur drei Sekunden angezeigt werden, lautet der Shortcode

[esf_slideshow timeout="3000"]

[esf_event_show_list]

Fügt eine Liste mit Terminen ein. Ohne Attribute sind es die maximal zehn nächsten Termine aller Kategorien, die in zwei Spalten (links Datum, rechts Inhalt) ohne Angabe des Wochentags angezeigt werden.

Attribute

aspectratio – Breitenverhältnis zwischen linker und rechter Spalte; nur bei design=“horizontal“; Standardwert: 1:1 – weitere Möglichkeiten: 1:2, 1:3, 1:5

cats – Kategorie(n) in Titelform (→ Slug ←) oder als ID (auch gemischt); mehrere durch Komma getrennt

count – Standardwert: 10

design – Standardwert: horizontal – weitere Möglichkeiten: vertical (Informationen untereinander); compact (schmale Datumsspalte, kein Bild); datetimeshort (Datum als 1.1., 18:00)

hide – Standardwert: “ – weitere Möglichkeit: content (verhindert die Anzeige der Beschreibung)

page – Standardwert: 1 – weitere Möglichkeiten: beliebige Nummer einer Listenseite (1 steht für die ersten 10 Elemente, 2 für die zweiten 10 usw.)

scope – Standardwert: future (nur zukünftige Termine) – weitere Möglichkeit: past (nur vergangene Termine)

show – Standardwert: “ – weitere Möglichkeit: weekday (ausgeschriebener Wochentagsname), wd (auf zwei Buchstaben gekürzter Wochentagsname)

uncats – Kategorie(n) in Titelform (Slug) oder als ID (auch gemischt); mehrere durch Komma getrennt

Beispiel

[esf_event_show_list count="3" scope="past" cats="konzert,musik" show="weekday" aspectratio="1:2"]

Erklärung: Anzeige der höchstens 3 (count) letzten, vergangenen Termine (scope) der Kategorien Konzert oder Musik (cats), mit Wochentag beim Datum (show) und einer linken Spalte, die nur halb so breit ist wie die rechte (aspectratio)