كيف تعرض مصغرات الصور باستعمال TimThumb لمدونة الووردبريس


مصنفة في قسم  : شروحات
كتبت بتاريخ  : 10 ديسمبر 2010
عدد المشاهدات  : 
عدد التعليقات  : 13 تعليق 

كيف تعرض مصغرات الصور باستعمال TimThumb لمدونة الووردبريس

السلام عليكم ورحمة الله وبركاته

في هذه التدوينة سنتطرق لطريقة ادراج مصغرات الصور بجانب التدوينات في الصفحة الرئيسية بمساعدة هذا السكريبت الرائع TimThumb الذي تستعمله اغلب مواقع القوالب المدفوعة نظرا لسهولة التعامل معه فطريقة تركيبه سهلة جدا

تحميل سكريبت TimThumb

المرجوا اعادة تحميل السكريبت لمن استعمله سابقا لانه قد تم انزال ترقيع ضروري منذ فترة ونسيت التنبيه لهذا الامر في التدوينة واسف على هذا التاخير

اولا نقوم بتحميل اخر اصدار من السكريبت من هنا  او من هنا ورفعه الى مجلد القالب الذي تستعمل

http://sitename.com/wp-content/themes/your-theme-name/timthumb.php

لا تقم بتغيير اي شيئ في هذا الملف فقط قم برفعه الى مجلد القالب الذي تستعمل

اضافة تنسيق لسكريبت TimThumb

هنا سوف نضيف تنسيق لسركيبت TimThumb لعرض الصور بشكل متناسق مع التدوينة وفي المكان الذي تريد يمين يسار فقط

وهذا كود التنسيق نضيفه الى ملف التنسيق (style.css) للقالب :

