it-roy-ru.com

Как заставить изотоп и Wordpress работать вместе?

Я пытаюсь создать свою тему Wordpress с помощью плагина Isotope. 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. Изотопный вид работает, как показано на скриншоте, однако, он не работает должным образом - между изображениями много свободного пространства.

Пожалуйста, помогите решить проблему

1
user3695711

Изотоп документация о ImagesLoaded предлагают два метода для этого. Я обычно использую второй, что означает: инициализация изотопа и запуск layout после загрузки изображений . По моему опыту, это работает лучше, а не то, что у меня есть факты, чтобы доказать это. Кроме того, он успешно работает на нескольких сайтах.

Файл 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