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.
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
Dafür gibt es auch ein Plugin. Habe es aber noch nicht getestet: http://epicalex.com/newspaper-style-posts/
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
@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.
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
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.
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.
@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:
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.
@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.
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.
@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.
Ich glaube, wir belassen es als Beispiel. Für Risiken und Nebenwirkungen fragen Sie...
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.
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.
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.
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.
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?
@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.
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.
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".
Hallo,
ich benutzte WP 2.8.6 und habe endlich das gefunden was ich schon lange haben wollte. Leider funktioniert das nicht mit version 2.8.6. Ich habe mir eine kopie von der index.php erstellt und diese als home.php umbenannt.
weis jemand wie das mit der WP Version 2.8.6 umzusetzten geht ????
Danke für die antwort
@Caro12: sollte genauso klappen, hat nichts mit der Version von WP zu tun, setzt aber viele Kenntnisse im Layouten voraus. Eventuell wirst du mit einem Plugin besser bedient, zu empfehlen ist dabei "Pagecolumnist", suche mal danach. Das Plugin ist auf diese Idee hin entstanden und kann noch einiges mehr.
Hallo,
Danke für die Antwort, das mit dem Plugin ist für mich die bessere Wahl, Danke nochmal.
Das funktioniert super. Ich habe eine andere Frage. Wie kann ich auf einer statischen Startseite ohne Sidebar die Inhalte trennen? Linke Spalte statischer Inhalt, rechts die letzten Artikel oder bestimmte Artikel aus einer Kategorie.
Danke Michaela
Sehr interessant, allerdings würde ich das gern bei meinem Inhaltsverzeichnis so machen und dies in 2 Spalten darstellen und dafür einfach die Sidebar ausblenden, hat denn jemand eine Idee, wie man das machen könnte?
Als Ergänzung zwei weitere Möglichkeiten, über die ich gestern bei meinen Recherchen gestolpert bin:
WordPress Plugin: Page Columnist
CSS3 Multi Column
Jan (interiete.net)