كيفية إصلاح مشكلات حجم صورة WooCommerce

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

تعد WooCommerce واحدة من أفضل منصات التجارة الإلكترونية ، ولكن من حين لآخر ، قد تواجه بعض المشكلات. لقد رأينا بالفعل كيفية إصلاح المشكلات الأكثر شيوعًا عند الخروج وماذا تفعل عندما لا يعمل زر Add-to-Cart. في هذا البرنامج التعليمي ، سنعرض لك حلولًا مختلفة لإصلاح مشكلات حجم الصورة.

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

أنواع الصور في WooCommerce

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

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

المشكلات الشائعة في أحجام صور WooCommerce

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

لتكون قادرًا على إصلاح مشكلات حجم صورة WooCommerce ، تحتاج إلى تحديد مشكلتك أولاً . الجزء الصعب هو أن هناك العديد من المشكلات التي قد تواجهها فيما يتعلق بأحجام الصور. بعض أكثرها شيوعًا هي:

1. صور ضبابية

هذه واحدة من أكثر المشاكل شيوعًا. تظهر الصور التي تحمّلها لمنتجاتك أو صورك المصغرة ضبابية وقد لا تكون مرئية بوضوح حتى إذا لم تكن الصورة الأصلية مضغوطة ، وكانت مرئية بوضوح وذات جودة عالية.

لا تبدو الصور الباهتة سيئة فحسب ، بل تعطي أيضًا انطباعًا بأن موقعك ليس احترافيًا.

الصورة الأصلية

صورة ضبابية

2. صورة ذات جودة منخفضة

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

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

3. أحجام صورة خاطئة

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

على سبيل المثال ، لنفترض أن متطلبات السمة الخاصة بك لصور الكتالوج لا تقل عن 250 × 250 بكسل ، ولكن إعدادات صورة WooCommerce لمتجرك تصل إلى 200 × 200 بكسل. نظرًا لأن الإعدادات لم يتم تكوينها وفقًا لمتطلبات السمة ، فقد يتم إعادة ضبط صورتك تلقائيًا بحجم صورة خاطئ.

4. قضايا التكبير أو العرض المبسط أو شريط التمرير

يوفر لك WooCommerce خيارات التكبير / التصغير والصندوق المبسط وشريط التمرير لمعاينة صورك. كانت هذه ميزة جديدة تمت إضافتها إلى WooCommerce مع إصدار الإصدار 3.0 . إذا لم يتم تحديث المظهر الخاص بك وفقًا لمواصفاته ، فقد تواجه بعض المشكلات.

5. عرض الصورة والحقول المصغرة مفقودة

قد تلاحظ أيضًا أن حقول العرض والصورة المصغرة لصور WooCommerce الخاصة بك مفقودة من أداة التخصيص ضمن المظهر> التخصيص> WooCommerce> صور المنتج .

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

الآن بعد أن فهمنا بشكل أفضل أنواع الصور والمشكلات الأكثر شيوعًا ، دعنا نرى حلولًا مختلفة لإصلاح مشكلات حجم الصورة في WooCommerce.

كيفية إصلاح مشكلات حجم صورة WooCommerce

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

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

1. قائمة مرجعية أولية يجب وضعها في الاعتبار

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

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

وبالمثل ، تأكد من تحديث WooCommerce إلى أحدث إصدار متاح. لمعرفة ما إذا كان لديك تحديثات معلقة ، انتقل إلى المكونات الإضافية> المكونات الإضافية المثبتة على لوحة معلومات WordPress الخاصة بك. إذا كانت هناك إشعارات تطلب منك تحديث WooCommerce ، فانقر فوق تحديث الآن .

علاوة على ذلك ، إذا قمت بتحديث WordPress باستخدام محرر Gutenberg ، فتأكد من تحديث WordPress أيضًا إلى أحدث إصدار . من ناحية أخرى ، إذا كنت تستخدم WordPress مع المحرر الكلاسيكي ، فمن الأفضل تحديثه بأحدث إصدار من WordPress 4.9.

بمجرد القيام بكل هذا ، إذا كنت لا تزال تواجه مشكلات في أحجام الصور ، فتابع إلى الحل التالي.

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

2. قم بتعيين أحجام صور WooCommerce المخصصة

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

