كيفية استخدام الصور المصغرة مع ارتباطات المنشورات السابقة والتالية في ووردبريس

سألنا أحد مستخدمينا على صفحتنا على Facebook : كيفية استخدام الصور المصغرة للتنقل المنشور السابق / التالي في  ووردبريس. لا تحتوي وظائف next_post_link و previous_post_link على معلمة صورة مصغرة بسيطة بما يكفي والتي يمكن للمطور الجديد تشغيلها وإيقاف تشغيلها. في هذه المقالة ، سنوضح لك كيفية استخدام الصور المصغرة للنشر مع روابط النشر السابقة والتالية في  ووردبريس.

ستبدو النتيجة النهائية كما يلي:

استخدم الصور المصغرة مع روابط المنشور السابق والتالي في  ووردبريس

أول شيء عليك القيام به هو فتح ملف single.php الخاص بالقالب الخاص بك وإضافة الكود التالي داخل الحلقة على الأرجح بعد the_content () area:

<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
</div>
 
<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next" style="float:right;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>
<?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div><!--#cooler-nav div -->

الشيء التالي الذي عليك القيام به هو فتح ملف style.css وإضافة الأنماط التالية:

#cooler-nav{clear: both; height: 100px; margin: 0 0 70px;}
#cooler-nav .nav-box{background: #e9e9e9; padding: 10px;}
#cooler-nav img{float: left; margin: 0 10px 0 0;}
#cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;}
#cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;}
#cooler-nav .next{float: right; width: 250px;}

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

إذا كنت تريد تغيير حجم الصورة المصغرة ، فما عليك سوى تغيير المصفوفة (100100) إلى ما تريد.

المصدر: itsbarry

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

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

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

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