wordpress中的砌体只显示一列

Question

所以我知道单列中的砌体已经在堆栈中被覆盖了几次，但我对 jquery 不是很熟悉并且我不确定我需要进行的调整。我也不是非常精通 wordpress，不知道我是否在这里犯了一个明显的错误。我正在编辑一个主题，并试图让博客使用砌体布局。主题从它自己的 php 文件中调用 post 循环，因此博客被分解成几个 php 文件。我希望我提供了正确的信息。

post 以块的形式出现，但它只是向下一列。似乎容器在每个 post 上一直穿过页面。我不确定它是否没有停止循环或我需要添加什么以便每个 post 分布在容器宽度上。任何关于我做错了什么的帮助或提示将不胜感激。提前致谢。

我将其添加到我的函数中。

function wdv_enqueue_scripts() {
   wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );

这是我的 footer.php

<script>
    jQuery( document ).ready( function( $ ) {
        $( '#container2' ).masonry( { columnWidth: 220 } );
    } );
</script>

这是我的循环代码。

<div id="container2">
    <?php
    global $ae_post_factory;
    $ae_post    =   $ae_post_factory->get('post');
    $post = $ae_post->current_post;
?>
<div class="brick">
<div class="brick_header">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >
        <h4 class="media-heading title-blog"><?php the_title(); ?></h4>
    </a>
</div>
<div class="brick_featured_image">
   <?php if ( has_post_thumbnail() ) : ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    <?php the_post_thumbnail (); ?>
    </a>
   <?php endif; ?>
</div>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a>
</div>
</div><!-- container -->

这是 CSS

* masonry brick layout */
#container2 {
    width: 100%; /* width of the entire container for the wall */
    margin-bottom: 10px;
}

.brick {
    width: 30%; /* width of each brick less the padding inbetween */
    padding: 0px 10px 15px 10px;
    background-color: #fff;
    margin-top: 5px;
}

.brick_header{
    border-bottom: solid 1px #1d1d1d;
    padding-bottom: 10px;
    padding-top: 10px;
}

.brick_header a{
    color: #ffff00;
}

.brick_header a:hover{
    color: white;
}

.brick_featured_image{
    width: 100%;
    margin-top: 10px;
}

.brick_featured_image img{
    width: 100%;
    height: auto;
}

Answer 1

我个人使用"js-masonry" class主要是因为如果你使用Bootstrap或Modest Grid等框架，它会保留gutter设置等

这是一个例子：

<div class="js-masonry">
<?php if ( have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="dt-6 tl-6 tp-6">
    <article>
        <h2>
            <a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
                <i class="fa <?php echo strtolower(str_replace(" ", "-", get_field('project_type'))); ?>"></i>
                <?php the_title(); ?>
            </a>
        </h2>
        <?php the_excerpt(); ?>
        <div class="download">
            <a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark">
                View <?php the_title(); ?>
            </a>
        </div>
    </article>
</div>
<?php endwhile; ?>
<?php else: ?>
    <h2>No posts to display</h2>    
<?php endif; ?>

注意 <div class="js-masonry"> 在 while 之外。

Answer 2

此处您在 JS 220px 中提供 Column-Width。在 CSS 中：30%。这可能会造成问题。

确保您的 HTML 结构看起来像这样。

<div id="container2">
   <div class="brick">...</div>
   <div class="brick">...</div>
   <div class="brick">...</div>
</div>

和CSS：

.container2{
   width:100%;
}
.brick{
   width:25%;  
   /* 
   This should be respective of the columns you want
   Like for 4 columns, 100%/4 = 25%
   */
}

和JS。

var $container2 = $('#container2');
$container.masonry({
   itemSelector: '.brick'
});

更详细的解释：http://masonry.desandro.com/#getting-started

要了解有关您遇到的问题的更多详细信息，请提供 URL 以便我查看并提供准确的解决方案。

wordpress中的砌体只显示一列

Masonry in wordpress only showing one column

php

jquery

css

wordpress

jquery-masonry