اعداد دعم القالب للصور البارزة

تعرفنا في مقالة سابقة عن كيفية تعيين صورة بارزة لمقالتك من لوحة التحكم، ربما حاولت ان تقوم بذلك ولكنك لم تجد خيارا يتيح لك ذلك في لوحة التحكم، هذا لأن ووردبريس يترك امر دعم الصورة البارزة للقالب لذا عليك اولا ان تجعل قالبك يدعم هذه الخاصية قبل استخدامها.. اذاً سنتعرف سويا في هذه المقالة عن كيفية اعداد الصورة البارزة في قوالبنا لتبدو اكثر اناقة.

اضافة دعم الصور البارزة للقالب

افتح ملف functions.php الخاص بالقالب الذي تستخدمه وأضف اليه هذا السطر:

[code language=”php”]add_theme_support( ‘post-thumbnails’ ); [/code]

الآن بعد حفظك للملف يمكنك تعيين الصورة البارزة من لوحة التحكم، لكن تريث قليلاً فعليك اولا ان تجعل الصورة تظهر في قالبك في مكانها المناسب.

اظهار الصورة البارزة في القالب

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

[code language=”php”]if ( has_post_thumbnail() ) {

the_post_thumbnail();

} [/code]

الدالة the_post_thumbnail() اول بارمتر فيها هو حجم الصورة، بمعنى انني لو اردت ان اظهر الصورة البارزة بالحجم متوسط medium سأضع الدالة كالتالي:

[code language=”php”]the_post_thumbnail(‘medium’);[/code]

الاحجام الموجودة افتراضيا هي:

• thumbnail وهو الحجم الافتراضي للصورة البارزة ( 150 * 150 بكسل على الاكثر ) يظهر هذا الحجم افتراضيا اذا لم يتم تحديد اي حجم آخر.
• medium الحجم المتوسط ( 300*300 بكسل على الاكثر افتراضيا ).
• large الحجم الكبير ( 640*640 بكسل على الاكثر افتراضيا ).
• full الصورة بأبعادها الاصلية.

أيضا يمكنك تحديد حجم الصورة بالارقام “العرض * الارتفاع” بدلا من الاحجام الافتراضية السابقة كالتالي:

[code language=”php”]the_post_thumbnail( array(150,120) );[/code]

السؤال الآن: أين سأضع هذا الكود في الملف بالضبط ؟

يتم وضع هذا الكود داخل حلقة عرض المقالات “loop” بعد فتحك للملف ستجد أن:

الـ loop يبدأ بهذا السطر:
[code language=”php”]<?php while ( have_posts() ) : the_post(); ?>[/code]

وينتهي بهذا السطر
[code language=”php”]<?php endwhile; ?>[/code]

يتم وضع الكود بين السطرين السابقين سواء داخل الملف مباشرة او بداخل الملف المستدعى بين هذين السطرين.

للتوضيح اكثر دعنا نفترض انني اريد أن اظهر الصورة المصغرة بداخل صفحات التصنيف بجانب محتوى كل مقالة، سأقوم بالتالي:

– سـأفتح مجلد قالب وأبحث عن ملف category.php وأفتحه ثم أبحث بداخله عن بداية الـ loop ونهايته كما عرفنا.
– بعد ذلك سأبحث عن دالة the_content() أو دالة the_excerpt() بداخل الـ loop وأضع بجوارها كود اظهار الصورة البارزة.
– افترض اني لم اجد الدالتين the_content() و the_excerpt() ، اذاً في الغالب ستجد ان هناك ملف آخر مستدعى داخل الـ loop وسيكون على هذا الشكل غالبا:
[code language=”php”]get_template_part( ‘loop’, ‘category’ );[/code]
طبقا للكود السابق سأبحث عن ملف باسم loop-category.php ولو غير موجود سأجد ملف loop.php وأضع به الكود الخاص بي.

وضع صورة بارزة افتراضية

احيانا قد لا تقوم باعداد صورة بارزة للمقالة التي تكتبها، لكن في نفس الوقت وحفاظا على المظهر تحب ان يتم اظهار صورة افتراضية كصورة بارزة في هذه الحال، ولتفعل ذلك قم بالتالي:

اولا قم بانشاء الصورة الافتراضية التي تريدها وليكن اسمها default_thumb.png وضعها في مجلد images الموجود داخل مجلد قالبك

