3 column WordPress layout help needed
我正忙着为我的博客主页设计一个 3×3 杂志风格的布局。
我希望包含每个帖子的 div 垂直流动,因此每行 3 下没有大的空白。看起来最简单的方法是拥有三列并填充每一列(其中将停止在每个后块下方的大空间),然后将这三列并排放置。
问题在于 WordPress 循环需要按顺序拉出帖子。我不知道如何更改 WordPress 循环的顺序,即使我尝试了一些使用计数和 for 循环的 PHP 技巧,我似乎也无法让它工作。
任何关于基本的 WordPress 循环或 CSS 方式使其工作的想法或建议将不胜感激,因为它让我发疯!
您可以在 http://www.unleashreality.com/
上查看目前的情况
这看起来像是 jQuery Masonry 的工作。
查看 http://masonry.desandro.com/
假设您的布局将固定一个,如模型图像所示,使用循环操作的直接方法可能更简单。
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 33 34 35 36 |
<?php
$count = 0; $count++; if($count == 1 || $count == 4 || $count == 6) { // Insert the ad block in column 2 after adding 1st row endwhile; |
调整代码以使用内页。
如果您想在不使用 Javascript 的情况下执行此操作,则需要为 post 循环中的每一列缓冲 HTML,然后在循环完成后一次性输出。
类似于以下内容:
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 33 |
<?php
// Hold the buffered column output // Keep track of column we‘re appending to // Get the posts // Run the WP post filters // Append the content to the current column // Increment the current column and make sure we haven’t ?> <?php echo $cols[0]; ?> |
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269254.html