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

الطريقة 1: استخدام خاصية CSS المخصصة المضمنة في ووردبريس

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

1. الوصول إلى أداة التخصيص
   • سجّل الدخول وانتقل إلى المظهر > التخصيص.

2. حدد "CSS إضافية"
   • في الشريط الجانبي الأيسر، انقر فوق CSS إضافية. سيظهر مربع نص حيث يمكنك إدخال كود CSS الخاص بك.

3. أضف CSS المخصص الخاص بك
   • اكتب الرمز الخاص بك. على سبيل المثال

4. المعاينة والنشر
   • سترى معاينة مباشرة للتغييرات. بمجرد أن تكون سعيداً، انقر على النشر.

الأفضل لـ: تعديلات بسيطة، لا حاجة لتعديلات في ملف القالب.

الطريقة 2: استخدام ملف Style.css الخاص بالقالب الفرعي

من الأفضل استخدام قالب فرعي لـ style.css ملف لمزيد من التغييرات المهمة. بهذه الطريقة، تظل تعديلاتك آمنة حتى بعد تحديثات القالب.

1. تمكين سمة فرعية
   • إذا كنتَ لا تزال بحاجة إلى البدء في استخدام قالب فرعي أو تثبيته. إضافات مثل مهيئ القالب الطفل اجعل الأمر سهلاً.

2. الوصول إلى ملف Style.css
   • في المظهر > محرر ملف القالب، حدد القالب الفرعي الخاص بك style.css الملف.

3. إضافة CSS الخاص بك
   • أضف CSS المخصص الخاص بك في القاع للملف. مثال:

.custom-header مخصص { لون الخلفية: #2c3e50؛ اللون: #Tffff؛ }
.custom-button { لون الخلفية: #e74c3c؛ اللون: #ffffff؛ الحشو: 10px 20px؛ نصف قطر الحدود: 5px؛ }

4. حفظ التغييرات
   • انقر فوق تحديث الملف للحفظ.

الأفضل لـ: تغييرات أكبر في الأسلوب يجب أن تستمر بعد التحديثات.

الطريقة 3: إضافة CSS مخصص باستخدام مكون إضافي

إذا كنتَ تفضِّل تجنُّب تحرير الملفات أو القوالب الفرعية، يمكن للإضافات التعامل مع CSS المخصص. هذا أمر رائع لإدارة CSS عبر صفحات متعددة.

• CSS و JS مخصص بسيط و JS: خفيف الوزن وسهل إضافة CSS و JavaScript.
• رمز WPCode: يضيف CSS على مستوى الموقع أو لكل صفحة.
• CSS CSS للموقع: محرر مرئي للمبتدئين.

مثال باستخدام رمز WPCode:

1. تثبيت WPCode
   • انتقل إلى المكونات الإضافية > إضافة جديد المكوّن الإضافيابحث عن رمز WPCodeوتثبيتها وتفعيلها.

2. إنشاء مقتطف CSS جديد
   • توجه إلى مقتطفات التعليمات البرمجية > إضافة مقتطف. اختر مقتطف CSS.

3. اختر الموضع
   • لكي يعمل CSS على مستوى الموقع بالكامل، حدد عنوان على مستوى الموقع.

الأفضل لـ: إدارة CSS سهلة دون لمس ملفات القالب.

الطريقة 4: إضافة CSS مخصص عبر أدوات إنشاء الصفحات (Elementor، Divi)

عادةً ما تحتوي أدوات إنشاء الصفحات مثل Elementor و Divi على خيارات CSS مدمجة، مما يجعل من السهل إدارة الأنماط.

في Elementor:

1. تحديد العنصر والوصول متقدم الإعدادات
   • في Elementor، حدد عنصرًا، وانتقل إلى متقدم الإعدادات، وابحث عن CSS مخصص (إليمنتور برو).

2. أدخل رمز CSS
   • استخدم الكلمة المفتاحية المحدِّد لاستهداف العنصر. مثال:

محدِّد { لون الخلفية: #333؛ اللون: #fff؛ }

في ديفي:

1. الانتقال إلى خيارات القالب
   • انتقل إلى ديفي > خيارات القالب > CSS مخصص.

2. أدخل كود CSS واحفظه
   • أضف CSS المخصص الخاص بك واحفظه.

الأفضل لـ أولئك الذين يستخدمون أدوات إنشاء الصفحات بالفعل مع سهولة الوصول إلى CSS مخصص.

الطريقة 5: إضافة CSS مباشرةً عبر بروتوكول نقل الملفات أو محرر التعليمات البرمجية

إذا كنت معتاداً على استخدام FTP وتريد تحكماً كاملاً، يمكنك تحرير ملفات CSS مباشرة على الخادم.

الخطوات:

1. الاتصال عبر FTP
   • استخدم عميل FTP (مثل FileZilla) للاتصال بموقعك.
2. انتقل إلى مجلد السمة
   • انتقل إلى wp-content/themes/your-child-theme/ وافتح style.css.

3. التحرير والتحميل
   • أضف CSS المخصص الخاص بك، واحفظ، وارفعه.

الأفضل لـ: المستخدمون المتقدمون الذين يحتاجون إلى تحكم كامل.

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

1. لماذا لا يعمل CSS المخصص الخاص بي؟

امسح المتصفح ذاكرة التخزين المؤقت أو أي إضافات للتخزين المؤقت للموقع، لأن التخزين المؤقت قد يحظر التحديثات.

2. كيف يمكنني منع فقدان CSS أثناء التحديثات؟

استخدم سمة فرعية أو الإضافة لتخزين CSS بدلًا من تعديل ملفات القالب الأصلي.