إضافة CSS مخصص في ووردبريس: الدليل الكامل

Custom CSS gives you control over your WordPress site’s style, letting you adjust everything from fonts and colors to layouts. Here’s a guide on how to add custom CSS to WordPress using different methods to fit your needs.

Method 1: Using WordPress’ Built-in Custom CSS Feature

WordPress has a built-in option for adding custom CSS right in the dashboard. It’s ideal for minor tweaks and beginner-friendly.

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

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

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

4. المعاينة والنشر
   • You’ll see a live preview of changes. Once you’re happy, click النشر.

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

Method 2: Using the Child Theme’s Style.css File

It’s better to use a child theme’s style.css ملف لمزيد من التغييرات المهمة. بهذه الطريقة، تظل تعديلاتك آمنة حتى بعد تحديثات القالب.

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

2. الوصول إلى ملف Style.css
   • في Appearance > Theme File Editor, select your child theme’s style.css الملف.

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

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

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

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

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

If you’d rather avoid editing files or child themes, plugins can handle custom CSS. This is great for managing CSS across multiple pages.

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

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

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

2. إنشاء مقتطف CSS جديد
   • توجه إلى Code Snippets > Add Snippet. اختر مقتطف CSS.

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

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

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

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

في Elementor:

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

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

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

في ديفي:

1. الانتقال إلى خيارات القالب
   • انتقل إلى Divi > Theme Options > Custom CSS.

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

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

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

If you’re familiar with FTP and want complete control, you can edit CSS files directly on the server.

الخطوات:

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

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

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

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

1. Why isn’t my custom CSS working?

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

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

استخدم سمة فرعية or plugin to store CSS rather than modifying the parent theme’s files.