我想在wordpress中使用砌体，但它似乎不工作

Question

我正在一个wordpress网站上工作，我想在我的一个页面中使用jQuery Masonry，但它不起作用。我搜索并尝试了许多变化，但没有结果。

我在这里：

在header.php中添加此：

<?php wp_enqueue_script("jquery"); ?> 

    <?php wp_head(); ?> 

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.masonry.min.js"></script> 

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.imagesloaded.js"></script> 

<script language="javascript" type="text/javascript"> 

var $container = $('#masonry-list'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector: '.masonry-item', isAnimated: true 
    }); 
}); 

</script> 

</head> 

和模板文件（列表objects.php）我有这个标记：

<div id="masonry-list"> 
    <h3> this-is-list-object-page </h3> 


     <?php $loop = new WP_Query(array('post_type' => 'objects', 'posts_per_page' => -1 , 'orderby' => 'rand')); ?> 

    <?php while ($loop->have_posts()) : $loop->the_post(); ?> 


    <div class="masonry-item"> 
     <?php the_title('<a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '" rel="bookmark">', '</a>'); ?> 

     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > 
    <?php the_post_thumbnail(); ?> 
    </a> 
     <?php echo get_the_term_list($post->ID, 'place', 'مکان قرار گیری: ', ', ', ''); ?> 
     <?php echo get_the_term_list($post->ID, 'category', 'رده: ', ', ', ''); ?> 
    </div> 



<?php endwhile; ?> 
</div> 

我检查了所有的.js文件已加载，并且地址没有问题等。 页面地址是：http://5.144.130.63/?page_id=69

有人可以帮我解决这个问题吗？

Answer 1

您至少有两个问题，可能是三个：

1. 你的脚本运行前的页面完全加载。你需要用它在jQuery的文件准备就绪功能（如下所示）

2. 当在WordPress使用jQuery，你需要通过jQuery函数引用它 - 使用$功能将结束与“冲突”与其他图书馆。

3. 看起来您正在使用imagesLoaded和masonry插件 - 您确定两者之间没有碰撞，导致问题吗？他们的目标都是在图片加载后定位图片 - 我鼓励你删除图片加载并看看你是否得到你想要的图片。

改变你的脚本像下面，你应该看到它的工作：

<script language="javascript" type="text/javascript"> 
    // This line tells the script to run after the page is loaded, 
    // As well as allows you to use the `$` function within the script 
    jQuery(function($) { 
     $('#masonry-list').masonry({ 
      itemSelector: '.masonry-item', 
      isAnimated: true 
     }); 
    }); 
</script>