يعد إعداد حجم صورة مخصص أمرًا سهلاً للغاية. في لوحة تحكم المسؤول ، انتقل إلى المظهر> تخصيص وافتح علامة التبويب WooCommerce للوصول إلى أداة التخصيص.

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

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

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

3. تحقق من أبعاد صورة المنتج للموضوع

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

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

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

في هذه الحالة ، يكون حجم صورة المنتج 900 × 600 . إذا كانت متطلبات الصورة لموضوعك مختلفة ، فقد تواجه مشاكل.

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

4. تغيير أحجام الصور الافتراضية

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

للقيام بذلك ، انتقل إلى الإعدادات> الوسائط على لوحة معلومات WordPress الخاصة بك وسترى خيارات الحجم للصور المصغرة والمتوسطة والكبيرة الحجم .

اضبط أحجام الصور وفقًا لمتطلبات السمة واحفظ التغييرات .

بالإضافة إلى ذلك ، يمكنك إزالة بعض الأحجام الافتراضية إذا لم تستخدمها. لمعرفة المزيد حول ذلك ، راجع دليلنا لإزالة أحجام الصور الافتراضية في WordPress.

5. إصلاح مشكلات حجم صورة WooCommerce مع الملحقات

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

دعنا نلقي نظرة على بعض أفضل الأدوات التي يجب أن تستخدمها.

5.1 صور مثالية ودعم شبكية العين

بعبارات بسيطة ، يعد Retina Support خيارًا لعرض الصور على موقع الويب الخاص بك بدقة وجودة عالية جدًا. تضمن الشاشة الجاهزة لشبكية العين أن تكون أي صورة يتم عرضها على أي جهاز بأي حجم شاشة واضحة وبدون أي خطوط أو حدود منقطة مرئية.

يعد هذا حلاً مثاليًا إذا كانت الصور التي تم تحميلها على موقعك ضبابية أو منخفضة الجودة. إذا كنت ترغب في إنشاء صورة جاهزة لشبكية العين يدويًا ، فأنت بحاجة إلى مضاعفة حجم الصورة وأبعادها وتحسينها ثم إعادة تحميلها. ومع ذلك ، يمكنك استخدام مكون إضافي ، بحيث تكون صورك جاهزة لشبكية العين تلقائيًا. لهذا ، تعد Perfect Images واحدة من أفضل المكونات الإضافية الموجودة.

الصور المثالية عبارة عن مكون إضافي بسيط لإضافة الصور مع عرض شبكية العين إلى موقعك. يكتشف تلقائيًا أي صور بها مشاكل في شبكية العين وينشئ نسخة جاهزة لشبكية العين. علاوة على ذلك ، يمكنك إنشاء صور فردية جاهزة لشبكية العين أو القيام بذلك بشكل مجمّع لتوفير الوقت.

الآن ، دعنا نرى كيفية استخدام هذا البرنامج المساعد.

5.1.1. تثبيت وتنشيط البرنامج المساعد

أولاً ، تحتاج إلى تثبيته وتنشيطه. في لوحة معلومات WordPress الخاصة بك ، انتقل إلى المكونات الإضافية> إضافة جديد ، وابحث عن المكون الإضافي وانقر فوق التثبيت الآن .

بعد اكتمال التثبيت ، قم بتنشيط المكون الإضافي. بدلاً من ذلك ، يمكنك تثبيته يدويًا. إذا لم تكن متأكدًا من كيفية القيام بذلك ، فقم بإلقاء نظرة على دليلنا لتثبيت مكون WordPress الإضافي يدويًا.

5.1.2. تكوين خيارات الصورة لشاشة Retina

بعد تنشيط المكون الإضافي ، يجب عليك تكوين خيارات شبكية العين لـ WooCommerce أو صور موقع الويب. انتقل إلى Meow Apps> Perfect Images وسترى جميع الخيارات لصور شبكية العين في علامة التبويب " عام ". الخيارات الافتراضية مناسبة لمعظم مواقع الويب لأنها تنشئ صور شبكية لأحجام الصور الأكثر شيوعًا.

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

للتأكد من أن صور شبكية العين لا تستنزف سرعة موقع الويب الخاص بك ، تحتاج إلى التأكد من تحسينها جيدًا. يمكنك القيام بذلك من البرنامج المساعد بالانتقال إلى علامة التبويب التحسين والسرعة . ضع في اعتبارك أنه من أجل ذلك ستحتاج إلى الاشتراك في خطتهم المميزة التي تتضمن Easy IO للتحسين وتكلفتها 10 دولارات أمريكية شهريًا.

