web-dev-qa-db-ja.com

同位体とWordpressを連携させる方法は？

私は同位体プラグインを使って私のWordpressのテーマを作ろうとしています。 http://isotope.metafizzy.co/ /

これまでのところ、それが示唆された後に私はそのような結果があります： enter image description here

同位体組積はこのようになってはいけません。私は私が間違っていることについて本当に困惑しています。以下が私のコードです：

functions.php

 function profolio_scripts () {
    wp_enqueue_style( 'profolio-style', get_stylesheet_uri() );
    wp_enqueue_script("isotope", get_template_directory_uri () . "/js/isotope.pkgd.min.js",array("jquery"));
    wp_enqueue_script("imagesLoaded",get_template_directory_uri () . "/js/imagesloaded.pkgd.min.js",array("jquery","isotope"));
    wp_enqueue_script("custom", get_template_directory_uri () . "/js/custom.js", array("jquery","imagesLoaded","isotope"));   
};
add_action("wp_enqueue_scripts", "profolio_scripts");

Javascript：

 jQuery(function($){
  var container=$("#isotope-container").imagesLoaded(function(){
      container.isotope({
        itemSelector: '.item',
        masonry:{
            columnWidth:160
        }
      })
   });
 });

CSS：

 .item {
    width:160px;
    margin: 1px;
 }
 #isotope-container {
    margin:0 auto;
    max-width:100%;
 }

そしてループ内で動作するPhPコード。

<?php
  get_header();
?>
<div id="isotope-container" >
    <?php
     if(have_posts()) :
      while (have_posts()) : the_post();
        get_template_part("content");
      endwhile;
     endif;
    ?>
</div> <!--isotope-container-->

「コンテンツ」テンプレート：

<div class="item">
  <?php
   if ( has_post_thumbnail() ) {
     $perm = get_permalink();
     $width = randomImageSize (200, 400);
     $height = randomImageSize (200, 400);
     $image = get_the_post_thumbnail($post_id, array($width,$height));
   }
  ?>
    <a href="<?php echo ($perm);?>"><?php echo ($image);?></a>
    <div class="imageDesc">This beautiful image </div>
</div>

私の推測では、問題はimagesLoadedメソッドと関係があるということです。スクリーンショットが示すように、同位体の働きはしますが、正しく動作しません - 画像間には多くの空きスペースがあります。

問題解決にご協力ください

theme-developmentjavascriptmasonry
1
user3695711

IsotopeImagesLoaded に関するドキュメントでは、この方法を2つ提案しています。私は一般的に2番目のものを使用します。つまり、 Isotopeを初期化し、イメージがロードされた後でlayoutname__をトリガーする です。私の経験上、これはよりうまくいきます。私がそれを証明する事実があるわけではありません。それとは別に、私はそれをたくさんのサイトでうまく動かしている。

JavaScriptファイルは次のようになります。

jQuery(document).ready(function($) {

    var $container = $('#your-id');

    $container.isotope({
        layoutMode: 'masonry',
        itemSelector : '.your-class',
        masonry: {
            columnWidth: 200,
        }
    });

    $container.imagesLoaded( function() {
        $container.isotope('layout');
    });
});
1
Nicolai