كيفية إنشاء عرض شبكي للصور المصغرة في ووردبريس Themes

عند إنشاء تصميمات موقع  ووردبريس ، هل سبق لك أن رغبت في إنشاء عرض شبكي للمشاركات؟ يعمل تخطيط الشبكة بشكل رائع مع المواقع التي تركز على الوسائط مثل معرض  ووردبريس الخاص بنا أو موقع نوع عرض آخر. تحتوي أطر النسق مثل Genesis بالفعل على نظام Grid Loop مبني مسبقًا. ومع ذلك ، إذا كنت تحاول عمل عرض شبكي في قالب  ووردبريس المخصص الخاص بك ، فنحن هنا للمساعدة. في هذه المقالة ، سوف نوضح لك كيفية إنشاء عرض حلقة الشبكة للصور المصغرة للنشر في قالب  ووردبريس الخاص بك.

ملاحظة: يجب أن يكون لديك فهم جيد لـ CSS وكيفية عمل حلقة  ووردبريس.

قبل أن نبدأ ، دعنا نلقي نظرة على ما نحاول تحقيقه:

عرض مشاركة الشبكة

إذا لاحظت ، يتم عرض المشاركات على هذه الصفحة في شبكة. يوجد حد على الدعامات على الجانب الأيسر ، ولكن ليس على الجانب الأيمن. باستخدام حلقة النشر العادية ، تتبع جميع المنشورات نفس التصميم ، لذلك سيكون لديك حد صحيح على كلا المنشورين والذي سيبدو غريبًا. لاحظ أيضًا أن التباعد متماثل جدًا. وهو مرة أخرى غير ممكن مع الحلقة العادية للقيام بشيء كهذا. الآن يمكنك أن ترى ما نحاول تحقيقه ، دعنا نلقي نظرة على كيفية تحقيقه.

أول شيء عليك القيام به هو التأكد من أن القالب الخاص بك يحتوي على صور مصغرة لنشر  ووردبريس قيد التشغيل. يجب أن تفكر أيضًا في الطريقة التي تريد بها تغيير حجم صور  ووردبريس الخاصة بك لأنك ستحتاج إليها.

بمجرد الانتهاء من إعداد الصور المصغرة والأحجام ، دعنا نبدأ هذا الشيء. لنقم بإعداد استعلاماتنا الحلقية:

<?php
$counter = 1; //start counter
 
$grids = 2; //Grids per row
 
global $query_string; //Need this to make pagination work
 
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
 
if(have_posts()) :  while(have_posts()) :  the_post();
?>

يبدو الرمز أعلاه واضحًا جدًا للأمام لأننا قدمنا ​​تعليقات مضمنة. الشيء الوحيد الذي ربما تحتاج إلى تعديله هو متغير posts_per_page ليناسب احتياجاتك. يمكنك أيضًا إضافة معامِلات استعلام أخرى إذا كنت ترغب في ذلك. الآن بعد أن بدأنا الحلقة ، دعنا نلقي نظرة على كيفية عرض المنشورات بداخلها.

<?php
//Show the left hand side column
if($counter == 1) :
?>
            <div class="griditemleft">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

نبدأ الكود بالتحقق لمعرفة ما إذا كان العداد هو 1 مما يعني إظهار شبكتنا اليسرى. ندخل ببساطة ونبدأ في div بفئة css مخصصة “griditemleft”. بداخلها أضفنا الصورة المصغرة للنشر وعنوان المنشور. يمكنك إضافة أو طرح أي عناصر حلقة (مثل المقتطفات والتواريخ ومعلومات المؤلف وعدد التعليقات وما إلى ذلك). ملاحظة: في الصور المصغرة الخاصة بنا ، ندعو إلى حجم صورة إضافي . من المحتمل أن تضطر إلى استبدال اسم الحجم بالمقاس الخاص بك الذي قمت بإنشائه.

بعد الشبكة الأولى ، أضفنا عامل آخر يبحث لمعرفة ما إذا كان عداد $ يطابق الرقم المحدد في شبكاتنا $ (وهو ما يجب أن يكون لأننا سنكون في المنشور الثاني). إذا كان العداد متطابقًا ، فيمكننا إظهار الشبكة الصحيحة التي تبدأ بفئة css مخصصة “griditemright”. لاحظ بعد أن نغلق علامة div حق الشبكة ، فإننا نضيف فئة واضحة. هذا سوف نشرح عندما نصل إلى جزء CSS.

بعد الانتهاء من الحلقة بهذا ، نقوم بإعادة ضبط العداد إلى 0 ، بحيث يمكن البدء مرة أخرى في الصف التالي.

يمكننا ببساطة إنهاء الحلقة التي بدأناها بإضافة هذا الرمز:

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

الكود أعلاه يستمر بشكل أساسي في العداد حتى يصل إلى الحد المحدد في متغير query_post. السبب في عدم إضافة رمز التنقل البريدي أعلاه هو أن العديد من الأشخاص يستخدمون مكونًا إضافيًا أو طريقة عرض مختلفة لهذا الغرض. لذلك نتركه مفتوحًا لك لتقرر بنفسك.

لذا سيبدو كود الحلقة النهائية كما يلي:

<div id="gridcontainer">
<?php
$counter = 1; //start counter
 
$grids = 2; //Grids per row
 
global $query_string; //Need this to make pagination work
 
 
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
 
 
if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
            <div class="griditemleft">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>

الآن بعد أن أصبح لدينا كود PHP جاهزًا ، دعنا نلقي نظرة على كيفية تصميمه.

سيبدو ناتجنا الافتراضي كما يلي:

<div id="gridcontainer"> 
<div class="griditemleft"> 
<div class="postimage">   Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="griditemright"> 
<div class="postimage">   Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="clear"></div> 
</div>

فيما يلي الفئات التي تحتاج إلى تعديلها:

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

نأمل أن يوجهك هذا البرنامج التعليمي في الاتجاه الصحيح نحو عرض حلقة الشبكة لمشاركات  ووردبريس الخاصة بك.

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..