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

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

feautured_image_theme_support_001

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

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

add_theme_support( 'post-thumbnails' ); 

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

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

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

if ( has_post_thumbnail() ) {

	the_post_thumbnail();

} 

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

the_post_thumbnail('medium');

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

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

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

the_post_thumbnail( array(150,120) );

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

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

الـ loop يبدأ بهذا السطر:

<?php while ( have_posts() ) : the_post(); ?>

وينتهي بهذا السطر

<?php endwhile; ?>

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

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

– سـأفتح مجلد قالب وأبحث عن ملف category.php وأفتحه ثم أبحث بداخله عن بداية الـ loop ونهايته كما عرفنا.
– بعد ذلك سأبحث عن دالة the_content() أو دالة the_excerpt() بداخل الـ loop وأضع بجوارها كود اظهار الصورة البارزة.
– افترض اني لم اجد الدالتين the_content() و the_excerpt() ، اذاً في الغالب ستجد ان هناك ملف آخر مستدعى داخل الـ loop وسيكون على هذا الشكل غالبا:

get_template_part( 'loop', 'category' );

طبقا للكود السابق سأبحث عن ملف باسم loop-category.php ولو غير موجود سأجد ملف loop.php وأضع به الكود الخاص بي.

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

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

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

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

if ( has_post_thumbnail() ) {

    the_post_thumbnail();
	
} else {

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

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

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

set_post_thumbnail_size( 150, 120, true );

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

لاحظ أن الدالة set_post_thumbnail_size() تقوم باعداد الحجم الافتراضي للصورة المصغرة فقط اي الحجم (thumbnail) فقط.

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

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

function setMyDefaultThumbnailSize() {

	set_post_thumbnail_size( 150, 120, true );
	
}

add_action( 'after_setup_theme', 'setMyDefaultThumbnailSize' );

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

add_action( 'after_setup_theme', 'setMyDefaultThumbnailSize', 11 );

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

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

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

add_image_size( 'indexpage-thumb', 200, 200, true );

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

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

 the_post_thumbnail( 'indexpage-thumb' );

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

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

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

11 تعليق

  1. بارك الله فيك اخي الكريم على هذه الشرح الوفير والمفيد

    الله يعطيك العافية كل التحية لك

  2. شرح جميل , و الصورة البارزة تعطى لمسة جمالية رائعة للموقع , شكراً و بالتوفيق للجميع أن شاء الله 🙂 .

  3. جزالك الله خيرا

    هناك سؤال
    كيف نقوم باظهار صورة عشوائيه من داخل التدوينه لاظهارها كصوره بارزه ؟

    وشكرا لك

اترك رداً على AboAlabbas إلغاء الرد

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