ثانيا سنقوم بالتعديل على كود اظهار الصورة البارزة ليصبح هكذا:
[code language=”php”]if ( has_post_thumbnail() ) {

the_post_thumbnail();

} else {

echo ‘<image src="’ . get_stylesheet_directory_uri() .’/images/default_thumb.png" alt="’ . get_the_title() . ‘">’ ;

}[/code]

اعداد الحجم الافتراضي للصورة البارزة

كما نعلم، يمكننا اعداد الاحجام الافتراضية من لوحة التحكم، ولكن عندما نقوم بعمل قالب ليستخدمه شخص آخر فمن الافضل ان نجعل القالب يحدد الحجم الافتراضي المناسب له دون الرجوع للوحة التحكم، ولنفعل هذا نضع السطر التالي في ملف functions.php :

[code language=”php”]set_post_thumbnail_size( 150, 120, true );[/code]

كما يظهر في السطر السابق فان الدالة set_post_thumbnail_size() تاخذ ثلاثة بارمترات الاول هو العرض بالبكسل والثاني هو الارتفاع اما الثالث فيحدد ما اذا كنا نريد ان يتم قص الصورة بالحجم المحدد ام لا فاذا كانت القيمة true تعني قص واذا كانت false تعني لا تقص.

اعداد الحجم الافتراضي في القالب الابن (Child Theme)

قد يكون القالب الذي نعمل عليه قالبا ابن مبنيا على قالب آخر ونريد تغيير الحجم الافتراضي المعد مسبقا في القالب الاب، ولنفعل ذلك نقوم بوضع هذا الكود في ملف functions.php:

[code language=”php”]function setMyDefaultThumbnailSize() {

set_post_thumbnail_size( 150, 120, true );

}

add_action( ‘after_setup_theme’, ‘setMyDefaultThumbnailSize’ );[/code]

ما قمنا بعمله في الكود السابق هو انشاء دالة جديدة لتعيين الحجم الافتراضي ثم تطبيقها على الـ Hook المسمى after_setup_theme، جيد لكن ماذا إذا كان القالب الأب يستخدم نفس الطريقة ايضا ؟ عندها سنقوم بزيادة بارمتر ثالث للدالة add_action لتكون كالتالي:

[code language=”php”]add_action( ‘after_setup_theme’, ‘setMyDefaultThumbnailSize’, 11 );[/code]

هذا البارمتر الثالث يعبر عن الاولوية priority وافتراضياً يحمل القيمة 10 لذا قمنا بزيادة القيمة الى 11 حتى نضمن ان يتم تطبيق الدالة الخاصة بنا بعد القالب الاب وبالتالي تطبيق الحجم الجديد الخاص بالقالب الابن.

اضافة احجام جديدة للصورة البارزة

والآن ماذا إذا أردنا ان نظهر الصورة البارزة الخاصة بنا بأحجام مختلفة حسب كل صفحة من صفحات القالب، فمثلا تكون الصورة البارزة في صفحات التصنيفات صغيرة لكن في الرئيسية بحجم اكبر، قد يكون الحل هو استخدام الاحجام الافتراضية الاخرى المتاحة مثل ‘medium’ و ‘large’ كما عرفنا في بداية المقالة ولكننا نريد ان نقوم بتعيين احجام جديدة خاصة بنا، ولنفعل هذا سنقوم باستخدام الدالة add_image_size() ونضعها في ملف functions.php:

[code language=”php”]add_image_size( ‘indexpage-thumb’, 200, 200, true );[/code]

كما نرى في الكود السابق الدالة تأخذ اربعة بارمترات الاول هو اسم الحجم الجديد الذي نريد اضافته وبقية البارمترات تماما مثل بارمترات دالة set_post_thumbnail_size().

بعد اضافة الحجم الجديد indexpage-thumb في ملف functions.php كما في الكود السابق يمكننا الآن استخدامه في دالة the_post_thumbnail() لاظهاره في القالب الخاص بنا:
[code] the_post_thumbnail( ‘indexpage-thumb’ );[/code]

اعادة توليد الصور بالاحجام الجديدة

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

لاعادة توليد الصور بالاحجام الجديدة، سنستخدم اضافة تساعدنا على هذا وهي Regenerate Thumbnails.