Abonniere die neusten Artikel via 
WordPress Beiträge im 2-Spalten-Layout
Mit CSS 3 kann man mehrspaltige Layouts gestalten, bis es so weit ist und die Anpassungen in den meisten Browsern gültig sind, kann man mit ein wenig PHP ähnliche Effekte erzielen. Eine Spielerei, die bei der Entwicklung eines Themes abgefallen ist und sehr schön die Möglichkeiten im Theme und via WordPress Hooks demonstriert.
Um die Lösung zu realisieren, muss die folgende Funktion in die functions.php des Themes. Sie analysiert den Beitrag, trennt bei Leerzeichen, errechnet dadurch die Wortzahl und teilt diese durch die 2 Spalten. Jeweils bei der Hälfte wird ein div-Container geschlossen und ein neuer eröffnet. Diese beiden Container bekommen unterschiedliche Klassen und können so per CSS formatiert werden - in zwei Spalten. An Beispiel des Standard-Layout von WordPress sieht es dann wie folgenden Screenshot aus.
Der folgende Code ist einfach und kann willkürlich erweitert werden, er zeigt nur, dass man schnell und unkompliziert auf den Content einwirken kann. Um die Funktion zu aktivieren, ohne auf das Template Einfluss zu nehmen und die entsprechen Filter von WordPress auch weiterhin zu ziehen, wird via add_filter die Funkion geladen.
Die zweite Funktion habe ich mal eingebaut, um wieder die Nutzung von Conditional Tags zu unterstreichen. Denn in einer Archive oder Suchseite sollte das Layout sicher nicht zweispaltig sein und so kann man es wunderbar und einfach einschränken.
function fb_get_multicolumn($content) { $words = explode(' ', $content); $x = count($words); $x = floor($x / 2); $return .= '<div id="content_left">' . "\n"; $return .= '<p>'; $i = 0; foreach ($words as $word) { $return .= $word . ' '; if ($i == $x) { $return .= '</p>' . "\n"; $return .= '</div>' . "\n"; $return .= '<div id="content_right">' . "\n"; $return .= '<p>'; } $i ++; } $return .= '</p>' . "\n"; $return .= '</div>' . "\n"; $return .= '<br style="clear: both" />' . "\n"; return $return; } function fb_multicolumn($content) { if ( is_single() ) { echo fb_get_multicolumn($content); } else { echo $content; } } add_filter('the_content', 'fb_multicolumn', 1);
Damit die beiden Spalten auch sichtbar werden und nicht nur zusätzliche div in den Quellcode kommen, muss entsprechend formatiert werden. Dazu sieht eine einfache Lösung wie folgt aus, die in das Stylesheet des Themes gehört. Alternativ könnte man auch diese via Hook laden, was jedoch den Quelltext aufbläht und unschön erscheinen lässt. Außerdem werden damit die Zugangsmöglichkeiten für Mobile Web eingeschränkt. Die Auslagerung in ein Style für Screen ist da wesentlich besser geeignet. Sollte die Funktion mal nicht laufen, dann sind lediglich einige Zeilen CSS zu viel im Stylesheet und verursachen keine probleme in der Darstellung, denn die Klassen zum Ansprechen fehlen dann.
#content_left { float: left; width: 47% } #content_right { float: right; width: 47%; }
Die dargestellte Möglichkeit soll nicht perfekt sein, sie soll anregen und Möglichkeiten und Ideenansätze darlegen. Viel Spass damit.
Das Weblog wird angetrieben von 
3. Juli 2008 um 10:30
Interessante Möglichkeit ich kann mir das auf ner Webseite aber irgendwie gar nicht vorstellen. Im Print Bereich werden kleinere, nebeneinander angeordnete Spalten ja fast immer verwendet, online würde mir das glaube ich ein wenig komisch vorkommen.
Da hat man einfach schon irgendwie im Bewusstsein, das man immer vertikal von oben nach unten liest.. beim Print durch Umblättern eher horizontal
3. Juli 2008 um 10:47
Dafür gibt es auch ein Plugin. Habe es aber noch nicht getestet: http://epicalex.com/newspaper-style-posts/
3. Juli 2008 um 10:48
Huhu
Eine Frage: Ist es überhaupt anzunehmen, dass ein Tageszeitungähnliches Designmittel Wege ins Blog finden können? Ich mein, eine Tageszeitung hat eine gewisse teils unhandliche Größe, aber man hat alle Spalten auf einem Blick. Ich mit meinem winzigen 800px hohen Bildschirm müsste runterscrollen, dann wieder hochscrollen und hab im schlimmsten Fall das letzte Wort vom letzten Satz vergessen und muss noch mal nachschauen.
Ich glaube das kann man nur machen, wenn der Beitrag damit die 600px Höhe nicht überschreitet oder jedenfalls nicht wesentlich, dann wäre ein zusammenhängender Beitrag aber vielleicht sinnvoller...
Ich lass mich aber auch gerne aufklären. Eine nette Spielerei ist es allemal und ich erstaunt/erfreut ob der ganzen Möglichkeiten
3. Juli 2008 um 11:04
@Latita: Scheinbar will man es haben, ansonsten würde man sich sicher nicht die Arbeit beim W3C machen und CSS in diese Fähigkeit versetzen. Man kann das ganze ja auch viel besser machen, habe je explizit geschrieben, dass es nur anregen soll. Beispielswiese könnte man die Höhe mit em/% machen und man müsste dann eventuell nicht mehr scrollen, allerdings kommt dann wieder die Breite ins Spiel. Das Problem besteht natürlich auch hier, Browser sind verschieden und noch viel verschiedener sind die Nutzer davor.
3. Juli 2008 um 11:45
die Breite ist sogar ein großes Problem. Nimmt man variable oder fixe Breiten. Grad wie du sagst mit den verschiedenen Browsern. Einige haben die Lesezeichenliste offen und damit nur noch einen kleineren Teil des ganzen Browsers. Wählt man eine fixe Breite muss man horizontal scrollen, wählt man die variable, hat man wahrscheinlich ganz schmale, lustig aussehende Spalten.
Ach da fällt mir ein, es gibt doch Layouts, in denen die Sidebar unter dem Content ist. Da könnte ich mir ein zwei-Spalten-Text durchaus vorstellen. ^^ Frage beantwortet
3. Juli 2008 um 12:07
Das Teilen der beiden Hälften und wieder vereinigen könntest du alternativ vermutlich auch über
join(' ', array_slice($words, 0, $x))usw. erledigen.Ich schätze mal nach Bauchgefühl, dass das gerade bei längeren Beiträgen ein paar Nanosekunden spart.
3. Juli 2008 um 17:15
Ich habs mir gerade mal angeschaut. Langer Text in 5 Absätzen mit einem Zitat drin und einem Bild. Folgendes Problem tritt auf: Durch deine Funktion fliegen alle p Tags raus bis auf die, die du nach bzw. vor den Divs setzt. Dadurch wird die Semantik des Textes zerstört, unter Umständen ist die Seite nicht mehr valid.
Mal abgesehen davon zeigt dieses Beispiel schön die Möglichkeiten, die man mit WP hat.
3. Juli 2008 um 19:38
@Micha: was sich leicht wieder ändern läßt, entweder man übergibt nicht den $content, sondern holt den Content mit get_the_content() oder man setzt den Filter von WordPress im Vorfeld ein:
3. Juli 2008 um 20:12
Ja, mag sein. Was machst du aber, wenn die Hälfte der Wörter genau in einer ungeordneten Liste ist. Das wirst du nie ausschließen können. Nimm mal einen Artikel mit Bild und schau mal mit var_dump($words) an, was er mit dem img macht. Da alles, was zwischen 2 Leerzeichen steht, ein "Wort" ist, kann es theoretisch passieren, das deine Divs zwischen <img und src="test.jpg" landen.
3. Juli 2008 um 20:19
@Micha: Deswegen wollte ich ja nicht weiter darauf eingehen, ähnlich ist es Bildern, denn die kann man nicht in Wörter aufteilen. Dazu musste man ein exclude-Funktion bauen und integrieren, die könnte auf Basis HTML-Tags laufen und die in ein Array speichern, ausgeben muss man es dann wieder in der gleichen Reihenfolge. So wirklich ist es nur für "Zeischriften"-Stil, eher Textlastig.
3. Juli 2008 um 21:10
Sag mal, wäre es nicht vielleicht besser, die Gestamtstringlänge zu ermitteln, durch 2 teilen und dann nach der ersten Hälfte plus bis zum nächsten schließenden Tag dort nur die Teilungsdivs reinschreiben. Das ist auch bestimmt nicht so prformancelastig. Exakt die Mitte triffst du ja eh nicht, das spielt ja sicherlich auch nicht die Rolle.
3. Juli 2008 um 21:30
@Micha: exakte Stringlänge ist einfach, aber den Tag bei der Mitte sehe ich auf die Schnelle keine Lösung, aber vom Prinzip sollte es gehen. Aber auch dann wird immer das Problem mit Listen und der Größe von Bildern bestehen.
3. Juli 2008 um 21:38
Ich glaube, wir belassen es als Beispiel. Für Risiken und Nebenwirkungen fragen Sie...
4. Juli 2008 um 09:40
Wäre es nicht besser, wenn man die Zeichen zählt halbiert und bis zum nächsten Leerzeichen oder sogar Satzzeichen springt? Ich mein wen im zweiten Teil mehr längere Wörter vorkommen als im ersten Bereich könnte es unschön werden.
Trotzem ne Gute Idee! Ich mag solche 2 Spaltigen Layouts, jedoch könnte ich es bei mir nicht vorstellen da ich eher Code spezifische Dinge poste da machen mehrere Spalten keinen Sinn.
4. Juli 2008 um 17:36
Ich denke das wie, wann oder wo man den zweiten oder dritten DIV ansetzt ist nicht so wichtig! Da wird man schon eine Möglichkeit finden.
Viel wichtiger finde ich die Frage wie das bei einem Theme mit wenig Platz funktionieren soll. Dazu müsste das ganze so ändern das die ganze breite verwendet wird, was sicherlich dem einen oder anderen nicht gefallen wird.
Die meisten Zeitungen die einen Webseite haben, habe so etwas auch nicht.
Es würde aber auch sehr komisch aussehen.
Die CSS3 Zeit wird zeigen was man alles machen kann und wie gut die ein oder andere Idee ankommt.
Die Idee im allgemeinen finde ich aber sehr gut.
4. Juli 2008 um 20:47
Einige Probleme wurden ja schon angesprochen (getrennte Tags, Hurenkinder & Schusterjungen, Bilder, usw). Text in mehr als zwei Spalten aufzuteilen ist schon hohe Kunst. Kommen dann noch Multimedia-Elemente wie z.B. Videos hinzu, kommt man ganz schnell ins Schleudern. Die Online-Medien, die ursprünglich vom Print kommen, verwenden Mini-Vorschauen. Wahrscheinlich weil das verwendete CMS keine Inhalte mit einer Breite von mehr als x Pixeln erlaubt
Grundsätzlich kann ich mir deswegen eine Anwendung auch nur beim Druck von Webseiten, also wieder im Print, als sinnvoll vorstellen. Am Monitor dürften die Probleme weit größer als die Vorteile sein.
7. Juli 2008 um 09:02
mir kommt gerade ne idee man könnt ja selber ein shortcode einsetzen an welcher Stelle er in 2 Spalten aufteilt. Das ganze könnte man dann als Plugin integrieren. Natürlich müsste das Theme immer angepasst werden.
7. Juli 2008 um 17:25
Warum muss man das Theme immer anpassen? [cols 3] etwas Text neue Spalte noch was Text[/cols] Würde den text in 3 Spalten ausgeben. Von einem Plugin könnte alles zwischen [cols x] und [/cols] in beliebig viele Div-Container, und somit beliebig viele Spalten, gepackt werden. Damit das ganze nicht zerpflückt wird, packt man um die Div-Container einen weiteren Div-Container. Man könnte es auch "klassisch" mit einer Layout-Tabelle machen
Aber wozu das ganze? Vielleicht in der einen Spalte ein englischer Text und rechts daneben die Übersetzung? Oder links PHP-Code, in der Mitte eine Erklärung und rechts der optimierte PHP-Code?
7. Juli 2008 um 17:56
@Ralf: Die Idee bei "Wozu das ganze?" gefällt mir. Die Lösung via Shorttags ist def. besser, aber nicht bei jedem Nutzer einsetzbar, da scheitert es am Verständnis. Bin gerade heute wieder beim Erklären des Uploads von Bildern verzweifelt.
7. Juli 2008 um 18:45
man müsste das CSS einwenig anpassen meiner meinung nach wenn man es mit shorttags macht. um es zumindest zu optimieren. natürlich käm es auch ohne spezielle anpassung aus.
7. Juli 2008 um 20:43
Der Zeitungsstil ist, im Bezug auf das Web, wahrscheinlich auch ein sehr schlechtes Beispiel. Aber im Lehrnbereich benötigt man wohl öfters Spalten. Ich habe da so ganz dunkle Erinnerungen an meine Schulzeit. Overheadfolien und Grafiken mit Erklärungen usw. Dann wäre es natürlich besonders praktisch wenn man einzelne Spalten speziell formatieren kann (z.B. verschiedene Hintergrundfarben).
Das nicht jeder mit Shorttags zurecht kommt, kann ich mir gut vorstellen. Es werden wohl auch die wenigsten ihre Beiträge im Code-Modus schreiben, stattdessen eher den WYSIWYG-Modus verwenden.
Da die Funktionalität im Bezug auf Formatierung und Funktionen bei WP stetig steigt, benötigt WP wahrscheinlich bald mal einen wirklich guten WYSIWYG-Editor den man als Plugin-Autor auch möglichst einfach um Schaltflächen erweitern kann. Quasi analog zum "add_filter" ein "add_wysiwyg_button".