WordPress的：不同类型的首页上不同的循环 [英] Wordpress: Different loop for different categories on frontpage

问题描述

当我为不同的类别使用不同的循环时，我在设计中遇到了一个错误。 在此处查看实时预览。 希望：如果在斯德哥尔摩的帖子与FASHIONTOAST：SPACE CAMP属于同一类别，但标签dagen的博客装在最后提到的帖子的页面顶部显示！它应该放在帖子的图片下，就像它在希望我们：在斯德哥尔摩的时候一样。为什么会发生这种情况？

I get a bug in my design when I use different loops for different categories. Check out live preview here. The "WISHWISHWISH: WHEN IN STOCKHOLM" post is under the same category as "FASHIONTOAST: SPACE CAMP", but the tag "blogger outfit for dagen" goes to the top of the page on the post last mentioned! It's supposed to go under the image for the post, like it does on "WISHWISHWISH: WHEN IN STOCKHOLM". Why does this happen?

我的代码：

My codes:

<?php get_header(); ?>
<div id="columns">
<div id="frontpage" class="clearfix">   

    <?php 
    query_posts('posts_per_page=9' . '&orderby=date'); 
    while ( have_posts() ) : the_post(); 
    if ( in_category( 'Streetstyle' )) {
        if(condition){ ?>
            <div <?php post_class('pin'); ?>>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Streetstyle</tag></div>
                    </a>
                </div>
            </div>
        <?php }
    } elseif ( in_category( array( 'blogger-outfit' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Blogger Outfit For dagen</tag></div>
                    </a>
                </div>

        <?php }
     }
     elseif ( in_category( array( 'video' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Video</tag></div>
                    </a>
                </div>

        <?php }
      }
     elseif ( in_category( array( 'tips' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Fashion tips</tag></div>
                    </a>
                </div>
        <?php }
      }
     else {
        if(condition){ ?>
        <a href="<?php the_permalink(); ?>">
            <div <?php post_class('pin'); ?>>
                <h1>
                    <?php the_title(); ?>
                </h1>
                <?php if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
                } 
                the_content(' '); ?> 
            </div>
        </a>
    <?php } }
    ?>          
    <?php endwhile;
    // Reset Query
    wp_reset_query(); ?>
</div>
</div>

风格：

Style:

    #wrapper #frontpage {
    position: relative;
    left: 15px;
}
#wrapper #columns {
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}
#wrapper #columns .pin { 
    -moz-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
    display: inline-block; 
    width: 360px;
    font: 100 12.5px 'Helvetica';
    line-height: 18px;
    color: #3a3a3a;
    margin-bottom: 20px;
}
.reader-look h1  {
    text-shadow: white 1px 1px 0px;
    margin-bottom: 10px;
    font: 100 24px 'Lato';
    color: #333;
    text-transform: uppercase;
    text-decoration: none;
}
.reader-look h1 a {
    color: #333;
    text-decoration: none !important;
}
.reader-look img {
    width: 360px;
    height: auto !important;
}
tag {
    background: #000;
    color: #FFF;
    padding: 10px;
    display: inline-block;
    font-weight: bold;
    text-transform: lowercase;
    font: 100 16px 'Lato';
    -webkit-font-smoothing: subpixel-antialiased;
    margin-bottom: 20px;
}
#wrapper #columns .pin .more-link {
    margin-top: 10px;
    color: #000;
}
#wrapper #columns .pin img {
    width: 360px;
    height: auto;
}
#wrapper #columns .pin iframe {
    width: 380px !important;
    height: auto !important;
}
#wrapper #columns .pin h1  {
    text-shadow: white 1px 1px 0px;
    margin-bottom: 10px;
    font: 100 24px 'Lato';
    color: #333;
    text-transform: uppercase;
}
#wrapper #columns .pin h1 a {
    color: #333;
    text-decoration: none;
}
#wrapper #columns .pin a {
    color: #333;
    text-decoration: none;
}
#wrapper .pin .heading {
  text-align:center;
  border-bottom:1px solid #dddddd;
  margin-bottom: 20px;
}
#wrapper .pin .heading h1 {
  display:inline-block;
  font: 100 21px 'Lato';
  position:relative;
  top: 12px;
  background:#fff;
  padding:0 12px;
}

推荐答案

允许列中断在读者面前。添加到您的CSS：

You allow the column to break inside the reader-look. Add this to your CSS:

.reader-look{
    -moz-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
}

您在支持它的浏览器上表现很好。

And you are good on the browsers that supports it.

这篇关于WordPress的：不同类型的首页上不同的循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！