2

ワードプレスサイトで作業していて、ページの1つで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

誰かがこの問題で私を助けることができますか？

4

1 に答える 1

2

少なくとも2つの問題があり、場合によっては3つの問題があります。

  1. ページが完全に読み込まれる前に、スクリプトが実行されています。jQueryドキュメントレディ関数でラップする必要があります（以下の例）

  2. WordPressでjQueryを使用する場合は、関数を介してjQueryを参照する必要があります。関数jQueryを使用する$と、他のライブラリとの「衝突」が発生します。

  3. imagesLoadedプラグインとmasonryプラグインの両方を使用しているようですが、2つのプラグインの間に衝突がなく、問題が発生していませんか？これらは両方とも、ロードされた後に画像を配置することを目的としています-imagesLoadedを削除して、必要なものが得られるかどうかを確認することをお勧めします。

以下のようにスクリプトを変更すると、スクリプトが機能することがわかります。

<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>
于 2012-10-28T20:03:44.613 に答える