我想在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>