سنتطرق الى شرح طريقة عرض الصورة البارزة باستعمال 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
Failed loading gist https://gist.github.com/d79a75f8ba0d...1d98b8ff.json: error

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

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

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

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







<?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="'.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 والى اللقاء في تدوينة جديدة انشاء الله