Question

我已经设置了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;
}

如果有人能帮我解决这个问题，那就太好了！：）

迈克尔

Answer 1

事后看来，我很确定布局问题是由开放的后循环引起的 - 特别是因为砌体声明似乎是正确的。如果不关闭post循环，那么在浏览器下查看源代码时查看的代码可能就像这个带有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>标记将在每个帖子中一致地应用。

希望这有助于解决问题！

使用Wordpress的jQuery砌体显示不正确

1 个答案: