صور المنتجات ومعارض الصور تُستخدم صور المنتجات ومعارض الصور لعرض منتجاتك للعملاء. تساعد الصور على بناء ثقة العملاء، وتجعل عرض المنتج أكثر جاذبية من الناحية البصرية، وتساهم في زيادة المبيعات من خلال جذب الزوار من المصادر الخارجية مثل محركات البحث ووسائل التواصل الاجتماعي حيث يتم عرض الصور.
في هذه الصفحة ستتعرف على:
- الأنواع المختلفة من صور WooCommerce.
- كيفية إضافة صور المنتجات ومعارض الصور.
- أين تجد إعدادات أحجام صور المنتجات.
- كيفية إضافة الصور ومقاطع الفيديو وترتيبها وإزالتها من معارض المنتجات.
أنواع صور المنتجات
تُقاس أبعاد الصور بالبكسل، ويُذكر العرض أولاً: فالصورة ذات أبعاد 800 × 800 بكسل يبلغ عرضها 800 بكسل وارتفاعها 800 بكسل.
يستخدم WooCommerce ثلاثة أنواع من صور المنتجات لمواضع وأغراض مختلفة:
- صورة المنتج الرئيسية – وهي أكبر صورة، وتشير إلى الصورة الرئيسية أو الصورة المميزة في صفحة تفاصيل المنتج الفردية.
- صور الكتالوج – وهي صور متوسطة الحجم تظهر في قوائم المنتجات، مثل صفحة المتجر، وصفحات فئات المنتجات، والمنتجات ذات الصلة، والمنتجات المقترحة للترقية، والمنتجات التكميلية.
- صور المنتجات المصغرة – وهي أصغر الصور المستخدمة في سلة التسوق، والأدوات، وكذلك صور المعرض المصغرة الاختيارية أسفل صورة المنتج الرئيسية.
الحجم الموصى به: قم برفع صور لا تقل أبعادها عن 800 × 800 بكسل. يظهر هذا الحجم بشكل جيد كصورة المنتج الرئيسية وصورة الكتالوج والصورة المصغرة، كما أن الصور الأكبر تكون أفضل للمنتجات التي تحتوي على تفاصيل دقيقة. تعمل الصور الأصغر أيضاً، لكنها أداة مهمة للبيع، لذلك استخدم أعلى جودة متاحة لديك. يقوم WooCommerce بإنشاء أحجام العرض تلقائياً؛ وإذا بدت صورك غير واضحة أو ضبابية في واجهة المتجر، راجع حل مشكلة صور المنتجات غير الواضحة.
Adding صور المنتجات and Galleries
Adding product images and galleries are options available on the right-hand side when adding أو editing a product in your sإلىre from WooCommerce > المنتجات.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
إعدادات صور المنتجات في أداة التخصيص
يمكنك تغيير عرض صورة المنتج الرئيسية، وعرض الصورة المصغرة، وطريقة قص الصور المصغرة من خلال المظهر > التخصيص > WooCommerce > صور المنتجات. See إعدادات صور المنتجات في أداة التخصيص لمعرفة تأثير كل خيار.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
إذا كان قسم صور المنتجات غير موجود في أداة التخصيص، فهناك احتمالان: إما أن القالب الخاص بك يحدد أحجام الصور الخاصة به، وبالتالي تكون الخيارات مخفية، أو أن موقعك يستخدم قالب بلوكات، مما يؤدي إلى إخفاء قائمة التخصيص في هذه الحالة. عند استخدام قالب بلوكات، افتح أداة التخصيص مباشرة من yourdomain.com/wp-admin/cusإلىmize.php. يمكن لمطوري القوالب تحديد أحجام الصور أو إلغاءها من داخل القالب نفسه؛ راجع تحديد دعم WooCommerce في دليل القوالب الكلاسيكية.
نطاق الدعم:
لا يمكننا تقديم الدعم للتخصيصات وفقاً لـ سياسة الدعم. إذا كنت بحاجة إلى تخصيص جزء من الكود أو توسيع وظائفه، فنوصي بالعمل مع شريك وكالة Woo أو مطور WooCommerce على Codeable.
صورة المنتج
إن صورة المنتج هي الصورة الرئيسية لمنتجك، ويتم إعادة استخدامها بأحجام مختلفة في جميع أنحاء متجرك.
اختر تعيين صورة المنتج.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
اختر صورة موجودة من مكتبة الوسائط الخاصة بك أو ارفع صورة جديدة.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
إزالة وتحرير صورة المنتج إذا كنت ترغب في تغييرها، حسب الحاجة.
تتم إضافة صورة المنتج وإزالتها وتحريرها بالطريقة نفسها المستخدمة للصور المميزة في المنشورات والصفحات.
معارض المنتجات
إضافة صور إلى معرض المنتجات
تعرض معارض المنتجات جميع الصور المرتبطة بالمنتج من خلال مربع معرض المنتجات في شاشة تعديل المنتج.
لإنشاء معرض، اختر إضافة صور إلى معرض المنتجات في مربع معرض المنتجات ، واختر صورة واحدة أو أكثر من مكتبة الوسائط أو ارفع صوراً جديدة، ثم اختر إضافة إلى المعرض.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
تكون صورة المنتج دائماً العنصر الأول في المعرض الموجود في صفحة المنتج، لذلك لا تحتاج إلى إضافتها إلى المعرض مرة أخرى.
إعادة ترتيب الصور في معرض المنتجات
يمكن إعادة ترتيب الصور في معرض المنتجات بسهولة باستخدام السحب والإفلات. ما عليك سوى إعادة ترتيب الصور عن طريق تحريكها إلى المواضع المطلوبة.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
إزالة الصور من معرض المنتجات
لإزالة صورة من معرض المنتجات، مرر مؤشر الماوس فوق الصورة واختر علامة X (حذف الوسائط). يؤدي ذلك إلى إزالة الصورة من المعرض مع الاحتفاظ بالملف في مكتبة الوسائط الخاصة بك.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
إضافة مقاطع فيديو إلى معرض المنتجات
بدءاً من WooCommerce 11.1، يمكنك إضافة مقاطع فيديو إلى معرض المنتجات بجانب الصور. يتم تشغيل مقاطع الفيديو تلقائياً وبدون صوت داخل المعرض، لذلك فهي مناسبة بشكل أفضل للمقاطع القصيرة التي تعرض المنتج أثناء الاستخدام، أو من زوايا مختلفة، أو أثناء الحركة.
هذه الميزة في الإصدار التجريبي (Beta) وهي معطلة افتراضياً. قبل البدء:
- ارفع الفيديو أولاً. تأتي مقاطع فيديو المعرض من مكتبة الوسائط الخاصة بموقعك. لا يتم دعم مقاطع الفيديو المضمنة من YouTube أو Vimeo أو خدمات الاستضافة الأخرى.
- استخدم تنسيقاً مناسباً للويب. يمكنك إضافة أي نوع من الفيديوهات يسمح موقعك برفعه، ولكن تنسيق MP4 (H.264) يعمل على أكبر نطاق من المتصفحات. وينطبق حد حجم الرفع الذي يحدده مزود الاستضافة الخاص بك.
- احتفظ بصورة كصورة المنتج الرئيسية. يمكن إضافة مقاطع الفيديو إلى معرض المنتجات فقط، ولا يمكن تعيينها كصورة المنتج الرئيسية.
- أثناء وجود الميزة في الإصدار التجريبي، لا يتم تضمين مقاطع الفيديو في معارض المتغيرات، أو استيراد وتصدير المنتجات بصيغة CSV، أو REST API.
لتفعيل مقاطع فيديو معرض المنتجات:
- اذهب إلى WooCommerce > الإعدادات > متقدم > الميزات وانتقل إلى الميزات التجريبية.
- فعّل مقاطع فيديو معرض المنتجات.
- اختر حفظ التغييرات.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
بعد التفعيل، يتغير الرابط الموجود في مربع معرض المنتجات من إضافة صور إلى معرض المنتجات إلى إضافة وسائط إلى معرض المنتجات.
لإضافة فيديو:
- افتح المنتج الذي تريد تعديله، أو أضف منتجاً جديداً.
- في مربع معرض المنتجات box, select إضافة وسائط إلى معرض المنتجات.
- في مربع الوسائط المكتبة, اختر الفيديو وأي صور تريد إضافتها، ثم اختر إضافة إلى المعرض.
- اختر تحديث أو نشر لحفظ المنتج.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
يظهر الفيديو في مربع معرض المنتجات كمعاينة صغيرة، ضمن القائمة نفسها التي تحتوي على صور المعرض. يمكنك إعادة ترتيبه بالسحب، أو تمرير مؤشر الماوس فوقه واختيار علامة X لإزالته من المعرض. تؤدي إزالة الفيديو من المعرض إلى الاحتفاظ بالملف في مكتبة الوسائط الخاصة بك.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="Enlarge"></butإلىn>
تعيين صورة غلاف للفيديو. يستخدم WooCommerce الصورة المميزة للفيديو كصورة مصغرة له في المعرض ويعرضها حتى يصبح الفيديو جاهزاً للتشغيل. لتعيين صورة، اذهب إلى الوسائط > المكتبة, افتح الفيديو، واختر تحرير المزيد من التفاصيل, وقم بتعيين الصورة المميزة. أضف نصاً بديلاً لصورة الغلاف حتى تتمكن برامج قراءة الشاشة من وصف الفيديو؛ وبدونه يستخدم WooCommerce عنوان الفيديو، على سبيل المثال “Video: Backpack side pockets.” إذا لم يكن للفيديو صورة غلاف، يعرض WooCommerce معاينة يتم إنشاؤها من الفيديو نفسه.
كيف يرى المتسوقون مقاطع فيديو المعرض. في صفحة المنتج، يتم تشغيل فيديو المعرض تلقائياً وبدون صوت وبشكل متكرر، من دون عناصر تحكم بالتشغيل، لذلك احرص على أن تكون المقاطع قصيرة وواضحة بذاتها. يتم تشغيل عنصر المعرض المحدد فقط؛ ويتوقف الفيديو مؤقتاً عندما ينتقل المتسوق إلى صورة أو فيديو آخر. تُفتح مقاطع الفيديو في نافذة العرض المكبرة مثل الصور. وهي مدعومة في معرض المنتجات الكلاسيكي، وبلوك معرض صور المنتج، وبلوك معرض المنتجات. وإذا كان القالب الخاص بك يستبدل قوالب معرض WooCommerce بقوالبه الخاصة، فقد لا تظهر مقاطع الفيديو حتى يضيف القالب دعماً لها.
إيقاف الميزة (إيقاف الميزة) يخفي فيديوهات المعرض من صفحة المنتج ومحرر المنتج دون حذفها. إذا أعدت تفعيلها، ستعود فيديوهاتك إلى نفس مواضعها في كل معرض.
عرض العميل (عرض العميل)
بمجرد إضافة صورة المنتج ومعرض الصور، يمكن للعملاء مشاهدتها مباشرة في متجرك.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="تكبير"></butإلىn>
التقريب (التقريب (Zoom)): عندما يحوم العميل مؤشر الماوس فوق الصورة، يتم تقريب المنطقة المجاورة لمؤشر الماوس لمساعدة العميل على رؤية التفاصيل الدقيقة. في المعرض الكلاسيكي يعتمد هذا على ثيم موقعك؛ أما في بلوك معرض الصور (Product Gallery block) فهي إعداد التقريب أثناء التحويم (التقريب أثناء التحويم)، وهي معطلة افتراضياً.
عرض الشاشة الكاملة (عرض الشاشة الكاملة): يمكن للعملاء تحديد الصورة (أو أيقونة العدسة المكبرة في المعرض الكلاسيكي) لفتحها بملء الشاشة على خلفية داكنة والتنقل بين صور المعرض. في بلوك معرض الصور، تُدار هذه الخاصية عبر إعداد فتح النافذة المنبثقة عند النقر (فتح النافذة المنبثقة عند النقر).
إيماءات اللمس تعمل أيضاً بكفاءة على الأجهزة المحمولة.
<butإلىn class="lightbox-trigger" type="butإلىn" aria-haspopup="dialog" data-wp-bind--aria-label="state.thisImage.triggerButإلىnAriaLabel" data-wp-init="callbacks.initTriggerButإلىn" data-wp-on--click="actions.showLightbox" data-wp-style--right="state.thisImage.butإلىnRight" data-wp-style--إلىp="state.thisImage.butإلىnTop" aria-label="تكبير"></butإلىn>
في معرض المنتجات الكلاسيكي، تكون ميزات التقريب، وعرض الشاشة الكاملة، وشريط التمرير (Slider) متاحة فقط عندما يدعمها الثيم الخاص بك. ثيم Sإلىrefront ومعظم الثيمات الكلاسيكية المتوافقة مع ووكومرس تدعم ذلك. أما ثيمات البلوكات (Block themes) فتستبدل ذلك بـ بلوك معرض الصور (Product Gallery block) الذي يحتوي على إعداداته الخاصة للتقريب والنوافذ المنبثقة.
تعطيل ميزة التقريب، أو عرض الشاشة الكاملة، أو شريط التمرير في المعرض الكلاسيكي يُعد تخصيصاً للثيم (إنme cusإلىmization) وليس إعداداً داخل ووكومرس. يمكن لمطور الثيم لديك إزالة دعم كل ميزة على حدة؛ راجع قسم ميزات معرض المنتجات في دليل مطوري الثيمات الكلاسيكية.
الأسئلة والدعم (الأسئلة والدعم)
هل لا تزال لديك أسئلة وتحتاج إلى مساعدة؟
هذه الوثائق تتعلق بإضافة ووكومرس الأساسية المجانية cأوe WooCommerce plugin، ويُقدم لها الدعم عبر منتديات المجتمع على WأوdPress.أوg. بالبحث في هذه المنتديات، ستجد غالباً أن سؤالك قد سُئل وجُوب عليه مسبقاً.
إذا لم تقم بإنشاء حساب على WأوdPress.أوg لاستخدام المنتديات، إليك الطريقة.
- إذا كنت تبحث عن توسيع الوظائف الأساسية المعروضة هنا، فنحن نوصي بمراجعة الإضافات المتاحة في سوق ووكومرس (سوق WooCommerce).
- هل تحتاج إلى دعم متقدم مستمر أو تخصيص (cusإلىmization) مخصص لووكومرس؟ عيّن شريكاً من شركاء وكالة Woo (شريك وكالة Woo).
- هل أنت مطور (developer) تبني تكامل أو إضافة خاصة بك في ووكومرس؟ تحقق من موارد المطورين (موارد المطورين).
