تخصيص WooCommerce: أفضل الممارسات

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

لماذا تعتبر أفضل الممارسات مهمة

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

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

• إضافة أو أدوات مدمجة — للتغييرات البسيطة في الـ CSS أو الـ PHP
• قالب فرعي (Child theme) — للتغييرات الكبيرة في القوالب (Templates) أو الهيكلية

استخدم إضافة أو أدوات مدمجة للتغييرات البسيطة

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

إضافة CSS لتغييرات الأنماط

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

• القوالب الكلاسيكية: اذهب إلى المظهر > تخصيص > CSS إضافي (Appearance > Customize > Additional CSS) في لوحة تحكم ووردبريس. أضف قواعد الـ CSS المخصصة وانقر فوق نشر (Publish).
• قوالب الكتل (Block themes): اذهب إلى المظهر > محرر (Appearance > Editor)، افتح لوحة الأنماط (Styles)، واختر CSS إضافي (Additional CSS) لإضافة الأنماط المخصصة.

الطريقتان تخزنان أكواد الـ CSS بشكل مستقل عن ملفات القالب، لذا يتم الاحتفاظ بتغييراتك عند تحديث القالب.

مثال: تغيير لون رابط التنقل

يوضح هذا المثال كيفية العثور على قاعدة CSS باستخدام أدوات المطور في متصفحك وتطبيق تغيير مخصص باستخدام لوحة CSS الإضافية. يتضمن هذا القسم فحص محددات (selectors) الـ CSS في المتصفح وكتابة قواعد الـ CSS.

لتغيير لون رابط التنقل:

1. 1. انقر بزر الماوس الأيمن على عنصر رابط التنقل في متصفحك واختر فحص (Inspect). تُفتح أدوات المطور في المتصفح وتُعرض الأنماط المطبقة على العنصر.
   2. في لوحة الأنماط (Styles)، حدد قواعد CSS الخاصة بروابط التنقل. على سبيل المثال، في قالب Storefront، تبدو الأنماط الافتراضية هكذا:
      .main-navigation ul li a { color: #ffffff; }
.main-navigation ul li a:hover { color: #e6e6e6; }
   3. اذهب إلى المظهر > تخصيص > CSS إضافي في لوحة تحكم ووردبريس. الصق قواعد الـ CSS وغير قيم الألوان. على سبيل المثال، لجعل لون الرابط أحمر ولون التحويم (hover) أبيض:
      .main-navigation ul li a { color: red; }
.main-navigation ul li a:hover { color: white; }
   4. انقر فوق نشر (Publish) وحدث الصفحة. يظهر لون رابط التنقل الآن باللون الأحمر، ومرور مؤشر الماوس فوق الرابط يحوله إلى الأبيض.

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

قصاصات الكود (Code Snippets) لتغييرات PHP

تيح لك إضافة Code Snippets إضافة قصاصات PHP إلى موقعك بدلاً من لصق الكود في ملف functions.php. يتضمن هذا القسم كتابة وإدارة أكواد PHP.

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

استخدم قالباً فرعياً (Child theme) للتغييرات الكبيرة

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

استخدم قالباً فرعياً مدفوعاً

تفرغ بعض القوالب قوالب فرعية يمكنك تثبيتها وتنشيطها لتغيير مظهر القالب الأساسي دون كتابة كود.

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

إنشاء قالب فرعي مخصص

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

لإنشاء قالب فرعي مخصص، اتبع دليل إعداد واستخدام قالب فرعي. للحصول على معلومات عامة حول كيفية عمل القوالب الفرعية، راجع وثائق WordPress.org حول القوالب الفرعية.

الموارد

توفر الموارد التالية إرشادات إضافية حول تخصيص ووردبريس وووكامرس بأمان:

• وثائق القوالب الفرعية في WordPress.org
• دليل تخصيص وووكامرس للمطورين
• إعداد واستخدام قالب فرعي

الأسئلة والدعم

هل لا تزال لديك أسئلة وتحتاج إلى مساعدة؟

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