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.

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 10 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

WordPress im Zeitungsstiel
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.

Kommentare sind geschlossen.