بدلاً من ذلك ، يمكنك أيضًا تحسينها يدويًا باستخدام مكون إضافي لتحسين الصورة أو خدمة مثل TinyPNG أو Smush .

5.1.3. تحويل الصور لدعم شبكية العين

بعد أن تقوم بتهيئة جميع الخيارات الضرورية لصور شبكية العين ، يمكنك البدء في تحويلها. أولاً ، انتقل إلى Media> Perfect Images وستتم إعادة توجيهك إلى علامة التبويب Retina Issues . هنا يمكنك إنشاء صور جاهزة لشبكية العين لإصلاح مشكلات حجم صورة WooCommerce.

يمكنك أيضًا إنشاء صور مصغرة وصور شبكية عن طريق تحديد الصور التي تريدها.

5.2 تجديد الصورة المصغرة

يعد تجديد الصور المصغرة أيضًا طريقة ممتازة لحل المشكلات المتعلقة بأحجام الصور ، خاصةً مع الصور المصغرة .

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

إذا كان لديك عدد كبير من الصور المصغرة على موقع الويب الخاص بك ، فيمكنك استخدام Perfect Images . كل ما عليك فعله هو تكوين خيارات حجم الصورة مثلما فعلنا في الخطوتين 5.1.1 و 5.1.2. بعد ذلك ، انتقل إلى Media> Perfect Images ، وافتح علامة التبويب All وسترى جميع الصور الموجودة على موقعك. على غرار خطوة دعم شبكية العين ، يمكنك إعادة إنشاء الصور المصغرة لصور معينة أو مجمعة.

لإعادة إنشاء الصور بشكل مجمّع ، اضغط على Bulk Actions وحدد Regenerate All Entries لإعادة إنشاء الصور المصغرة. ضع في اعتبارك أن هذا قد يستغرق بضع دقائق إذا كان لديك العديد من الصور على موقعك.

6. حل برمجي

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

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

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

تغيير حجم الصورة باستخدام قصاصات التعليمات البرمجية

لتغيير أحجام الصورة عندما يكون عرض الصورة وعرض الصورة المصغرة مفقودان في Customizer ، يمكنك استخدام مقتطف التعليمات البرمجية التالي. انتقل إلى Appearance> Theme Editor وافتح ملف jobs.php .

بعد ذلك ، ما عليك سوى إضافة مقتطف الشفرة التالي في الجزء السفلي من المحرر.

 add_theme_support ('woocommerce'، application_filters ('divi_woocommerce_args' ، مصفوفة (
   "عرض_صورة_فردة" => 600 ،
   "thumbnail_image_width" => 300 ،
   'product_grid' => مجموعة (
   "default_columns" => 3 ،
   "default_rows" => 4 ،
   "min_columns" => 1 ،
   "max_columns" => 6 ،
   "min_rows" => 1
   )
))) ؛

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

7. خيارات الدعم

إذا كنت قد جربت كل الحلول المذكورة هنا ولكنك لم تتمكن من العثور على حل لمشكلات حجم الصورة ، فإما أن المشكلة التي تواجهها نادرة أو أن هناك مشكلة في الملفات الأساسية لـ WooCommerce أو الموضوع الخاص بك.

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

استنتاج

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

في هذا الدليل ، رأينا حلولًا مختلفة لإصلاح مشكلات حجم صورة WooCommerce الأكثر شيوعًا .

1. قم بتحديث المظهر والإضافات الخاصة بك إلى أحدث إصدار ، بما في ذلك WooCommerce
2. قم بتعيين أحجام صور WooCommerce المخصصة
3. تحقق من أبعاد منتج صورة المظهر الخاص بك
4. تغيير أحجام الصور الافتراضية
5. استخدم الإضافات
6. حل برمجي بقليل من التعليمات البرمجية
7. اتصل بـ WooCommerce أو فريق دعم المظهر الخاص بك

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

لمزيد من الأدلة المفيدة ، إليك مقالات قد تجدها ممتعة:

• كيفية إضافة صورة إلى منتج في WooCommerce
• 3 طرق لإزالة الصور المصغرة في WordPress
• كيفية إضافة أحجام صور مخصصة في WordPress