WordPress:将文章自动显示为两列

分类:Hack技巧 发表时间:2009年11月25日 字体大小:12号14号

很多博客都有一行显示多个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 class="content_left">';
			if ($i > 1){
				$return .= "<h2>";
			} else{
				$return .= '<div class="content_right"><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列等。

你也许会喜欢阅读这些：

不错不错，已经有 个评论！
  1. Hobo
    2009年11月26日 08:26 回复

    看上去用jQuery也可以实现哈

    • Hiro
      2009年11月26日 09:02

      服务器端代码永远快于jQuery代码，而js代码只是静态地改变，若禁用的话，那你的两列效果就完全没有了。所以js只是用来增强体验的，而不能完全来实现逻辑！

  2. DeepBlue
    2009年11月26日 10:46 回复

    收藏了，很好

  3. 万戈
    2009年11月26日 12:03 回复

    我好像还用不着，先学习下啦

  4. 天缘博客
    2009年11月26日 17:10 回复

    学习一下，WP的用户太多啦，看来ZB是越来越少人用了？

    • Hiro
      2009年11月26日 17:49

      WP是国际化的产品，有很多人在为他创作插件、代码等，可以找到很多有用的资源。

  5. aa
    2009年11月27日 17:52 回复

    做得不错哦。支持一下！

  6. 手机图片
    2009年11月27日 17:53 回复

    您的评论正在等待审核。

    做得不错哦。支持一下！

  7. Race
    2009年11月30日 13:08 回复

    学习了。

  8. amy
    2009年12月9日 20:49 回复

    显示为2列？那是个什么样子？

  9. 奔四大叔
    2009年12月21日 21:23 回复

    学习了，不知道有演示没

    • Hiro
      2009年12月22日 00:01

      Sorry，没做Demo!

我要评论

  • * *