• 0

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

تماشيا مع التصاميم الحديثة والتي تروقني حقيقة تلك التي تتوفر على شكل أعمدة على طول الصفحة، والتي لا يوجد فراغات بين مُختلقة أجزاء الأعمدة، إليكم شكل توضيحي:

8gOuh.thumb.png.0a9271f18970f305af49c1ba

والمشكل المُصادف هنا هو وجود فراغات بين مختلف أجزاء الأعمدة، كما يبين الشكل بالأحمر، والصحيح هو ما باللون الأخضر، وفي ما يلي كودي المسؤول عن إنتاج كود html:

   <div id="uno">


                               <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?> </a>
                                <?php the_excerpt();?>
                               <a href="<?php echo get_permalink(); ?>"> Read more...</a>

                     </div>

بالاضافة إلى كود Css:

#uno{width: 25%; height:100%; float:left; text-align:center; padding-top: 20px;}

ماهي الكيفية أو الطريقة المُتبعة للحصول على تناسق الشكل باللون الأخضر؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

هذه التقنية تدعى بـ 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>

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن