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
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.
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?
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?
Okay, Danke Matthias, ich werde mal etwas rum probieren.
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.
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.
IE 9 unterstützt css3-multicol leider NICHT!
Tatsächlich! Naja, wäre auch zu schön gewesen. IE halt.