كيف تعرض الصورة البارزة بواسطة TimThumb

آخر تحديث 27 ديسمبر 2016بواسطة - wait... مشاهدة/ 9 تعليقات
كيف تعرض الصورة البارزة بواسطة TimThumb

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

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

تحميل TimThumb

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

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

http://sitename.com/wp-content/themes/your-theme-name/resize.php
لا تقم بتغيير اي شيئ في هذا الملف فقط قم برفعه الى مجلد القالب الذي تستعمل

متطلبات عمل Timthumb

لكي يعمل لك السكريبت timthumb بشكل جيد تحتاج القيام ببعض الامور

  1. انشاء مجلد cache داخل مجلد القالب وقم باعطائه التصريح 777
  2. انشاء ملف index.html وقم باعطائه التصريح 777
  3. انشاء ملف timthumb_cacheLastCleanTime.touch قم باعطائه التصريح 777
  4. انشاء ملف htaccess لحماية مجلد الكاش بالنسبة لهذا الملف قم باضافة الاكواد التالية :
php_flag engine off
Options -ExecCGI
AddHandler cgi-script .php .php5 .php4 .php3 .pl .py .jsp .asp .htm .shtml .sh .cgi .gif .jpg .jpeg .png .phtml

دمج TimThumb مع القالب :

بالنسبة لاستعمال timthumb لعرض الصورة البارزة سنقوم بعمل دالة لتبسيط الامر كما هو مستعمل للصور البارزة الافتراضية كل ما عليك هو اضافة الكود ادناه الى ملف functions.php

function show_thumb($width, $height, $class, $postid, $quality) {
	if ( has_post_thumbnail() ) {
		$img = wp_get_attachment_image_src( get_post_thumbnail_id($postid), 'full' );
		$url = $img['0'];
		echo '<img class="'.$class.'" src="'.get_bloginfo('template_directory').'/resize.php?src='.$url.'&amp;w='.$width.'&amp;h='.$height.'&amp;zc=0&amp;s=1&amp;q='.$quality.'" alt="'. get_the_title($postid).'" height="'.$height.'" width="'.$width.'" />';
	}
}
  1. المتغيير width هو عرض الصورة
  2. المتغيير height هو ارتفاع الصورة
  3. المتغيير class اذا اردت اضافة كلاس خاص بالتنسيقات css
  4. المتغيير postid هو رقم المقالة اتركه كما هو موضح في الكود ادناه
  5. المتغيير quality هذا لتغيير جودة الصورة القيمة من 1 الى 100 يستحسن تركه في 100 لعرض الصور البارزة بجودة عالية

بعد اضافة الى ملف functions.php كل ما تحتاجه لعرض البارزة هو عرضها بالشكل التالي :

show_thumb(300, 150, 'img-responsive', $post->ID, 100);

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

// The Loop
while ( have_posts() ) : the_post();
    ?>
	<div class="hentry">
		<h2 class="entry-title">
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</h2>
		<div class="thumbnail">
			<?php show_thumb(300, 150, 'img-responsive', $post->ID, 100); ?>
		</div>
		<p><?php the_content(''); ?></p>
	</div>
	<?php
endwhile;

تعيين الصورة البارزة لـ Timthumb

بالنسبة لتعين الصورة البارزة فهو كالطريقة العادية للوردبريس يتم تعين الصورة من صفحة تحرير المقالة على الجهة اليسرى من صفحة تحرير المقالة تجد مربع بالشكل التالي :

set thumbnail - مجلة ووردبريس

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

اعداد روابط صديقة لمحركات البحث لـ Timthumb

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

function show_thumb($width, $height, $class, $postid, $quality) {
	if ( has_post_thumbnail() ) {
		$img = wp_get_attachment_image_src( get_post_thumbnail_id($postid), 'full' );
		$url = $img['0'];
		echo '<img class="'.$class.'" src="'.home_url().'/media/resizer/'.$width.'x'.$height.'/r/'.remove_path($url).'" alt="'. get_the_title($postid).'" height="'.$height.'" width="'.$width.'" />';
	}
}
function remove_path($url = '') {
	if ($url == 'http://' OR $url == 'https://'){
        return $url;
    }
	$url = parse_url($url);
	$url = explode('/', $url['path']);
	$url = array_slice($url, -3, 3, false);
	$url = $url['0'].'/'.$url['1'].'/'.$url['2'];
		
    return $url;
}

ولكي ابسط الامر عليك قم بتحميل الملف media وقم بفك ضغطه على جهازك ثم قم برفع المجلد media الى مجلد ووردبريس الرئيسي ليصبح على الشكل التالي :

/media
/wp-admin
/wp-content
/wp-includes
...

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

/media/.htaccess

وتغيير الرابط التالي http://sitename.com الى رابط موقعك ولا تنسى تغيير http الى https اذا كنت تستعمل ssl هذا مثال على كود htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /media/
RewriteRule ^resizer/(.*)x(.*)/r/(.*) resizer/resize.php?src=http://sitename.com/wp-content/uploads/$3&h=$2&w=$1&zc=0&s=1
</IfModule>

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

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

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

كيف تعرض الصورة البارزة بواسطة TimThumb بواسطة مجلة ووردبريس, يمكنك نقل ومشاركة التدوينة مع ذكر المصدر الأصلي للموضوع ، مع رابطه, التدوينة مرخصة بموجب المشاع الابداعي Creative Commons A-NC-SA 3.0.
2010-12-10T15:00:15+00:00
2016-12-27T09:18:46+00:00

التعليقات9 تعليقات

  • حسين عبدالرزاق

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

    • admin

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

  • عبد الكريم

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

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

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

  • زاهر

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

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

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

    • معاذ

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

  • محمد الكتبي

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

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

    • معاذ

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

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *


شروط التعليق :

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

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

معاذ أشملي مشرف موقع (212) 689-383-644 المغرب webmaster@mwordpress.net