Wordpress Masonry博客一列

Question

我已经试了好几个小时想让它起作用。Masonry js似乎加载了，但我最终在右侧得到了我的帖子的单列。我在我的帖子中使用了Ebedly，它们显示得很好。

这是我的入队代码

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

我的css：

.item { width: 25%; }

和我博客的html：

<?php get_header(); ?>

        <div id="content" class="row">


<div class="responsive-title"><h1 class="hobo page-title a">NEWS</h1>   </div>
<div id="masonry-wrapper" class="masonry">
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              <div class="item">
                <article <?php post_class(); ?> role="article">
    <header>

                        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'wpbs-featured' ); ?></a>

                        <div class="page-header"><h1 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>



                    </header> <!-- end article header -->

                    <section class="post_content">
                        <?php the_content( __("Read more &raquo;","wpbootstrap") ); ?>
                    </section> <!-- end article section -->

                    <footer>

                        <p class="tags"><?php the_tags('<span class="tags-title">' . __("Tags","wpbootstrap") . ':</span> ', ' ', ''); ?></p>

                    </footer> <!-- end article footer -->

                </article> <!-- end article -->
               </div>

                <?php if (function_exists('page_navi')) { // if expirimental feature is active ?>

                    <?php page_navi(); // use the page navi function ?>

                <?php } else { // if it is disabled, display regular wp prev & next links ?>


                    <nav class="wp-prev-next">
                        <ul class="pager">
                            <li class="previous"><?php next_posts_link(_e('&laquo; Older Entries', "wpbootstrap")) ?></li>
                            <li class="next"><?php previous_posts_link(_e('Newer Entries &raquo;', "wpbootstrap")) ?></li>
                        </ul>
                    </nav>
                <?php } ?>      

                <?php else : ?>

                <article id="post-not-found">
                    <header>
                        <h1><?php _e("Not Found", "wpbootstrap"); ?></h1>
                    </header>
                    <section class="post_content">
                        <p><?php _e("Sorry, but the requested resource was not found on this site.", "wpbootstrap"); ?></p>
                    </section>
                    <footer>
                    </footer>
                </article>
                </div> 
                <?php endif; ?>

             <!-- end #main -->

Answer 1

您遗漏了masonry文档中建议的itemSelector。masonry.desandro.com/options.html

要解决此问题，您可以使用以下代码替换您的masonry-wrapper div：

<div id="masonry-wrapper" class="masonry js-masonry"
data-masonry-options='{ "itemSelector": ".item" }'>

也有其他可用的选项，比如columnWidth，您可能想要尝试一下。花点时间阅读文档。