Wordpress Post Grid

时间：2013-07-27 作者：BDGapps

我正在尝试为我的Wordpress帖子创建一个自定义网格。我一直在网上搜索，但我找到的所有教程都使用了列方法，只在列之间交替。因为我现在所做的是不可能的，我需要它实际数出六个缩略图，然后返回一行，然后再做一次。有人知道这方面的好教程/示例吗（它不可能是插件）？非常感谢所有答案。下面的代码是我所拥有的，所以没有包装行。

enter image description here

 $categories =  get_categories(\'child_of=2\');  
foreach  ($categories as $category) {


        //Display the sub category information using $category values like $category->cat_name
        echo \'<h2>\'.$category->name.\'</h2>\';

        foreach (get_posts(\'cat=\'.$category->term_id) as $post) {


            echo \'<li class="item">\';

            setup_postdata( $post );
            $custom = get_field(\'face\');
  echo wp_get_attachment_image($custom);

  echo \'<div class="name">\';
 $custom = get_field(\'fullname\');
  echo $custom;
  echo \'</div>\';
  echo \'</li>\';
修订为下文：enter image description here

2 个回复
SO网友:Biranit Goren

这实际上不是一个与Wordpress相关的问题，您可以通过一个简单的PHP循环获得所需的结果：

$i = 1;
foreach ($array as $var) {
    if ($i==7) {
        // six items already displayed. 

        // Do whatever you want here 

        // now restart the count
        $i = 1;
    }

    // display your thumbs or whatever

    // increment $i
    $i++
}

SO网友:Johannes Pille

这将有点冗长。我倾向于把这个问题称为off-topic 首先，因为您已经计算出了特定于WP的部分<但是，由于我有一个不错的方格，而且我的足球俱乐部踢得很好，给你：

CSS

div.grid-row {
    width: 100%;
    max-width: 1140px; // adjust to your liking
    margin: 0 auto;
    overflow: hidden;
}
div.column,
div.splitcol  {
    margin-right: 3.8%;
    float: left;
    min-height: 1px;
}
div.column {
    width: 30.75%;
}
.ie div.column { // width for IE (I use modernizr)
    width: 30.6%;
}
div.splitcol {
    width: 43.8%;
    margin-right: 12.35%;
}
div.last {
    margin-right: 0;
}
/* collapse columns at some threshold */
@media handheld, only screen and (max-width: 799px) { // adjust to your liking
    div.column {
        width: auto;
        float: none;
        margin-right: 0;
        overflow: hidden;
    }
}
/* further collapse splitcols at some threshold */
@media handheld, only screen and (max-width: 479px) { // adjust to your liking
    div.splitcol {
        width: auto;
        float: none;
        margin-right: 0;
        overflow: hidden;
    }
}
您的代码已调整/HTML
$categories = get_categories( \'child_of=2\' );  
foreach  ( $categories as $category ) {

    echo \'<div class="grid-row"><h2>\'.$category->name.\'</h2></div>\';

    $cat_posts = get_posts( \'cat=\'.$category->term_id );
    $end = count( $cat_posts ) - 1;
    $i = 0;
    foreach ( $cat_posts as $post ) {
        setup_postdata( $post );
        $face = get_field( \'face\' );
        $name = get_field( \'fullname\' );

        if ( $i % 6 === 0 ) {
            echo \'<div class="grid-row">\';
        }
        if ( $i % 2 === 0 ) {
            echo \'<div class="column\';
            if ( $i % 6 === 4 ) {
                echo \' last\';
            }
            echo \'">\';
        }
        echo \'<div class="splitcol\';
        if ( $i % 2 === 1 ) {
            echo \' last\';
        }
        echo \'">\';

        echo wp_get_attachment_image($face)
            . \'<div class="name">\'.$name.\'</div>\';

        echo \'</div>\';
        if ( $i % 2 === 1 ) {
            echo \'</div>\';
        }
        if ( $i % 6 === 5 ) {
            echo \'</div>\';
        }
        if ( $i === $end &&  $i % 6 !== 5 ) {
            echo \'</div>\';
            if ( $i % 2 !== 1 ) {
                echo \'</div>\';
            }
        }
        $i++;
    }
}
正如所预见的那样，备选方案非常冗长。但是，CSS会根据您对6列的要求进行调整。如果你想潜入其中，here 是我目前在整个生产中使用的网格的CSS。

此外，您可以考虑：

结束
标签： posts   小码农  

相关推荐

使用WP_QUERY或QUERY_POSTS()或GET_POSTS()来优化站点？

我已经阅读了其他答案，但我不知道哪一个更快（对于运行缓慢的服务器来说是最好和最简单的）？我有一个每天点击量超过100万次的网站，服务器速度慢，数据库连接有限，所以我想优化我的网站。您建议我使用什么：WP\\u Query或Query\\u posts（）或get\\u posts（）？如果我想在不同的位置以不同的样式显示文章，我可以在我显示的每一篇文章上重复函数[WP\\u Query or Query\\u posts（）或get\\u posts（）]，还是最好使用一次，如果$I==1,2,3用于不同