إصلاح صور المنتجات الضبابية

تنتج صور المنتجات الضبابية أو غير الواضحة في ووكومرس عادةً عن تنسيق القالب (theme) الذي يحدد أبعاد صور غير متوافقة مع الصور التي قمت برفعها. يشرح هذا الدليل كيفية تحديد الأبعاد الصحيحة للصور لقالبك، وضبط إعدادات صور ووكومرس، وإعادة توليد الصور المصغرة لحل مشكلة الصور الضبابية.

أنواع الصور (Image types)

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

• صورة المنتج الفردي (Single product image): أكبر صورة في صفحة تفاصيل المنتج الفردية. يُشار إليها أحياناً بالصورة الرئيسية (main) أو البارزة (featured).
• صورة الكتالوج (Catalog image): صورة متوسطة الحجم تُستخدم في حلقات المنتجات (product loops)، مثل صفحة المتجر، وصفحات تصنيفات المنتجات، والمنتجات ذات الصلة (related products)، والمبيعات الإضافية (upsells)، والمنتجات المقابلة (cross-sells).
• الصورة المصغرة للمنتج (Product thumbnail): أصغر صورة، وغالباً تُستخدم في سلة التسوق، والوحدات (widgets)، وفي صور المعرض أسفل صورة المنتج الفردي.

أبعاد الصور القياسية (Standard image dimensions)

اعتباراً من ووكومرس 3.3، توجد إعدادات صور المنتجات في أداة التخصيص (Customizer). انتقل إلى المظهر > تخصيص > ووكومرس > صور المنتجات (Appearance > Customize > WooCommerce > Product Images). تظهر في لقطة الشاشة أدناه الإعدادات الافتراضية في قالب Storefront. قد تقوم القوالب الأخرى بتغيير الخيارات أو إضافة خيارات جديدة.

يتم تغيير حجم الصور التي ترفعها لتطابق القيم التي تدخلها. على سبيل المثال، إذا كانت إعداداتك 100×100 بكسل وقمت بتحفتصوير/رفع صورة بحجم 300×600 بكسل، يقوم ووكومرس بتغيير حجمها إلى 100×200 بكسل.

يمكنك أيضاً اختيار القص الثابت (hard-crop) لصورك. يجبر هذا الخيار الصور على الحجم المحدد تماماً في الإعدادات، عن طريق القص بدلاً من تشويه الصورة.

فحص دقة وأبعاد الصور (Check image resolution and dimensions)

إذا ظهرت صورك ضبابية، غالباً ما تكون المشكلة أن الصور المرفوعة صغيرة جداً أو أن إعدادات حجم الصور في ووكومرس منخفضة جداً. اتبع هذه الخطوات للتحقق من دقة الصور وتصحيحها:

1. افتح مكتبة الوسائط (Media Library) في لوحة تحكم ووردبريس وانقر على إحدى صور منتجاتك.
2. في لوحة تفاصيل المرفق (Attachment Details)، تحقق من الأبعاد المدرجة. يجب أن تكون الصورة الأصلية بحجم 800×800 بكسل على الأقل لمعظم القوالب.
3. إذا كانت الصورة الأصلية أصغر من 800×800 بكسل، فاستبدلها بنسخة أعلى دقة. انقر على حذف نهائياً (Delete permanently)، ثم ارفع الصورة الجديدة عبر وسائط > أضف جديداً (Media > Add New).
4. أعد تعيين الصورة الجديدة كصورة بارزة للمنتج عن طريق تحرير المنتج واختيار صورة الاستبدال ضمن صورة المنتج (Product image).
5. تأكد من أن أبعاد الصور في المظهر > تخصيص > ووكومرس > صور المنتجات (Appearance > Customize > WooCommerce > Product Images) تطابق أو تتجاوز أكبر أبعاد يعرضها قالبك (راجع العثور على أبعاد صور منتجات قالبك / Find your theme’s product image dimensions أدناه).
6. بعد تحميل الصور البديلة أو تغيير إعدادات الأبعاد، انتقل إلى ووكومرس > الحالة > الأدوات (WooCommerce > Status > Tools) وانقر على إعادة توليد (Regenerate) بجانب إعادة توليد الصور المصغرة للمتجر (Regenerate shop thumbnails).

العثور على أبعاد صور منتجات قالبك (Find your theme’s product image dimensions)

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

صور الكتالوج (Catalog images)

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

