Storefront هو موضوع رائع لإطلاق متجر على الإنترنت. إنها تحظى بشعبية بسبب بساطتها وتوافقها مع WooCommerce. لكن أحد العوائق الرئيسية هو عدم وجود قسم منزلق مدمج. نظرًا لأنها واحدة من أكثر الميزات المطلوبة لمنتديات الدعم في هذا البرنامج التعليمي ، سنشرح كيفية إضافة شريط تمرير كامل العرض إلى الصفحة الرئيسية لـ StoreFront باستخدام المكون الإضافي Storefront Add Slider.
باستخدام Storefront Add Slider ، يمكنك إضافة أي رمز قصير منزلق (Meta Slider ، و Smart Slider 3 ، و Soliloquy ، و Revolution Slider ، و LayerSlider القصير) إلى صفحة واجهة المتجر الأمامية الخاصة بك. دعونا نرى كيف يمكننا إضافة شريط تمرير كامل للصفحة الرئيسية. سنستخدم Meta Slider ولكن نفس العملية ستطبق على أي مكون إضافي منزلق.
ما الذي سأحتاجه لإكمال هذا البرنامج التعليمي
موضوع وورد بريس واجهة المتجر
Storefront إضافة Slider plugin
أي مكون إضافي من Slider من اختيارك (Meta Slider ، و Smart Slider 3 ، و Soliloquy ، و Revolution Slider ، و LayerSlider)
الخطوة 1: إنشاء شريط تمرير باستخدام البرنامج المساعد Meta Slider
قم بتنزيل وتثبيت Meta Slider
انتقل إلى لوحة القيادة> MetaSlider> MetaSlider
انقر فوق جديد
انقر فوق إضافة شريحة وحدد صورة من مكتبة الوسائط الخاصة بك
اكتب تعليق صورة شريط التمرير
انقر فوق حفظ وانسخ الرمز المختصر لشريط التمرير (على سبيل المثال: [metaslider id = 1703] )
الخطوة 2: تثبيت Storefront إضافة شريط التمرير
اتبع هذه الخطوات لتثبيت المكون الإضافي Storefront Add Slider:
قم بتنزيل وتثبيت Storefront Add Slider
انتقل إلى Dashboard> Appearance ثم انقر فوق Customize
انتقل إلى الصفحة الأمامية الثابتة
الصق الرمز القصير المنزلق في حقل Slider Shortcode
انقر فوق حفظ ونشر
استخدام ملحقات أخرى
باستخدام هذه العملية ، يمكنك عرض أي شريط تمرير على الصفحة الرئيسية لواجهة المتجر. هناك الكثير من الإضافات أشرطة التمرير التي يمكنك تجربتها. الشيء المهم هو اختيار مكون إضافي منزلق يلبي احتياجاتك وخفيف الوزن. لأنك تريد في نهاية المطاف أن يتم تحميل موقع الويب الخاص بك بشكل أسرع وتقديم المحتوى للمستخدمين في أسرع وقت ممكن.
إذا كانت لديك أي أسئلة أو أي شيء تريد إضافته ، فيرجى إخبارنا بذلك في التعليقات.
المنشورات ذات الصلة:
موضوع واجهة المتجر: كيفية تخصيص تخطيط الصفحة الرئيسية
موضوع واجهة المتجر: كيفية تثبيته وتكوينه
موضوع واجهة المتجر: كيفية إزالة فتات الخبز
WooCommerce + Jetpack: استبعاد الصورة من “Lazy Load”
WooCommerce + Storefront: إخفاء عنوان “الصفحة الرئيسية” @ الصفحة الرئيسية
WooCommerce: عرض فئات المنتجات الفارغة
مظهر واجهة المتجر: تحرير أو إزالة اعتمادات التذييل
WooCommerce: قائمة التنقل الأفقية في حسابي
أين تضيف هذا المقتطف؟
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
هل هذا المقتطف (لا يزال) يعمل؟
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
هل تحتاج إلى مساعدة في WooCommerce؟
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!