0

我已将 Masonry 设置为在我正在尝试构建的网站上使用自定义帖子类型，但我对 Masonry 显示我的帖子的方式有疑问。帖子不是总是具有相同的页边距并在页面上流畅地流动，而是堆叠成三个（少数除外），然后跳过大量页面，然后再堆叠成三个。

这是一个出错的例子。

我的头：

<?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    <script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('#kampanjer-container').masonry({
            itemSelector: '.kampanjepin',
            columnWidth: 226,
            singleMode: true });
    });</script>

这是页面模板循环：

<!-- Start the Loop. -->
            <div id="kampanjer-container">
                <?php
                    $args = array(
                        'post_type' => 'kampanje',
                        'posts_per_page' => '15',
                    );
                    $kampanje = new WP_Query( $args );
                    if( $kampanje->have_posts() ) { while( $kampanje->have_posts() ) {
                            $kampanje->the_post(); ?>
                            <article class="kampanjepin">
                                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
                                    <h3><?php the_title() ?></h3>
                                    <div class='kampanje-content'>
                                        <?php the_content() ?>
                                    </div>
                            </article><!-- END .kampanjepin -->
                            <?php
                        }
                    }
                    else {
                        echo 'Ingen kampanjer for øyeblikket!';
                    }
                ?>
            </div><!-- END #kampanjer-container -->

还有我的风格：

#kampanjer-container {
    margin: 25px 0 0 -10px;
    width: 670px;
}

.kampanje-content {
    width: 182px;
}

.kampanjepin {
    float: left;
    margin: 10px;
    padding: 10px;
    -moz-box-shadow: 0 0 7px 0px rgba(0,0,0,0.07);
    -webkit-box-shadow: 0 0 7px 0px rgba(0,0,0,0.07);
    box-shadow: 0 0 7px 0px rgba(0,0,0,0.07);
    background-color: #ffffff;
    width: 182px;
}

.kampanjepin img {
    background-color: #ececec;
    max-width: 182px;
    max-height: 125px;
    display: block;
    text-align: center;
}

.kampanjepin h3 {
    font-size: 0.850em;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #000000;
}

.kampanjepin p {
    font-size: 0.750em;
}

如果有人可以帮助我解决这个问题，那就太好了！:)

迈克尔

4

1 回答 1

1

事后看来，我很确定布局问题是由开放的后循环引起的——尤其是因为 Masonry 声明似乎是正确的。在不关闭帖子循环的情况下，在浏览器中查看源代码时，您的代码可能类似于以下示例，其中包含 2 个帖子：

<div id="kampanjer-container">

    <!--this is the first post-->
    <article class="kampanjepin">
        <img><!--this is the thumbnail-->
        <h3><!--this is the post title--></h3>
        <div class='kampanje-content'>
            <?php the_content() ?>
        </div>
    </article>
    <!--this is the first post-->

    </div><!--this is a stray closing tag from the parent container #kampanjer-container-->

    <!--this is the second post-->
    <article class="kampanjepin">
        <img><!--this is the thumbnail-->
        <h3><!--this is the post title--></h3>
        <div class='kampanje-content'>
            <?php the_content() ?>
        </div>
    </article>
    <!--this is the second post-->

    </div><!--this is a stray closing tag from the parent container #kampanjer-container-->

</div>

发生这种情况的原因很简单：只要帖子循环没有用 关闭<?php endwhile;?>，循环将继续接受所有内容，</article>作为代码或内容，重复用于每个拉出显示的帖子。上面带有流浪的示例</div>可能只是循环中包含的许多其他内容之一，但它足以弄乱您的布局。

因此，您的整个 post 循环应该看起来像这样：

<div id="kampanjer-container"> <!--start of parent container-->

    <?php // define custom arguments
        $args = array(
            'post_type' => 'kampanje',
            'posts_per_page' => '15',
        );
        $kampanje = new WP_Query( $args );
    ?>

    <?php // start loop
        if($kampanje->have_posts() ) : while ( $kampanje->have_posts() ) : 
        $kampanje->the_post();
    ?>

        <!--post container-->
        <article class="kampanjepin">
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            <h3><?php the_title() ?></h3>
            <div class='kampanje-content'>
                <?php the_content() ?>
            </div>
        </article>
        <!--post container-->

    <?php // end loop
        endwhile;
    ?>

    <?php else:?> 

       <!--No post message-->
       <?php echo 'Ingen kampanjer for øyeblikket!'; ?>

    <?php // end conditional if statement
        endif;
    ?>

</div> <!--end of parent container-->

从修改后的代码中可以看出，<?php endwhile; ?>直接放在结束</article>标记之后。这确保了 post 循环仅使用<article>标签和其中的所有内容。因此，该<article>标签将在每个帖子中一致应用。

希望这有助于解决问题！

于 2013-03-20T14:39:11.353 回答