我想在Wordpress中使用Masonry，但似乎无法正常工作 [英] I want to use Masonry in wordpress but it seems not working

问题描述

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

I'm working on a wordpress site and I want to use jQuery Masonry in one of my pages but it doesn't work. I searched and tried many changes but no results.

我在这里:

在header.php中，我添加了以下内容:

In header.php I added this:

    <?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)中，我有这个标记:

and in template file (list-objects.php) I have this markup:

<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

I checked that all .js files are loaded and there is non problem with addresses etc. The page address is : http://5.144.130.63/?page_id=69

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

Can anybody help me with this issue?

推荐答案

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

You have at least two problems, possibly three:

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

1. Your script is running before the page is fully loaded. You need to wrap it in the jQuery document ready function (example below)

在WordPress中使用jQuery时，您需要通过jQuery函数进行引用-使用$函数将导致与其他库的冲突.

When using jQuery in WordPress, you need to reference it via the jQuery function - using the $ function will end up with "collisions" with other libraries.

似乎您同时使用了 imagesLoaded 和

It appears that you are using both the imagesLoaded and masonry plugins - are you sure there is no collission between the two, causing issues? They both aim to position images after they are loaded - I'd encourage you to remove the imagesLoaded and see if you get what you want.

按如下所示更改脚本，您应该会看到它起作用:

Alter your script like below, and you should see it work:

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

这篇关于我想在Wordpress中使用Masonry，但似乎无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！