Mehrspaltige Absätze mit CSS3 und WordPress-Shortcodes

Das gestern vorgestellte WordPress-Themes picochic wird sogenannte WordPress Shortcodes unterstützen, mit denen sich in diesem Fall Absätze mehrspaltig anzeigen lassen können. Dabei wird auf die CSS3-Eigenschaft column-count zurückgegriffen. Durch die Nutzung der Shortcodes wird diese Funktion aber sehr komfortabel und flexibel zur Verfügung gestellt.

Viele kennen ja die – vor allem in Foren übliche – BBCode-Syntax. Wird zum Beispiel ein Textteil zwischen [b] und [/b] gestellt, erscheint dieser fettgedruckt. Eine ähnliche Syntax haben WordPress-Shortcodes, die im Theme definiert werden können.

In diesem Fall wollen wir einen Shortcode definieren, der es ermöglicht beliebige Absätze in zwei oder mehr Spalten anzeigen zu lassen. In picochic ist in der functions.php folgende Funktion enthalten:

function picochic_sc_columns($atts, $content = null) {
	if(!empty($content)) {
		return do_shortcode('<p class="columns-'.$atts['count'].'">'.$content.'</p>');
	}
}

add_shortcode('columns', 'picochic_sc_columns');

In der letzten Zeile seht ihr das Wort „columns“. Dieses kann natürlich beliebig gewählt werden. Da ich bei mir mehrspaltige Ansichten erzeugen möchte, eignet sich dieser Name natürlich hervorragend :-).

Wird nun ein Artikel geschrieben und dort ein Absatz mit

[column*s count="2"]Irgendein Text[/columns] (ohne Sternchen)

umschlossen, so erzeugt WordPress daraus den HTML-Code, wie er oben in der Funktion definiert wurde, also:

<p class="columns-2">Irgendein Text</p>

Absätze bekommen nun also eine CSS-Klasse zugewiesen. Diese können in der style.css designt werden. Dahin schreiben wir jetzt:

	/* Shortcodes
	--------------------------------------------- */

	.columns-, .columns-2, .columns-3 {
		-webkit-column-gap: 30px;
		-moz-column-gap: 30px;
		column-gap: 30px;
	}

	.columns-2, .columns- {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}

	.columns-3 {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}

Soweit ich weiß, funktionieren CSS3-Spalten in Firefox, Chrome, Safari und Opera. Beim Internet Explorer tut sich noch nichts. Das ist allerdings auch kein großes Problem. Der zeigt anstatt der zwei oder drei Spalten dann einfach eine einzige an.

WordPress-Shortcodes bieten Spielraum für allerlei Möglichkeiten. Spalten zu definieren ist nur eine davon. Was man allerdings beachten sollte: Shortcodes sind Theme-spezifisch. Wechselt man auf ein anderes WordPress-Theme, das diese Shortcodes nicht untersützt, werden diese als Text ausgegeben und nicht mehr in HTML-Code umgewandelt.

Weiterführende Links

• Shortcodes für WordPress
• CSS3 Multi Columns