كيف أنشئ نطام أعمدة على صفحة ووردبريس بدون فراغات؟

هذه التقنية تدعى بـ isotope والتي يلجأ إليها المصمم والمبرمج لإعطاء الموقع جمالية اكثر في عرض المحتوى، وهي بالأساس تعتمد على طريقة العرض، والتي يعتبر ملف التنسيق css  ومكتبة isotope العاملان الأساسيان في ذلك، إليك مثال:

ملف Css:

 .grid-image-item,
.grid--images .grid-sizer { width: 25%;}

.grid-image-item {
  float: left;
}

.grid-image-item img {
  display: block;
  max-width: 100%;
}

إضافة مكتبة بـ isotope إلى home.php:

<script src="where-you-placed-it/isotope-docs.min.js">
    </script>

مختلف العناصر الظاهرة على الصفحة - html-:

 <div class="duo__cell example__demo">
    <div class="grid grid--images" data-js-module="imagesloaded-progress">
      <div class="grid-sizer"></div>

            <?php if(have_posts()) : ?>
              <?php while(have_posts()) : the_post(); ?>

                            <div class="grid-image-item">


                             <?php the_title(); ?>
                              <?php the_author() ?>

                              <?php the_time('j M Y') ?>
                              <?php the_category(', ') ?>
                              <?php the_excerpt();?>
                              <?php echo get_permalink(); ?>


                              </div>
                <?php endwhile; ?>
    </div>    
  </div>
</div>