0

構築しようとしているサイトでカスタム投稿タイプを使用するように Masonry をセットアップしましたが、Masonry が私の投稿を表示する方法に問題があります。常に同じマージンを持ち、ページ上で美しく流れる代わりに、投稿は 3 つに (いくつかを除いて) スタックされ、さ​​らに別の 3 つにスタックされる前に大量のページをスキップします。

何が問題なのかの例を次に示します。

私の頭：

<?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

後から考えると、レイアウトの問題はオープンポストループが原因であると確信しています。特に石積みの宣言が正しいように見えるためです。投稿ループを閉じないと、ブラウザの[ソースの表示]で表示されたコードは、おそらく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>、ループに含まれている他の多くのものの1つにすぎない可能性がありますが、レイアウトを台無しにするのに十分すぎるほどです。

そのため、投稿ループ全体は代わりに次のようになります。

<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 に答える