将文章自动为两列显示

很多博客都有一行显示多个post文章的样式,他的原理其实非常简单,今天找到一段php代码,只需在functions.php文件中添加上,那么你的文章也会多列显示,非常实用! 1.PHP代码: 打开functions.php文件,添加如下的php代码,通过判断是否是第二次输出来给出左右浮动的div标签。 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 31...

很多博客都有一行显示多个post文章的样式,他的原理其实非常简单,今天找到一段php代码,只需在functions.php文件中添加上,那么你的文章也会多列显示,非常实用!

1.PHP代码:

打开functions.php文件,添加如下的php代码,通过判断是否是第二次输出来给出左右浮动的div标签。

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
31
32
< ?php
function my_multi_col($content){
	$columns = explode("<h2>", $content);

	$i = 0;

	foreach ($columns as $column) {
		if (($i % 2) == 0){
			$return .= '<div>';
			if ($i > 1){
				$return .= "<h2>";
			} else{
				$return .= '<div><h2>';
			}
			$return .= $column;
			$return .= "</h2></div>";
			$i++;
		}

		if(isset($columns[1])){
			$content = wpautop($return);
		}else{
			$content = wpautop($content);
		}
		echo $content;
	}
}

add_filter('the_content', 'my_multi_col');

?>
</h2></div>

代码中的h2是你的每个文章标题所包含的标签。

2.CSS代码:

完成在functions.php文件中添加好上面的代码后,记得打开style.css文件,添加上样式代码。

1
2
3
4
5
6
7
8
9
10
11
.content_right, .content_left {
    width:45%;
}

.content_left {
    float:left;
}

.content_right {
    float:right;
}

那么同理,我们可以根据判断$i变量来输出3列、4列等。

转载请注明文章转载自:网站前端,web前端,前端脚本,前端优化|时代前端 [http://www.52shidai.com]
本文链接地址:将文章自动为两列显示

标签:,

发表评论

*

* 绝不会泄露



Copyright © 网站前端,web前端,前端脚本,前端优化|时代前端 and WPYOU All Rights Reserved.

Powered by Wordpress and Theme by WPYOU