يعد Storefront أحد أكثر السمات مرونة وقابلية للتوسع عندما يتعلق الأمر بإطلاق متجر WooCommerce باستخدام وورد بريس.
نظرًا لبنية الكود النظيف ، فقد أصبحت ذات شعبية كبيرة بين المستخدمين ويستخدم حاليًا أكثر من 100000 متجر على الإنترنت Storefront كموضوع وورد بريس الخاص بهم.
هناك طريقتان يمكنك من خلالهما تثبيت سمة Storefront ، إما من خلال البحث عن السمة من لوحة معلومات WP أو تحميل السمة يدويًا.
أسرع طريقة لتثبيت Storefront هي من خلال لوحة تحكم وورد بريس. اتبع هذه الخطوات لتثبيت Storefront عبر لوحة تحكم وورد بريس.
انتقل إلى المظهر> السمات> إضافة جديد
اكتب ” واجهة المحل ” في مربع البحث واضغط على إدخال.
تحوم فوق لقطة شاشة واجهة المتجر.
حدد الزر ” تثبيت “.
انقر فوق تنشيط
قم بتنزيل أحدث إصدار من Storefront من موقع وورد بريس.org
انتقل إلى المظهر> السمات> إضافة جديد
انقر فوق تحميل السمة واختر الملف المضغوط الذي تم تنزيله مسبقًا.
انقر فوق التثبيت الآن
انقر فوق تنشيط
يحتوي Storefront على نموذج مدمج للصفحة الرئيسية مدروس جيدًا. سيساعد هيكلها النظيف جمهورك في العثور على المنتجات التي تبيعها بسهولة.
هناك 6 أقسام في قالب الصفحة الرئيسية الافتراضي لواجهة المتجر. ولكن يمكنك إضافة أو حذف القسم حسب حاجتك.
أقسام الصفحة الرئيسية الافتراضية:
محتوى الصفحة
فئات المنتجات
المنتجات الأخيرة
منتجات مميزة
المنتجات الشعبية
المنتجات المعروضة للبيع
أفضل المنتجات مبيعا
لإعداد قالب الصفحة الرئيسية ، اتبع الخطوات التالية:
انتقل إلى لوحة التحكم -> الصفحات وأنشئ صفحة بعنوان ” الصفحة الرئيسية ” أو أي شيء تريده.
أضف أي محتوى ترحيبي يعجبك ، والذي سيتم عرضه فوق المنتجات.
على الجانب الأيمن ، ستجد مربعًا بعنوان ” سمات الصفحة “
حدد ” الصفحة الرئيسية ” من القائمة المنسدلة ” النموذج “.
انقر فوق نشر أو تحديث لحفظ التغيير.
بعد نشر الصفحة ، يجب عليك الآن عرض هذه الصفحة الرئيسية كصفحة أولى لموقع الويب الخاص بك. لذلك أي شخص يهبط على موقع الويب الخاص بك يرى هذه الصفحة أولاً. لإعداد هذا ، اتبع الخطوات التالية:
انتقل إلى لوحة التحكم> الإعدادات> القراءة
تحت شاشات عرض صفحتك الرئيسية ، حدد صفحة ثابتة (حدد أدناه)
حدد صفحة تعيين قالب الصفحة الرئيسية السابقة في القائمة المنسدلة للصفحة الرئيسية .
انقر فوق حفظ التغييرات
يمكنك تغيير ترتيب أقسام الصفحة الرئيسية لواجهة المتجر باستخدام الخطافات أو باستخدام مكون إضافي يسمى التحكم في الصفحة الرئيسية. اتبع الخطوات أدناه لإعادة ترتيب أقسام صفحتك الرئيسية:
قم بتنزيل وتثبيت Homepage Control
انتقل إلى المظهر -> تخصيص -> التحكم في الصفحة الرئيسية
قم بسحب وإعادة ترتيب الأقسام حسب حاجتك.
انقر فوق حفظ ونشر لحفظ التغييرات.
في موضوع Storefront ، يمكنك عرض القائمة في 3 مواقع.
القائمة الأساسية – تظهر أسفل شعار الموقع مباشرة.
القائمة الثانوية – بجانب الشعار بالقرب من مربع البحث.
قائمة الأجهزة المحمولة – قائمة الأجهزة المحمولة.
بشكل افتراضي ، إذا لم يتم تعيين قائمة أساسية معينة ، فسيعرض وورد بريس جميع صفحاتك كقائمة أساسية. أحيانًا يؤدي ذلك إلى إرباك المستخدمين ويمنحهم صعوبة في معرفة كيفية ظهور هذه الصفحات في القائمة.
انتقل إلى لوحة المسؤول ثم المظهر> القوائم
في الجزء العلوي ستجد حقل اسم القائمة. اكتب اسم القائمة الخاصة بك هنا.
من الجانب الأيسر ، انقر فوق Pages (على افتراض أنك تريد إضافة صفحات إلى القائمة)
انقر فوق عرض الكل للحصول على قائمة بجميع الصفحات المنشورة.
حدد الصفحات التي تريد ظهورها في القائمة.
بعد تحديد الصفحة ، انقر فوق الزر “إضافة إلى القائمة”.
قم بسحب وإسقاط عنصر القائمة لإعادة ترتيبها حسب رغبتك.
انقر فوق حفظ القائمة
بعد إنشاء القائمة ، قم بتعيين القائمة إلى الموقع الذي تريد عرضها فيه. انتقل إلى المظهر> القوائم> إعدادات القائمة وتحقق من الموقع من خانة اختيار موقع العرض .
انتقل إلى لوحة المسؤول ثم المظهر> القوائم
انقر فوق خيارات الشاشة من أعلى اليسار وتحقق من فئات المنتجات
الآن في الجزء الأيمن ، ستظهر علامة تبويب فئات المنتجات.
انقر فوق علامة التبويب فئات المنتجات للتوسيع ، وحدد الفئات
بعد التحديد ، انقر فوق الزر ” إضافة إلى القائمة” .
قم بسحب وإسقاط عنصر القائمة لإعادة ترتيبها حسب رغبتك.
انقر فوق حفظ القائمة
يسمح لك Storefront بعرض ست مناطق عناصر واجهة المستخدم في 3 مناطق مختلفة.
الشريط الجانبي – يسار أو يمين محتوى الموقع الرئيسي ،
أسفل العنوان – أسفل رأس الموقع مباشرةً وفوق المحتوى.
عمود التذييل 1 – ناحية التذييل
عمود التذييل 2 – ناحية التذييل
عمود التذييل 3 – ناحية التذييل
عمود التذييل 4 – منطقة التذييل
انتقل إلى لوحة التحكم> المكونات الإضافية> إضافة جديد > بحث عن المكونات الإضافية
ابحث عن “WooCommerce”.
انقر فوق التثبيت الآن .
انقر فوق تنشيط .
بعد تنشيط WooCommerce ، سيُطلب منك تثبيت WooCommerce باستخدام معالج. سيهتم بجميع الإعدادات الأولية. وهي مقسمة إلى 6 أجزاء.
إعداد الصفحة – يقوم تلقائيًا بتهيئة الصفحات الأساسية (المتجر ، عربة التسوق ، الخروج ، حسابي).
موقع المتجر – تكوين موقع المتجر والعملة وضريبة المبيعات
الشحن – تكوين وحدة الوزن ووحدة الأبعاد
المدفوعات – إعداد بوابة الدفع.
السمة – ثبّت سمة متوافقة مع WooCommerce.
جاهز – (اختياري) اسمح لـ WooCommerce بجمع معلومات الاستخدام.
يمكنك كل هذه الإعدادات وقتما تشاء من لوحة معلومات WooCommerce.
انتقل إلى لوحة تحكم وورد بريس
انقر فوق المنتجات> إضافة جديد
اكتب اسم المنتج أو العنوان في حقل اسم المنتج .
اكتب وصف المنتج الخاص بك في المحرر أدناه.
الآن عليك تحميل صورة مميزة لمنتجك وصورة إضافية إلى معرض المنتج.
ستجد واحدًا على اليمين مربعًا بعنوان صورة المنتج ومعرض المنتج
قم بتحميل الصورة المميزة إلى صورة المنتج والصور الإضافية لمعرض المنتج
انقر فوق نشر .
لإعداد سعر المنتج ، انتقل إلى لوحة المعلومات> المنتجات وحدد أي منتج. ثم قم بالتمرير لأسفل إلى قسم بيانات المنتج. فيما يلي وصف موجز لجميع إعدادات قسم بيانات المنتج:
منتج بسيط : منتج واحد بسيط.
المنتج المجمع : منتج يمثل جزءًا من مجموعة.
المنتج الخارجي / التابع : المنتج المدرج في متجرك ولكن المنتج الفعلي يباع في مكان آخر.
منتج متغير : منتج متنوع (الحجم ، الألوان)
المنتج الافتراضي : منتج لا يتطلب الشحن.
منتج قابل للتنزيل : منتج يتعين عليك توفير ملف قابل للتنزيل فيه.
السعر العادي : سعر المنتج العادي.
سعر البيع : سعر المنتج المخفض.
SKU : وحدة الاحتفاظ بالمخزون (SKU) تتعقب المنتجات
إدارة المخزون : تمكين إدارة المخزون
حالة المخزون : ما إذا كان المنتج في المخزن أم لا.
يُباع منفردًا: يمكن بيعه بترتيب واحد.
الوزن: وزن المنتج.
الأبعاد: الطول والعرض والارتفاع للمنتج.
فئة الشحن: مجموعة منتجات من نوع مشابه لطريقة شحن معينة.
Upsells : اعرض المنتجات ذات الصلة أسفل صفحة تفاصيل المنتج.
عمليات البيع المتقاطعة : اعرض المنتجات ذات الصلة في صفحة عربة التسوق.
السمات : حدد السمة العالمية لمنتجاتك.
ملاحظة الشراء : ملاحظة لإرسال العميل بعد إتمام الشراء.
ترتيب القائمة : موضع طلب مخصص لهذا المنتج.
تمكين المراجعات : تمكين أو تعطيل مراجعات المنتج.
اتبع هذه الخطوات لإضافة الشعار وعرضه على موقع الويب الخاص بك:
1. انتقل إلى مدير وورد بريس ثم المظهر> تخصيص
2. ثم انتقل إلى Site Identity> Logo
3. انقر فوق Select Logo لتحميل صورة شعارك. (حجم الصورة الموصى به: 470 بكسل × 110 بكسل)
4. انقر فوق نشر.
اتبع هذه الخطوات لإضافة وعرض الأيقونة المفضلة إلى موقع الويب الخاص بك:
1. انتقل إلى مدير وورد بريس ثم المظهر> تخصيص
2. ثم انتقل إلى Site Identity> Site Icon
3. انقر فوق Select Image لتحميل صورة شعارك. (حجم الصورة الموصى به: 512 بكسل × 512 بكسل)
4. انقر فوق نشر.
انتقل إلى المظهر> تخصيص> أداة تخصيص المدونة> أرشيفات النشر
حدد التخطيط من تخطيط أرشيف المشاركة
انقر فوق نشر
انتقل إلى المظهر> تخصيص> أداة تخصيص المدونة> أرشيفات النشر
حدد رقم العمود (العرض الكامل ، العمود 2 ، العمود 3 و 4 العمود) من عمود أرشيف المشاركة
انقر فوق نشر
انتقل إلى المظهر> تخصيص> أداة تخصيص المدونة> منشور واحد
حدد تخطيطًا من تخطيط منشور واحد
انقر فوق نشر
انتقل إلى المظهر> التخصيص> الأنماط العامة> الطباعة
حدد الخط من اقترانات الخطوط
انقر فوق نشر
انتقل إلى المظهر> تخصيص> WooCommerce> صفحة المتجر – قوائم المنتجات
حدد التخطيط من Product Archive Layout
انقر فوق نشر
انتقل إلى المظهر> تخصيص> WooCommerce> صفحة المتجر – قوائم المنتجات
حدد التخطيط من Product Archive Layout
انقر فوق نشر
موضوع واجهة المتجر: كيفية تخصيص تخطيط الصفحة الرئيسية
مظهر واجهة المتجر: كيفية إضافة منزلق بعرض كامل
موضوع واجهة المتجر: كيفية إزالة فتات الخبز
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 في حالة حدوث خطأ!
