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.

Anzeige

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

Anzeige


7 Kommentare

  1. Hallo!
    Interessante Idee, die CSS3-Eigenschaften dafür zu nutzen – bin auch schon auf dein Theme gespannt 🙂

    Allerdings noch 2 Tipps zur Sache an sich:
    Wäre es nicht besser, den Shortcode-Name mit Präfix zu machen, damit es keine Konflikte mit evtl. anderen Shortcodes von Plugins gibt?

    Und generell würde ich Shortcodes nicht ins Theme integrieren, sondern nur per Plugin. Denn was ist, wenn man das Theme mal wechselt – dann hat man die ganze Syntax im Beitragsinhalt und muss notfalls manuell alles rausfrickeln…

    Gruß, Dave 🙂

  2. Hallo David,

    Wäre es nicht besser, den Shortcode-Name mit Präfix zu machen, damit es keine Konflikte mit evtl. anderen Shortcodes von Plugins gibt?

    Da hast du natürlich Recht, könnte ich mir wirklich überlegen. Das Problem an der Sache wäre dann aber, dass der Shortcode wieder etwas komplizierter macht …

    Und generell würde ich Shortcodes nicht ins Theme integrieren, sondern nur per Plugin.

    Das Problem habe ich im letzten Absatz schon angesprochen. Man könnte es in ein Plugin verpacken, das müsste der Benutzer des Themes dann aber auch installieren. Vielleicht einen Hinweis im Einstellungsmenü … hmm.

  3. Wollte dich auf keinen Fall von der Idee abbringen – ist halt ein „heißes“ Grundsatzthema in der WordPress-Szene. Auf der einen Seite ein gewisser Komfort für Benutzer, andererseits der Preis der Kompatibilität.

    Mich beschäftigt die Frage, ob man sowas auch sinnvoll mit regulären Klassen über den HTML-Editor und visuellen Editor hinbekommt. Bültges „AddQuicktag“-Plugin bietet das ja…

    Ein richtiges Shortcode-Plugin, was nicht zu aufgebläht ist, hab ich bisher noch nicht gefunden…

  4. Nennt mich altmodisch, aber das ist CSS-Sache, da würde ich nen WordPress-Redakteur (mich inklusive) gar nicht ranlassen. Das Design muss entscheiden, ob Inhalte so oder so dargestellt werden.

    Ansonsten führt das ja nur zu einem inkonsistenten Bild. Bin auch gerade hier etwas überrascht: Sind jetzt einige Artikel in Spalten unterteilt, andere aber nicht? Das ist ja dann auch nicht schön…

  5. Naja ich spiele derzeit damit etwas rum. Eigentlich ist das dazu gedacht, den Text vielleicht mal etwas abwechslungsreicher zu gestalten. Mir kommt nicht vor, dasa das inkonsistent wirkt.

  6. Hm, ich weiß nicht. Guck mal diese Seite ganz oben: Der erste Absatz in Spalten, der zweite dann nicht mehr. Auf mich wirkt das sehr unruhig. Aber gut, ist ja deine Sache 🙂

    Noch eine andere Kleinigkeit: Deine Code-Boxen haben bei mir in Chrome immer Scroll-Leisten, selbst die Einzeiler. In Firefox ist das nicht so.

  7. In diesem Fall hast du wahrscheinlich Recht. Ich denke allerdings, dass das bei längeren Absätzen durchaus gut aussehen könnte. Wie gesagt: Eine endgültige Entscheidung ist noch nicht gefallen und diese Funktionen sind eher dazu gedacht dem Blogbetreiber einen größeren Gestaltungsfreiraum zu geben.

    Noch eine andere Kleinigkeit: Deine Code-Boxen haben bei mir in Chrome immer Scroll-Leisten, selbst die Einzeiler. In Firefox ist das nicht so.

    In letzter Zeit sind mir einige Dinge aufgefallen, wo der Chrome-Browser schlampt, während Firefox und Opera ordentlich arbeiten. Beispielsweise funktionieren die CSS-Transisitions bei visited-Links im Chrome nicht. Der Bug ist mit Chrome 18 behoben. In Firefox und Chrome funktionieren die, wie sie sollen.

  8. Pingback: Silbentrennung mit CSS3: Hyphens | picomol.de

Schreibe einen Kommentar

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