1. افتح صفحة المتجر في متصفحك.
2. انقر بزر الماوس الأيمن على صورة المنتج واختر فحص (Inspect) أو فحص العنصر (Inspect Element).
3. لاحظ أبعاد الصورة المعروضة في لوحة أدوات المطور.

في المثال أعلاه، تُعرض أكبر صور الكتالوج بدقة 324×324 بكسل.

صور المنتج الفردي (Single product images)

كرر عملية الفحص لصورة المنتج الفردي، وهي عادة أكبر صورة في صفحة المنتج.

في قالب Storefront، أكبر صورة منتج فردي هي 800×800 بكسل. على الرغم من أن الصورة لا تُعرض مرئياً بهذا الحجم، إلا أن هذا البعد مطلوب لتأثير التكبير (zoom).

صور المنتجات المصغرة (Product thumbnails)

أصغر صورة منتج مطلوبة هي غالباً الصورة المصغرة في معرض المنتجات. كرر نفس عملية الفحص العثور على الأبعاد.

في قالب Storefront، تُعرض الصورة المصغرة للمنتج بحجم 46×46 بكسل.

ضبط أبعاد الصور وإعادة توليد الصور المصغرة (Adjust image dimensions and regenerate thumbnails)

الآن بعد أن عرفت أحجام الصور التي يستخدمها قالبك، يمكنك رفع صور تتجاوز أكبر الأبعاد وتكوين ووكومرس لإنشاء صور مصغرة بالأحجام الصحيحة. اتبع هذه الخطوات لتحديث إعداداتك وإعادة توليد الصور المصغرة:

1. انتقل إلى المظهر > تخصيص > ووكومرس > صور المنتجات (Appearance > Customize > WooCommerce > Product Images).
2. اضبط عرض الصورة الرئيسية (Main image width) لتطابق أو تتجاوز أكبر أبعاد صورة يعرضها قالبك.
3. انقر على نشر (Publish) لحفظ التغييرات.
4. انتقل إلى ووكومرس > الحالة > الأدوات (WooCommerce > Status > Tools) وانقر على إعادة توليد (Regenerate) بجانب إعادة توليد الصور المصغرة للمتجر (Regenerate shop thumbnails).

أي صور منتجات جديدة ترفعها ستستخدم هذه الإعدادات. الصور المرفوعة مسبقاً تتم تحديثها بعد إعادة توليد الصور المصغرة. يجب أن تظهر الصور بدون تشويه أو ضبابية.

دعم شاشات رتينا (Retina support)

الشاشات عالية الكثافة (HiDPI)، المعروفة باسم شاشات رتينا (retina displays)، تحتوي على ضعف عدد البكسلات (أو أكثر) مقارنة بالشاشات العادية. للحصول على صور حادة على شاشات رتينا، اضبط صورك المصغرة على ضعف الحجم (double the size) الذي يعرضه قالبك. على سبيل المثال، إذا كان قالبك يعرض الصور بدقة 80×80 بكسل، فاجعل البعد 160×160 بكسل.

تحسينات الصور في ووكومرس 3.3 والأحدث (Image improvements in WooCommerce 3.3 and later)

قدم ووكومرس 3.3 توافق القوالب (theme compatibility) وتحسينات على عرض الصور وقصها (improvements to image rendering and cropping) والتي تظل جزءاً من المنصة حتى اليوم. تعني هذه التغييرات:

• لا ينبغي أن تحدث الصور الضبابية الناتجة عن عدم توافق القالب أو الكود المتداخل.
• يمكنك التحكم في عرض وارتفاع صور منتجاتك الرئيسية.
• يمكن تغيير حجم الصور المصغرة تلقائياً أو يدوياً.
• الصور المعروضة للعملاء تبدو صحيحة افتراضياً.

لتعلم كيفية استخدام هذه الميزات، راجع إضافة وإدارة المنتجات (Adding and managing products) وإضافة صور المنتجات والمعارض (Adding product images and galleries).

الأسئلة والدعم (Questions and support)

هل لا تزال لديك أسئلة وتحتاج إلى مساعدة؟

• إذا كنت تبحث عن توسيع (extend) الوظائف الأساسية المعروضة هنا، فنحن نوصي بمراجعة الإضافات المتاحة في سوق ووكومرس (WooCommerce Marketplace).
• هل تحتاج إلى دعم متقدم مستمر أو تخصيص (customization) مخصص لووكومرس؟ عيّن شريكاً من شركاء وكالة Woo (Woo Agency Partner).
• هل أنت مطور (developer) تبني تكامل أو إضافة خاصة بك في ووكومرس؟ تحقق من موارد المطورين (Developer Resources).