关于 css:3 列 WordPress 布局需要帮助 | 珊瑚贝

3 column WordPress layout help needed


我正忙着为我的博客主页设计一个 3×3 杂志风格的布局。

我希望包含每个帖子的 div 垂直流动,因此每行 3 下没有大的空白。看起来最简单的方法是拥有三列并填充每一列(其中将停止在每个后块下方的大空间),然后将这三列并排放置。

问题在于 WordPress 循环需要按顺序拉出帖子。我不知道如何更改 WordPress 循环的顺序,即使我尝试了一些使用计数和 for 循环的 PHP 技巧,我似乎也无法让它工作。

任何关于基本的 WordPress 循环或 CSS 方式使其工作的想法或建议将不胜感激,因为它让我发疯!

What I want it to look like.

您可以在 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;
    $column_1 = ;
    $column_2 = ;
    $column_3 = ;
    $ad_block = ‘Ad code here’;
    while ( have_posts() ) : the_post();

        $count++;
        $content = ;
        $content .= ;
        $content .= .get_the_title().;
        $content .= .get_the_excerpt().;
        $content .= ‘…READ THIS ARTICLE’; // 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;                
    ?>                        
    <?php echo $column_1;?>
    <?php echo $column_2;?>
    <?php echo $column_3;?>

调整代码以使用内页。

  • 太棒了,没有意识到我可以使用 PHP 一次输出所有内容……非常感谢! :)


如果您想在不使用 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
    $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] .= ‘‘;
        $cols[$currentCol] .= get_the_title();
        $cols[$currentCol] .= get_the_content();
        $cols[$currentCol] .= ‘
‘;

        // Increment the current column and make sure we haven’t
        // gone over our total columns
        if(++$currentCol >= count($cols)){
            $currentCol= 0;
        }
    }

?>

<?php echo $cols[0]; ?>
<?php echo $cols[1]; ?>
<?php echo $cols[2]; ?>


来源:https://www.codenong.com/8608708/

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_9508.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?