设置Wordpress首页的样式-特定帖子的外观

Question

I'm helping a friend out with a portfolio-site in Wordpress, with a specific idea of what the frontpage should look like. This is a quick sketch of his logo, and the post thumbnails are supposed to follow those dimensions. Posts on the frontpage are thumbnails only, no text or anything. As I see it, this would mean that the thumbnail for the 2nd and 3rd post on the page has a specific styling, while posts 1, 4, 5 and 6 have another.

Unfortunately I'm not a PHP mastermind, so I've been able to separate posts, but only from the first post and onwards, not from the 2nd to 3th post as needed.

How can this be done, if possible?

Answer 1

Create Child Specific CSS

nth-of-type(2n+1){ your css dode};

nth-of-type(2n+2){ your css dode};

nth-of-type(2n+3){ your css dode};

Answer 2

In your wordpress loop you could add classes to your posts, for example

<?php 
    $i = 1;
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();  ?>
                    <div class="post<?php echo $i;?>">
                    <?php the_post_thumbnail();  
                    $i++;
    } 
}
?>

and style them like

 .post1 .wp-post-image, .post4 .wp-post-image, .post5 .wp-post-image, .post6 .wp-post-image {
   width: 100px;
   height: 100px;
 }

 .post2 .wp-post-image, .post3 .wp-post-image {
   width: 200px;
   height: 200px;
 }

Did not test this, but it should work.