في هذا المقال، سنتناول مشكلة شائعة يواجهها العديد من مستخدمي منصة بلوجر (Blogger) وهي عدم ظهور الصور المصغرة (thumbnails) للمشاركات ذات الصلة (Related Posts). تؤثر هذه المشكلة سلبًا على تجربة المستخدم وجمالية المدونة، وقد تشير إلى وجود أخطاء في قالب المدونة أو في طريقة معالجة الصور. سنقدم شروحات تقنية وحلولاً عملية لمعالجة هذه المشكلة.
فهم المشكلة وتأثيرها
تعتبر المشاركات ذات الصلة ميزة حيوية لتحسين تفاعل الزوار داخل المدونة، حيث تشجعهم على استكشاف المزيد من المحتوى ذي الصلة بالمقالة التي يقرؤونها. عندما لا تظهر الصور المصغرة، يصبح القسم أقل جاذبية وقد يتجاهله الزوار، مما يؤدي إلى زيادة معدل الارتداد (Bounce Rate) وتقليل الوقت الذي يقضيه الزائر في الموقع. من الناحية التقنية، غالبًا ما تنبع هذه المشكلة من عدم قدرة الكود البرمجي للقالب على استخراج عنوان URL الصحيح للصورة المصغرة أو من عدم وجود صورة مصغرة قابلة للاستخدام.
قبل إجراء أي تعديلات على قالب مدونتك، تأكد دائمًا من أخذ نسخة احتياطية كاملة للقالب. هذا يضمن إمكانية استعادة القالب إلى حالته الأصلية في حال حدوث أي خطأ غير متوقع.
الأسباب الشائعة لعدم ظهور الصور المصغرة
هناك عدة أسباب تقنية وراء عدم ظهور الصور المصغرة، أبرزها:
- عدم وجود صورة مميزة (Featured Image): في بعض الأحيان، يعتمد كود المشاركات ذات الصلة على وجود صورة محددة كصورة مميزة للمقالة. إذا لم يتم تعيين صورة كهذه، قد يفشل الكود في العثور على أي صورة لعرضها.
- مشاكل في كود الـ HTML/JavaScript للودجت: قد يكون الكود المخصص للمشاركات ذات الصلة (سواء كان جزءًا من القالب أو ويدجت مضافًا) يحتوي على أخطاء تمنعه من استخراج `data:post.thumbnailUrl` بشكل صحيح، أو قد لا يتضمن منطقًا للتعامل مع الحالات التي لا تتوفر فيها الصورة المصغرة.
- مشاكل في استضافة الصور: إذا كانت الصور مستضافة على خدمات خارجية غير متاحة للعامة أو تتطلب مصادقة، فقد لا يتمكن بلوجر من الوصول إليها وعرضها.
- تغييرات في بنية بلوجر: قد تحدث تحديثات في بنية بلوجر تؤثر على طريقة استدعاء البيانات، مما يتطلب تحديث الكود في القوالب القديمة.
حلول عملية وخطوات استكشاف الأخطاء
لحل مشكلة عدم ظهور الصور المصغرة، اتبع الخطوات التالية بدقة:
الخطوة 1: التحقق من صور المشاركات
- تأكد من أن جميع المشاركات التي تظهر في قسم "المشاركات ذات الصلة" تحتوي على صورة واحدة على الأقل داخل محتواها. يفضل أن تكون الصورة الأولى في المقال هي الصورة التي ترغب في عرضها كصورة مصغرة.
- إذا كانت المشاركة لا تحتوي على صور، قم بإضافة صورة ذات صلة وحفظ المشاركة.
الخطوة 2: فحص كود ويدجت المشاركات ذات الصلة
هذه هي الخطوة الأكثر أهمية وتتطلب بعض المعرفة الأساسية بـ HTML و XML في قوالب بلوجر.
- انتقل إلى لوحة تحكم بلوجر > المظهر > تعديل HTML.
- ابحث عن الكود الخاص بويدجت المشاركات ذات الصلة. غالبًا ما يكون ضمن وسم `
- ابحث داخل الكود عن الأجزاء المسؤولة عن عرض الصور. عادةً ما تبحث عن `img` tags أو المتغيرات التي تحمل اسم `thumbnailUrl` أو `post.firstImageUrl`.
المتغير القياسي في بلوجر لاستدعاء الصورة المصغرة هو
data:post.thumbnailUrl. تأكد من أن الكود يستخدم هذا المتغير بشكل صحيح.إذا كان الكود لا يتضمن منطقًا للتعامل مع عدم وجود الصورة المصغرة، يمكنك إضافة شرط للتحقق من وجودها وعرض صورة افتراضية بدلاً منها. إليك مثال على كيفية تعديل الكود:
<b:loop values='data:posts' var='post'>
<div class='related-post-item'>
<a expr:href='data:post.url'>
<b:if cond='data:post.thumbnailUrl'>
<img expr:src='data:post.thumbnailUrl' class='related-post-thumbnail'/>
<b:else/>
<img src='https://4.bp.blogspot.com/-_Y5xQ-1-y-0/AAAAAAAAAAI/AAAAAAAAB/s1600/default-thumbnail.png' class='related-post-thumbnail'/> <!-- استبدل بالرابط الخاص بصورتك الافتراضية -->
</b:if>
<span class='related-post-title'><data:post.title/></span>
</a>
</div>
</b:loop>في هذا المثال، قمنا بإضافة وسم `
الخطوة 3: التحقق من استضافة الصور وإمكانية الوصول إليها
تأكد من أن الصور المستخدمة في مشاركاتك مستضافة بشكل صحيح على بلوجر أو على خدمة استضافة صور عامة. إذا كنت تستخدم صورًا من ألبومات Google Photos (Picasa سابقًا) وكانت هذه الألبومات خاصة، فلن يتمكن بلوجر من عرضها. اجعل الألبومات عامة أو أعد تحميل الصور مباشرة إلى مشاركات بلوجر.
الخطوة 4: تعارضات JavaScript
إذا كان ويدجت المشاركات ذات الصلة يعتمد على كود JavaScript مخصص، فقد تحدث تعارضات مع سكربتات أخرى في القالب. للتحقق من ذلك:
- افتح مدونتك في المتصفح.
- اضغط على F12 لفتح أدوات المطور (Developer Tools).
- انتقل إلى تبويب Console. ابحث عن أي رسائل خطأ باللون الأحمر، والتي قد تشير إلى مشاكل في JavaScript.
- إذا وجدت أخطاء، حاول تعطيل السكربتات المخصصة للمشاركات ذات الصلة مؤقتًا (عن طريق إزالتها أو وضعها داخل تعليق HTML ``) لمعرفة ما إذا كانت المشكلة تختفي. إذا اختفت، فهذا يؤكد وجود تعارض.
الخطوة 5: التفكير في استخدام ويدجت افتراضي
إذا استمرت المشكلة بعد تجربة جميع الحلول المذكورة أعلاه، قد يكون الحل الأبسط هو استخدام ويدجت "المشاركات الشائعة" (Popular Posts) الافتراضي من بلوجر، والذي عادةً ما يعرض الصور المصغرة بشكل صحيح. يمكنك إضافة هذا الودجت من لوحة تحكم بلوجر > التخطيط > إضافة أداة.
اعتبارات متقدمة
في بعض القوالب المعقدة، قد يتم معالجة الصور المصغرة بواسطة سكربتات خارجية أو وظائف مخصصة داخل القالب. في هذه الحالات، قد تحتاج إلى مراجعة وثائق القالب أو التواصل مع مطور القالب للحصول على دعم فني. تأكد أيضًا من أن القالب الذي تستخدمه متوافق مع أحدث إصدارات بلوجر.
تطبيق التعديلات المذكورة في الخطوة 2، خاصة إضافة الشرط
<b:if cond='data:post.thumbnailUrl'> مع صورة افتراضية، غالبًا ما يحل المشكلة بشكل فعال ويضمن ظهور الصور المصغرة أو بديلها.الأسئلة الشائعة
لماذا لا تظهر الصور المصغرة للمشاركات ذات الصلة في مدونتي على بلوجر؟
غالبًا ما يكون السبب هو عدم وجود صورة مميزة في المشاركة، أو خطأ في كود الودجت الخاص بالمشاركات ذات الصلة في قالب HTML، أو مشاكل في استضافة الصور.
ما هو المتغير الذي يستخدمه بلوجر لعرض الصور المصغرة؟
المتغير القياسي هو data:post.thumbnailUrl. يجب أن يتضمن كود الودجت الخاص بك هذا المتغير لاستدعاء الصورة المصغرة.
هل يمكنني تعيين صورة افتراضية إذا لم تكن هناك صورة مصغرة للمشاركة؟
نعم، يمكنك استخدام شرط <b:if cond='data:post.thumbnailUrl'> في قالب HTML الخاص بك لعرض صورة افتراضية عندما لا تتوفر الصورة المصغرة للمشاركة. راجع الخطوة 2 في هذا المقال للحصول على مثال.
المشاركات ذات الصلة
المقال الأصلي:
حل مشكلة عدم ظهور صور المصغرات للمشاركات ذات الصلة في بلوجر
المصدر: صوان محور XYZ
شكر خاص لـ GEMINI و جمال الحزازي.
