将文章自动为两列显示
很多博客都有一行显示多个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]
本文链接地址:将文章自动为两列显示
标签:两列, 文章
上一篇: 10个Javscript编程的技巧
下一篇:右下角弹出窗效果
