اضافة مصغرات الصور لووردبريس تلقائيا بدون حقل الخصائص – YourColor
السلام عليكم ورحمة الله وبركاته
اضافة الصور المصغرة الى التدوينات في الرئيسية قد تكون مرهقة باستعمال حقل الخصائص لجميع التدوينات فمثلا اذا كانت لديك العديد من التدوينات فستضطر الى اضافة حقل خاص لكل تدوينة وهذا سيحتاج من مجهود جبار ولكن دائما ما تكون هناك حلول بالنسبة لهذه المشاكل. مع القليل من البحث وجدت حل لهذه المشكلة
في هذا الشرح سنستعمل السكريبت timthumb وقد تحدثنا سابقا عنه في هذه التدوينة كيف تضع مصغرات الصور و سكريبت TimThumb في مدونة الووردبريس وايضا سنستعمل هاك ليساعدنا في هذا الشرح والهاك من موقع WpRecipe get the first post image
الحل وجدته في موقع Problogdesign الان ننتقل الى شرح طريقة ادراج الصور
تحميل سكريبت TimThumb
قم بتحميل سكريبت timthumb من هنا وضعه في مجلد القالب الذي تود ادراج الصور المصغرة به (TimThumb) او قم بانشاء ملف فارغ باسم timthumb.php وانسخ وانسخ الكود داخله وقم بحفظ الملف
اضافة الهاك لملف خصائص القالب functions.php
الان قم بفتح ملف خصائص القالب functions.php لكي نضيف الهاك بداخله واذا لم يكن لديك ملف خصائص قم بانشاء واحد جديد بعدها قم بلصق الكود الموجود بالاسفل. هذا الهاك يقوم باخد رابط اول صورة في تدوينتك واستعمالها كصورة مصغرة
<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, ´<img´);
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, ´<img´, $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, ´>´);
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;
$cleanF = strpos($image[$num],´src="´)+5;
$cleanB = strpos($image[$num],´"´,$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
}
if(stristr($image[$num],´<img´)) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>
اضافة كود مصغرات الصور
هنا سنقوم بادراج الكود الذي سيعرض الصور المصغرة في الصفحة الرئيسية. افتح ملف Index.php او home.php على حسب ملفات القالب يجب ادراج الكود داخل the_loop لكي يتم عرضه بشكل جيد بدون مشاكل ويستحسن ان تضعه فوق the_conten وهذا الكود
<div class="thumbnail"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <img src="<?php bloginfo(´template_directory´); ?>/timthumb.php?src=<?php getImage(´1´); ?>&w=150&h=150&zc=1"> </a> </div>
هذا الكود سيقوم بانشاء صورة بمقاس 150×150 بيكسل اذا اردت تغير المقاس فما عليك سوى تغيير ‘w’ و ‘h’ من الكود يرجى مراجعة التدوينة كيف تضع مصغرات الصور و سكريبت TimThumb لانه يجب انشاء مجلد cache داخل مجلد القالب واعطائه الصريح 777 او 755 احسن في حالة لم تظهر الصور
اضافة تنسيق لملف الاستايل
هنا يجب عليك اضافة تنسيق لملف الاستايل لعرض الصورة في المكان الذي تريد والتنسيق الذي تحب وهذا كود بسيط لطريقة العرض
.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}
التغذية
تويتر
فيسبوك
يوتيوب
الاكاديمية العربية لفنون التصميم و تعليم الجرافيك 
يجب عليك تسجيل الدخول لكتابة تعليق.