.homethumb {
float: right;
margin:0px 5px 0px 5px;
height:100px;
width:100px;
padding:3px;
	background: #f3f3f3;
	border:1px solid #ddd;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;}

بالنسبة لهذا التنسيق الزوايا ذات استدارة بسيطة اما اذا رغبت في ان تأخد الزوايا شكل طبيعي فقم بإستعمل التنسيق التالي :

.homethumb {
float: right;
margin:0px 5px 0px 5px;
height:100px;
width:100px;
padding:3px;
	background: #f3f3f3;
	border:1px solid #ddd;
}

ادراج سكريبت TimThumb في القالب :

نفتح ملف الصفحة الرئيسية لقالب (index.php) ونبحث عن وسم العنوان غالبا ما يكون الكود على هذا الشكل :

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="الرابط الدائم لـ <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

حتى نبسط الامر عليك ابحث فقط على الكود التالي :

<?php the_permalink() ?>

هنا يجب معرفة شيئ أخر هل القالب يستعمل معلومات أخرى تحت العنوان ام لا مثالا التصنيف الذي كتبت فيه التدوينة التاريخ والكاتب اذا كان القالب يحتوي على هذه المعلومات سنقوم بادراج السكريبت اسفل المعلومات التي ذكرنا التاريخ والتصنيف الى اخره مثال على طريقة ادراج سكريب TimThumb في قالب مدونتي

هذه الصورة توضح بعض اكواد كل من العنوان ومعلومات التدوينة والصورة المصغرة, وهذا الكود الذي سنقوم بادراجه اسفل المعلومات :

<?php if( get_post_meta($post->ID, "thumb", true) ): ?>
<div class="homethumb">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a>
</div>

<?php else: ?>
<?php endif; ?>

او بمعنى أخر نقوم بوضع الكود قبل الكود التالي مباشرة :

<?php the_content(); ?>

ولا تنسى تعديل التنسيق (homethumb) على حسب ما يناسب القالب الطول والعرض والهوامش حتى يتم ادراج الصورة المصغر بشكل انيق وملائم في القالب

ملحوظة : في كود ادراج سكريب TimThumb اذا لاحظت جيدا سترى انه يوجد قيمتين لطول والعرض ولا تنسى تنسيق الطول والعرض كذالك لسكريبت (TimThumb) في ملف التنسيق (style.css)

مثال للقيمتين :

h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="100"

القيمة الاولى : h=150&w=150&zc=1
القيمة الثانية : width=”100″ height=”100″

انشاء مجلد الكاش

في هذه المرحلة ضروري انشاء مجلد في قالب المجلد ليشتغل السكريبت بشكل سليم على هذا الشكل :

http://sitename.com/wp-content/themes/your-theme-name/cache/

بعد انشاء المجلد قم باعطائه التصريح 777 عن طريق ftp او لوحة التحكم الموقع (cpanel) مثلا

طريقة استعمال الصور المصغرة

بعد كتابة التدوينة قم برفع صورة التي تريد ان تظهر بجانب التدوينة

الان يجب اضافة حقل مخصص في الخصائص الاضافية هكذا :

بعد اضافة الحقل المخصص قم بتحديث التدوينة او نشرها

الى هنا نكن قد انتهينا من طريقة ادراج الصور المصغرة بواسطة السكريبت والى اللقاء في تدوينة جديدة انشاء الله

اذا كان هناك اي استفسار يرجى وضع تعليق

والسلام عليكم ورحمة الله وبركاته

كيف تعرض مصغرات الصور باستعمال TimThumb لمدونة الووردبريس بواسطة مجلة ووردبريس, يمكنك نقل ومشاركة التدوينة مع ذكر المصدر الأصلي للموضوع ، مع رابطه, والتدوينة مرخصة بموجب المشاع الابداعي Creative Commons A-NC-SA 3.0.

الوسوم : , , ,


عدد التعليقات على هذه التدوينة : 13 تعليق

  1. حسين عبدالرزاق يونيو 9th, 2011

    كل الشكر لذاتك المبدع استفدت كثيراً من شرحك
    وقدرت اعملها في مدونتي ثمرات معلوماتية
    شرحك كافي ووافي الله يجعلها بميزان حسناتك

    • admin يوليو 2nd, 2011

      العفوا اخي العزيز وهذا الذي نتمناه من الشرح وهو التطبيق وبالتوفيق اخي العزيز

  2. عبد الكريم أغسطس 6th, 2011

    بارك الله فيك اخي بصراحه شرح اكثر من رائع واسلوب مميز

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

    هل توجد طريقة لعرض الصورة المدرجة في الموضوع بالطريقة العادية ..؟

    • admin أغسطس 6th, 2011

      الله يبارك فيك اخي العزيز

      في طريقة باستعمال هاك وايضا سكريبت timthumb بس ما جربتها وفي الحقيقة هذه الطريقة ستنفعك لانها تاخد الصورة الاولى من التدوين واستعمالها في الصورة المصغرة

    • admin أغسطس 6th, 2011

      هذه الطريقة قمت بكتابتها الحين ستساعدك جربها
      اضافة مصغرات الصور لووردبريس تلقائيا بدون حقل الخصائص

  3. زاهر أكتوبر 18th, 2011

    برك الله فيك اخوي على الشرح.
    بس حبيت اخذ بعض توضيحات منك , فأرجوا انك توضحها قليلاً.

    بالنسبة لتنسيق homethumb الي مفروض نضعه في ملف Style.css
    طيب أخوي انت ما وضحت وين التنسيق نحطه داخل الملف , ترى ملف ستايل فيه اكواد كثير و انا شخصيا ماعرفت وين اضعه بالتحديد..!!

    امر أخر , ايش قصدت بكلمة التصريح 777 ليكون قصدك بالبورت الي في ftp Port 21

    • معاذ أكتوبر 18th, 2011

      الله يبارك فيك اخي العزيز
      ضعه في السطر الاخير من ملف التنسيق او اي مكان لا يهم
      التصريح (Permissions) ممكن تغييره من FTP او Cpanel
      يستحسن 775 بالنسبة لتصريح 777 قد يتسبب بمشكلة internal server error 500

  4. محمد الكتبي ديسمبر 11th, 2011

    مشكور اخوي على هذا الدرس الرائع
    عندي استفسار صغير

    وهو عندما كتبت تدوينه جديدة لم اجد الخصائص الاضافيه ؟؟؟

    • معاذ ديسمبر 11th, 2011

      العفو اخي العزيز محمد الكتبي
      فوق ستجد خيارات الشاشة ومساعدة قم بالضغط على خيارات الشاشة وضع عالامة على خصائص اضافية
      وستظهر ان شاء الله


  • مجلة الوردبريس
    ديسمبر 11th, 2011




1. المرجوا الابتعاد عن كتابة تعليقات بنمط (يعطيك العافية)، (روعة)، (ممتاز)، (مشكوووور)، (ابداع).

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