Wordpress Post Grid

admin管理员组

文章数量:1418410

I am trying to make a custom grid for my Wordpress posts. I have been searching the web however all the tutorials I have found utilize a column method where it just alternates between the columns. For what I am doing that would be impossible I need it to actually count off six thumbnails and then return a line and do it again. Does anyone know of a good tutorial/example of this(It can't be a plugin.)? All answers much appreciated. The code below is what I have so war without it wrapping the lines.

 $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>';

REVISED TO POST BELLOW:

I am trying to make a custom grid for my Wordpress posts. I have been searching the web however all the tutorials I have found utilize a column method where it just alternates between the columns. For what I am doing that would be impossible I need it to actually count off six thumbnails and then return a line and do it again. Does anyone know of a good tutorial/example of this(It can't be a plugin.)? All answers much appreciated. The code below is what I have so war without it wrapping the lines.

 $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>';

REVISED TO POST BELLOW:

• posts

Share Improve this question edited Jul 27, 2013 at 16:46 BDGapps asked Jul 27, 2013 at 14:23 BDGappsBDGapps 13311 silver badge66 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

This isn't really a Wordpress related question, and you can get your desired result by a simple PHP loop:

$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++
}

This is going to be somewhat lengthy. And I'm inclined to call the issue off-topic in the first place, since you have the WP-specific part figured out already.
But since I have a decent grid lying around and my football club just played well, here you are:

The 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;
    }
}

Your code adapted / The 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++;
    }
}

Alternatives

As foreseen, turned out quite lengthy. The CSS however is adjusted to your requirement of 6 columns. In case you care to dive into it, here is the CSS of the grid I currently use in production in its entirety.

Further you could consider:

• jQuery Masonry
• Isotope
• CSS3 Vodoo using column-count and column-gap (related article)

本文标签： Wordpress Post Grid