في هذا الدرس أود أن أشرح تطبيق إضافة آخر التدوينات ( Recent post) إلى مدونتك مع الصور المصغرة باستخدام التعديل على القوالب دون إستخدام أي إضافة التي كثرتها قد يسبب لك المشاكل والصداع في موقعك لذا دعنا نهتم بجمال الشكل مع المحتوى دون أي مشاكل

ولتطبيق هذا الدرس دعنا نتبع ونطبق الخطوات التالية:

1 – الخطوة الأولى : تحمل سكريبت timthumb

سكريبت timthumb.php هو سكريبت يستخدم في تحجيم الصور ,يستخدمه كثيراً مصممو الوورد برس , لتحميل هذا السكريبت من هنـــــا قم بتحميله ورفعه داخل القالب المراد إضافة التعديل عليه باسم timthumb.php

2 – الخطوة الثانية : إضافة كود آخر المواضيع في ملف sidebar.php

أضف الكود التالي داخل ملف sidebar.php

<div id="recent-posts">
<?php $postslist = get_posts('numberposts=10&order=DESC'); foreach ($postslist as $post) : setup_postdata($post); ?>

<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=275&zc=1&q=100"
alt="<?php the_title(); ?>" class="footer-thumb"  width="40px" height="40px"  /></a>

<p><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?> &raquo;</a></p>

<p><?php the_time('F j, Y') ?> : <?php comments_number('0 comments','1 comment','% comments'); ?></p>

<?php endforeach; ?>
</div><!-- End Recent Posts -->

3 – الخطوة الثالثة : تأطير التطبيق من ملف style.css

أضف هذا الكود في ملف style.css

#recent-posts {
   width: 269px;
   margin: 0 0 20px 0;
   padding: 10px 0px 10px 20px;
}
#recent-posts p {
   margin: 0 0 20px 0;
   font-size: 12px;
}
.footer-thumb {
   width: 40px;
   height: 40px;
   border: 3px solid #555;
   margin: 3px 3px 15px 6px;
   padding: 0;
   float: right;
}

وانتهى الدرس , أتمنى لكم النجاح……