Shortcode-Baukasten

Grüne Region

Eine Beispielseite für die Verwendung von Shortcodes. Shortcodes sind Bausteine in WordPress, die in den Texteditor eingefügt werden können und dann einen bestimmten Effekt auf die Darstellung und/oder den Inhalt eines Bereiches der Webseite haben.

Der Bereich, auf den ein Shortcode Einfluss nimmt wird durch zwei Kennzeichnungen mit eckigen Klammern eingefasst, der schliessende Bereich mit einem / vor dem eigentlichen Shortcode-Wort. Nur im vorderen Klammerbereich können, ggf. müssen weitere Attribute dieses Shortcodes übergeben werden, das sieht so aus: [code-wort attribut=”wert” attribut2=”wert2″]. Dabei sind nicht alle Attribute für jeden Shortcode beliebig verwendbar.

Falls Du Dich wunderst: der eigentliche Shortcode wird natürlich nicht im Frontend gezeigt. Meine Beispiele funktionieren nur, weil es keine echten Shortcode-Befehle sind. Oder ich benutze eine runde Klammer statt einer eckigen. Im Editor musst Du natürlich die eckigen Klammern nehmen, damit es funktioniert.

[code-wort]Wirkungsbereich des Shortcodes

Wirkungsbereich des Shortcodes

Wirkungsbereich des Shortcodes[/code-wort]

Im Editor kannst Du sehen, dass dieser erste Abschnitt unter anderem schon vom shortcode (container) eingefasst wird.

Es folgen Beispiele für den Einsatz der für diese Seite interessanten Shortcodes. Die Dokumentation der Shortcodes (ist leider nicht in Deutsch).

Regionen, die über die ganze Breite der Seite eingefärbt sind haben den Shortcode (region). Das zugehörige Attribut bg-color kann die Werte green-inv, yellow, blue-inv oder orange-inv haben. Vergleiche die Shortcodes für die folgenden Regionen im Editor. Übrigens, die Farben haben sich im Laufe der Programmierung etwas verändert, daher sind die Bezeichner für yellow und orange-inv nicht mehr wirklich passend.

An den Regionen kannst Du sehr deutlich erkennen:

  1. Der aktive Bereich vom öffnenden bis zum schließenden Shortcode ist vom Effekt (der Einfärbung des Hintergrundes) betroffen.
  2. Alles, was zwischen dem öffnenden und schließenden Shortcode steht, wird also auch von dessen Wirkung betroffen.
  3. Eine Region umfasst die gesamte Breite. Das ist für die Einfärbung schön, aber für das Layout des Textes nicht wünschenswert. Daher muss dieser mindestens noch in einen (container)-shortcode.

Blaue Region

Hier wird der Inhalt außerdem mit dem Shortcode (container) eingefasst. Ein container begrenzt die Breite in klar definierter Weise, jedoch für verschiedene Bildschirmgrößen unterschiedlich. Verändere die Größe des Browsers, und Du siehst, wie sich der container verändert.

Beachte auch:

  1. Der zweite Shortcode ist komplett innerhalb des Ersten. Du kannst Shortcodes verschachteln. Dabei MUSS der innere Shortcode immer zuerst geschlossen werden.
  2. Richtig: [code1][code2] Irgendwelcher Inhalt [/code2][/code1]
  3. Falsch: [code1][code2] Irgendwelcher Inhalt [/code1][/code2] <- Code1 wird zu früh geschlossen. Dies kann von WordPress dann nicht richtig erkannt werden.

Gelbe Region

Um das Layout weiter zu beeinflussen gibt es die Möglichkeit, in einem Abschnitt Spalten zu erzeugen. Dazu erzeugst Du innerhalb eines containers eine row, und dann darin col-Bereiche. Dabei ist der Shortcode row einfach nur notwendig, damit die durch col definierten Spalten auch funktionieren.

Spalte 1

