Css 需要3列WordPress布局帮助
我正忙着为我的博客主页设计一个3x3杂志风格的布局 我希望包含每个帖子的div垂直流动,这样每3行下面就不会有大的空白。看起来最简单的方法是用三根柱子填满每一根柱子(这样就不会在每个柱子下面留下很大的空间),然后把这三根柱子并排放置 问题是Wordpress循环需要按顺序拉帖子。我不知道如何改变Wordpress循环的顺序,尽管我尝试了一些PHP技巧,使用counts和for循环,但我似乎无法让它工作 任何关于基本Wordpress循环或CSS方法的想法或建议都将不胜感激,因为这会让我发疯Css 需要3列WordPress布局帮助,css,wordpress,layout,Css,Wordpress,Layout,我正忙着为我的博客主页设计一个3x3杂志风格的布局 我希望包含每个帖子的div垂直流动,这样每3行下面就不会有大的空白。看起来最简单的方法是用三根柱子填满每一根柱子(这样就不会在每个柱子下面留下很大的空间),然后把这三根柱子并排放置 问题是Wordpress循环需要按顺序拉帖子。我不知道如何改变Wordpress循环的顺序,尽管我尝试了一些PHP技巧,使用counts和for循环,但我似乎无法让它工作 任何关于基本Wordpress循环或CSS方法的想法或建议都将不胜感激,因为这会让我发疯 您
您可以看到它目前的状态,这看起来像是jQuery的工作
如果您想在不使用Javascript的情况下执行此操作,则需要为post循环中的每个列缓冲HTML,然后在循环完成后一次性输出 如下所示:
<?php
// Hold the buffered column output
$cols = array("", "", "");
// Keep track of column we're appending to
$currentCol = 0;
// Get the posts
$posts = get_posts();
foreach($posts as $post){
// Run the WP post filters
setup_postdata($post);
// Append the content to the current column
$cols[$currentCol] .= '<div class="item">';
$cols[$currentCol] .= get_the_title();
$cols[$currentCol] .= get_the_content();
$cols[$currentCol] .= '</div>';
// Increment the current column and make sure we haven't
// gone over our total columns
if(++$currentCol >= count($cols)){
$currentCol= 0;
}
}
?>
<div id="col1"><?php echo $cols[0]; ?></div>
<div id="col2"><?php echo $cols[1]; ?></div>
<div id="col3"><?php echo $cols[2]; ?></div>
假设您的布局是固定的,使用循环操作的直接方法可能会更简单,如模型图所示
<?php
$count = 0;
$column_1 = '';
$column_2 = '';
$column_3 = '';
$ad_block = '<div id="ad-block">Ad code here</div>';
while ( have_posts() ) : the_post();
$count++;
$content = '';
$content .= '<div class="post-block">';
$content .= '<h2>'.get_the_title().'</h2>';
$content .= '<div class="excerpt-block">'.get_the_excerpt().'</div>';
$content .= '<div class="continuebutton">...READ THIS ARTICLE</div>'; // Add appropriate code here..
if($count == 1 || $count == 4 || $count == 6) {
$column_1 .= $content;
} else if($count == 2 || $count == 7) {
$column_2 .= $content;
} else if($count == 3 || $count == 5 || $count == 8) {
$column_3 .= $content;
} else {
// Shouldn't come here...
}
// Insert the ad block in column 2 after adding 1st row
if($count == 2) {
$column_2 .= $ad_block;
}
endwhile;
?>
<div id="col1"><?php echo $column_1;?></div>
<div id="col2"><?php echo $column_2;?></div>
<div id="col3"><?php echo $column_3;?></div>
awesome没有意识到我可以使用PHP一次输出所有内容。。。非常感谢!:)