我想在wordpress中使用Masonry但它似乎不起作用

时间:2012-10-28 19:56:37

标签: wordpress jquery-masonry

我正在使用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>

和模板文件(list-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

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

1 个答案:

答案 0 :(得分:2)

你至少有两个问题,可能有三个问题:

  1. 您的脚本在页面完全加载之前正在运行。您需要将它包装在jQuery文档就绪函数中(以下示例)

  2. 在WordPress中使用jQuery时,需要通过jQuery函数引用它 - 使用$函数最终会与其他库“冲突”。

    < / LI>
  3. 您似乎正在使用imagesLoadedmasonry插件 - 您确定两者之间没有发生冲突,导致问题吗?它们都旨在在图像加载后定位图像 - 我鼓励你删除图像,看看你是否得到你想要的图像。

  4. 如下所示更改您的脚本,您应该看到它有效:

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