Вывод поста в три колонки

Ноя 28th, 2009 | От Aleksey Davlad | Категория: CMS WORDPRESS, ХАКИ

Из нового на robsearles.com нашел простой способ вывода постов темой Вашего блога в три колонки. Сам не проверял, но достаточно простой и интересный способ. Не очень часто применяемый вариант такого вывода. Естественно, суть доработки состоит в добавлении функций в файл functions.php ( код ниже ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function my_multi_col_v2($content){
	// run through a couple of essential tasks to prepare the content
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
 
	// the first "more" is converted to a span with ID
	$columns = preg_split('/(<span id="more-\d+"><\/span>)|(<!--more-->)<\/p>/', $content);
	$col_count = count($columns);
 
	if($col_count > 1) {
		for($i=0; $i<$col_count; $i++) {
			// check to see if there is a final </p>, if not add it
			if(!preg_match('/<\/p>\s?$/', $columns[$i]) )  {
				$columns[$i] .= '</p>';
			}
			// check to see if there is an appending </p>, if there is, remove
			$columns[$i] = preg_replace('/^\s?<\/p>/', '', $columns[$i]);
			// now add the div wrapper
			$columns[$i] = '<div class="dynamic-col-'.($i+1).'">'.$columns[$i].'</div>';
		}
		$content = join($columns, "\n").'<div class="clear"></div>';
	}
	else {
		// this page does not have dynamic columns
		$content = wpautop($content);
	}
	// remove any left over empty <p> tags
	$content = str_replace('<p></p>', '', $content);
	return $content;
}

Затем измените файл style.css:

1
2
3
4
5

 /* dynamic columns */
div.dynamic-col-1 { float: left; width: 38%; padding-right: 2%;}
div.dynamic-col-2 { float: left; width: 38%;padding-right: 2%;}
div.dynamic-col-3 { float: left; width: 20%;}
div.clear { clear: both; }

В редакторе это выглядит следующим образом:

Сразу оговорюсь - вариант для гурманов. Многие, кто редко сталкивается с дизайном, наверное не поймут зачем такой вывод ( в чем прикол так сказать ). Поэтому показываю внизу с трудом найденный скрин шаблона, в котором реализована такая методика вывода ( и то - это только заготовка CSS с выводом в 2 колонки).

Теги: ,

Комментарии статьи