Dies ist der Inhalt der ersten Spalte, wie Du sehen kannst geht der TExt nicht über die ganze Breite, sondern wird innerhalb der Spalte umgebrochen. Dabei kann der Text NICHT automatisch in die zweite Spalte umbrechen, denn die ist ja ein ganz anderer Bereich.

Für den col-Schortcode solltest Du immer die Breiten definieren. Dafür kannst Du die Attribute xs, sm, md, lg und xl setzen, jeweils mit Werten von “1” bis “12”; xs steht für die Darstellung auf ganz kleinen Displays (ca. Smartphones) , sm auf etwas größeren (ca. Tablets), md auf mittleren , lg auf normalen und xl auf sehr großen Bildschirmen. Die Zahl bezeichnet die Breite in zwölftel von der Gesamtbreite der row/des containers.

Dabei gilt: passt ein col-Element von der Breite nicht mehr, dann rutscht es in die nächste Zeile. Das ist sinnvoll, damit die col-Elemente auf kleinen Displays untereinander und auf großen nebeneinander dargestellt werden.

Spalte 2

Das ist praktisch! Hier ein paar Rezepte:

Immer in jeder col xs=”12″ setzen.

Zwei gleichgroße Spalten ab mittlerer Größe: je md=”6″ setzen (-> 6=12/2). (Bsp. 1)

Drei gleichgroße Spalten, aber erst auf PC’s: je lg=”4″ setzen. (Bsp. 2)

Eine große, zwei kleine Spalten ab kleiner Größe: erste Spalte sm=”6″, die beiden kleinen Spalten sm=”3″. (Bsp. 3)

Ein komplexeres Beispiel: die erste Spalte soll bis md die volle Breite einnehmen, darunter sollen zwei Spalten sich den Bereich teilen. Ab lg soll die erste Spalte die Hälfte und die beiden anderen Bereiche je ein Viertel einnehmen. Erste Spalte: xs=”12″ lg=”6″; die beiden anderen Spalten: xs=”12″ md=”6″ lg=3″. (Bsp. 4)

Spalte 3

An diese Spalte erkennst Du – der für xs gesetzte Wert gilt dann auch für die größeren Breiten. Und wenn Du den Browser schmaler machst. siehst Du, wie unsinnig kleine Spalten auf kleinen Displays sind, daher: immer xs=”12″ setzen – und dann für die größeren Breiten die Spalten nebeneinander setzen.

Orange Region

Zum Anschauen und Ausprobieren:

Beispiel 1

xs=”12″
md=”6″

xs=”12″
md=”6″

Beispiel 2

xs=”12″
lg=”4″

xs=”12″
lg=”4″

xs=”12″
lg=”4″

Beispiel 3

xs=”12″
sm=”6″

xs=”12″
sm=”3″

xs=”12″
sm=”3″

Beispiel 4

xs=”12″
lg=”6″

xs=”12″
md=”6″
lg=”3″

xs=”12″
md=”6″
lg=”3″

Braune Region

Hier werden card-Shortcodes vorgestellt.

Ein card-Element ist fast wie eine Webseite in der Webseite: es gibt

  • die Karte selber (card), innerhalb der sich header, body und footer befinden müssen.
  • optional einen header mit Überschrift (card-header) oder ein header-Bild,
  • einen Hauptbereich(card-body) mit den Elementen (card-title), (card-subtitle) und (card-text),
  • einen footer (card-footer),

Header der Beispiel-card

Titel im card-body

Untertitel im card-body

Der Hauptbereich der Karte mit der eigentlichen Information, dem Text. Für ein Bild ist kaum Platz, das sollte oben sitzen, siehe zweites Beispiel.

Nur der Footer

Oldenburger_Rathaus_mit_Marktplatz_Foto_Stadt_Oldenburg

Titel im card-body

Untertitel im card-body

Der Hauptbereich der Karte mit der eigentlichen Information, dem Text. Ein Bild ist besser oben aufgehoben. Es muss die Klasse card-img-top beim auswählen verpasst bekommen.

card-Dokumentation in Englisch