Shortcode für mehrspaltigen Inhalt in WordPress mit CSS3 Multi-column

In diesem Artikel hatte ich beschrieben, wie man Shortcodes definiert, um Inhalte in WordPress in 2 Spalten anzuzeigen. Diese Lösung basierte auf der Definition mehrerer Shortcodes, die DIVs mit entsprechenden Floats generieren.

Hier möchte ich nun eine einfachere Lösung zeigen, die auf dem CSS3 Multi-column Layout Modul basiert. Mit diesem ist es möglich, Inhalte mit nur 1 Shortcode wesentlich flexibler und mit weniger Code in mehreren Spalten darzustellen. Einer der großen Vorteile dieses Moduls ist, dass sich der Inhalt automatisch gleichmäßig auf alle Spalten verteilen lässt.

Shortcode definieren

In der functions.php wird definiert, dass mittels des Shortcodes „multicolumn“ ein DIV mit der Klasse „.multicolumn“ erstellt wird.

CSS definieren

In der CSS-Datei des Themes wird der Container nun mit den entsprechenden CSS3-Regeln gestyled. Ich beschränke mich hier der Einfachheit halber auf die Anzahl der Spalten und die Breite der Lücke zwischen diesen.

Shortcode verwenden

Im Artikel- oder Seiteneditor muss nun nur noch der Inhalt, der in den Spalten dargestellt werden soll, von folgendem Shortcode umgeben sein:

Beispiel 1: Fließtext

Dieser Text wird gleichmäßig auf 2 Spalten verteilt: 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. 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.

Beispiel 2: Liste

Mit diesem Shortcode lässt sich auch wunderbar eine Liste auf 2 Spalten verteilen. Das kann sinnvoll sein, wenn ich viele kurze Listenelemente habe.

  • Listenelement 1
  • Listenelement 2
  • Listenelement 3
  • Listenelement 4
  • Listenelement 5
  • Listenelement 6

Fazit

Es gibt noch viele weitere Gestaltungsmöglichkeiten, die ihr direkt beim W3C nachlesen könnt: http://www.w3.org/TR/css3-multicol/
Eine Anmerkung noch zur Browserkompatibilität: Die Column-Regeln werden ab Chrome 6, Safari 5, Firefox 3.6 und Internet Explorer 9 unterstützt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind mit * markiert.

Bitte benutze Pastie.org oder Pastebin.com, um Code in Deinem Kommentar zu veröffentlichen.

*

7 Kommentare

  1. Hey, erstmal vielen Dank für dieses Stückchen Code. Ich habe es genutzt und es funktioniert auch.
    Leider hat es einen großen Nachteil!
    Ich lasse auf der Startseite die Artikelauszüge anzeigen, durch den Shortcode wird nun leider alles was in diesem steckt nicht mehr angezeigt! Hast Du da nen Tip?

    1. Hi! Kann ich so nicht bestätigen. Habe das gerade mal getestet und der Text innerhalb des Shortcodes wird auch als Auszug auf der Startseite angezeigt. Einziger Unterschied: der Text wird dann wieder einspaltig dargestellt, da ja der Shortcode vom Weiterlesen-Link unterbrochen wird. Wie wird denn in deinem Theme der Auszug erstellt? Manuell oder automatisch? Welches Theme ist das? Selbst erstellt?

  2. Hallo,
    habe mal eine Frage. Kann man bei zwei Spalten auch unterschiedlich große Spalten erzeugen? Ich habe oben den Code so eingebunden, und verschiedene Dinge mit „column-width“ ausprobiert, aber da ändern sich immer beide Spalten.

    1. Mit dieser Multicolumn-Methode hier nicht. Da müsstest die dieses Vorgehensweise wählen und dann kannst du für linke und rechte Spalte unterschiedliche Breiten definieren.