كيفية تغيير لون القائمة WooCommerce Storefront
نشرت: 2020-10-02
يستغرق إعداد متجر WooCommerce الخاص بك الكثير من وقتك وإيجاد السمة المناسبة يمثل تحديًا كبيرًا أيضًا. ومع ذلك ، أنشأ منشئو WooCommerce موضوع Storefront المتاح مجانًا وهو مرن جدًا للتخصيص. يستغرق الأمر عدة ساعات لإنشاء تصميم تخطيط مثالي سيحبه المستخدمون. قد ترغب في تغيير لون القائمة أو لون بعض العناصر الأخرى التي تزعجك.
WooCommerce Storefront تغيير لون القائمة
ومع ذلك ، من السهل جدًا إجراء هذه التخصيصات باستخدام خيار "تخصيص" ضمن "المظهر" في لوحة القيادة. يتيح لك هذا القسم تغيير السمة الخاصة بك بسهولة بعدة طرق يسمح بها مؤلف القالب. ومع ذلك ، لا يمكن لمؤلف الموضوع التفكير في كل شيء ، ويمكن أن يندرج تغيير لون القائمة ضمن هذه الفئة.
يتم حفظ CSS المخصص بشكل منفصل اعتمادًا على السمة والخدعة هي فقط معرفة CSS الذي يجب استخدامه. في هذا البرنامج التعليمي الموجز ، سوف أطلعك على كيفية القيام بذلك. علاوة على ذلك ، ستتمكن من تغيير لون أي عنصر في مظهر واجهة المتجر.
خطوات تغيير لون القائمة لموضوع واجهة المتجر
فيما يلي الخطوات البسيطة التي يجب عليك اتباعها:
1. حدد العنصر الذي تريد تغييره
من السهل جدًا قول "تغيير لون القائمة". ومع ذلك ، فإن تنفيذها شيء مختلف. لكل سمة طريقة مختلفة للإشارة إلى عناصرها ، لذا يوصى باستخدام الخيار الصحيح حتى يعمل تصميم CSS. هذا يعني أنه قبل أن نتمكن من تغيير أي شيء ، يجب أن نتعامل مع ما نريد تغييره.
ما عليك سوى النقر بزر الماوس الأيمن فوق المنطقة التي تريد تغييرها في متصفح مثل Chrome أو Firefox والنقر فوق "فحص العنصر" مثل هذا: 
بعد النقر فوق ذلك ، سيؤدي ذلك إلى إظهار وحدة التحكم التي تحتوي على عناصر مختلفة من الصفحة على اليسار وإعدادات تلك العناصر على اليمين. أنت الآن بحاجة إلى العثور على العنصر المسؤول عن تغيير اللون. 
لتحديد العنصر ، انقر فوق منتقي العناصر كما هو موضح في لقطة الشاشة. ثم قم بتوجيه المؤشر إلى عنصر القائمة للتحقق من التصميم. ابحث عن كلمات مثل "background" أو "background-color". عندما تجدها ، قم بإلغاء تحديد علامة "التجزئة" الموجودة بجانبها وتحقق منها لمعرفة ما إذا كانت تؤدي إلى تغيير في لون القائمة. إذا لم يتغير اللون ، فهذا ليس اللون الذي تبحث عنه. 
2. اختر اللون المطلوب
الآن بعد أن قمت بالعمل الشاق ، فإن الخطوة التالية هي تغيير اللون. يمكن القيام بذلك عن طريق إلغاء تحديد خيار اللون الموجود والنقر بالقرب من قوس الإغلاق "}". سيسمح لك ذلك بإدخال قاعدة CSS الخاصة بك. تحتاج إلى إدخال شيء مثل "لون الخلفية" ، واضغط على علامة التبويب ، واكتب اللون الذي تريده. 
في المثال الخاص بي ، قمت بتغيير اللون إلى اللون الأحمر ويمكنك أن ترى أن القائمة الموجودة أعلى وحدة التحكم قد تحولت إلى اللون الأحمر أيضًا. ومع ذلك ، من المهم ملاحظة أن هذا لا يؤدي إلى أي تغييرات فعلية على موقعك. إنه بمثابة تغيير مؤقت يمكن رؤيته في متصفحك. يسمح لك بتجربة محتوى قلبك. علاوة على ذلك ، يمكنك حتى أن تقرر وضع صورة كخلفية. الآن بعد أن أصبحت راضيًا عن التغييرات التي أجريتها ، فقد حان الوقت لجعلها دائمة.
3. استخراج القاعدة الجديدة
تحتاج إلى استخراج القاعدة عن طريق النقر بزر الماوس الأيمن عليها (على Firefox) مثل هذا واختيار "Copy Rule": 
ومع ذلك ، إذا كنت تستخدم Chrome ، فيمكنك فقط تحديد القاعدة بأكملها بالماوس ونسخ النص. الصقها في محرر واحذف جميع القواعد الحالية باستثناء القواعد الجديدة التي أضفتها للتو إن وجدت.
4. إضافة القاعدة
الجزء المتبقي هو نسخ / لصق في قسم " CSS إضافي " لواجهة تخصيص مظهر Storefront لديك. لفعل هذا:
- قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
- من قائمة لوحة التحكم ، انقر على قائمة المظهر> تخصيص .
- انتقل لأسفل إلى CSS إضافية في الشريط الجانبي الأيسر الذي يظهر.
- أضف قاعدة CSS كما هو موضح أدناه:
- انقر فوق نشر بمجرد اقتناعك بالتغييرات.
استنتاج
في هذا البرنامج التعليمي ، لقد أوضحت لك طريقة سهلة للغاية لتغيير لون القائمة لموضوع واجهة المتجر في أربع خطوات سهلة فقط. علاوة على ذلك ، يمكنك استخدام الإجراء أعلاه لتعديل مظهر أي عنصر على موقعك ، وليس فقط القوائم. الجزء الصعب هو مجرد العثور على العنصر الصحيح والقاعدة الصحيحة للتغيير.
بعد تحديد العنصر ، تحتاج إلى اختيار اللون المفضل. تسمح لك منطقة وحدة التحكم بإدخال قواعد CSS الخاصة بك ، لكن هذا لا يُجري أي تغييرات فعلية على موقعك. يسمح لك بتجربة القواعد الخاصة بك ومشاهدتها أثناء العمل قبل تنفيذها على موقعك.
بمجرد أن تكون راضيًا عن التغييرات ، تحتاج إلى استخراج القاعدة الجديدة ولصقها في قسم CSS الإضافي في واجهة التخصيص الخاصة بك في Storefront. إذا كنت معجبًا بالتغييرات ، فيمكنك النقر فوق نشر. الآن ، أنا متأكد من أنه يمكنك تغيير لون أي عنصر على موقعك!
مقالات مماثلة
- كيفية تغيير نص زر الخروج في WooCommerce [وضع الطلب]
- تصميم جدول HTML محدد وصف وأعمدة وخلايا
- كيفية إضافة فئة التنقل النشط بناءً على URL
- كيفية تغيير إشعار WooCommerce "تمت الإضافة إلى عربة التسوق"
- كيفية تغيير نص زر الإضافة إلى عربة التسوق في صفحة متجر WooCommerce
- كيفية حساب العناصر المضافة إلى عربة التسوق WooCommerce كود عدد
- كيفية إخفاء إجمالي سلة التسوق في WooCommerce أو إزالة صف الإجمالي الفرعي
- كيفية إنشاء صفحة منشورات WordPress منفصلة أو صفحة مدونة
- تصميم عناصر قائمة WordPress بشكل منفصل فئات CSS لقائمة WordPress
- كيفية تحديد الكل باستثناء آخر طفل في CSS »ليس CSS مثالًا ثانويًا
- 80+ حيل لتخصيص سمة WooCommerce لواجهة المتجر: دليل تخصيص مظهر واجهة المتجر النهائي
- كيفية تغيير حجم أيقونة عربة التسوق في سمة واجهة متجر WooCommerce
- كيفية تغيير حجم موضوع واجهة المتجر زر قائمة الجوال
- كيفية إعادة توجيه صفحة WordPress بدون ملحقات؟
- كيفية إضافة قائمة جديدة في قائمة صفحة حسابي في Woocommerce
- كيفية إزالة نص تذييل البريد الإلكتروني "المدمج مع WooCommerce"
- كيفية جعل قائمة Divi Mobile القابلة للتمرير حل الإصلاح السريع
- كيف استكمل التغيير في طلب النص في WooCommerce
- كيفية ضبط ارتفاع واجهة متجر WooCommerce للرأس