4.4التخصيص: CSS إضافي & قالب فرعي
الأساسي في 30 ثانية
- CSS الإضافي يعدّل الألوان والمسافات أو الظهور دون المساس بالقالب.
- مفتّش المتصفح (F12) يكشف المحدد الصحيح؛ ونبقى دقيقين لعدم كسر الباقي.
- لا تعدّل أبدًا القالب الأب مباشرة: التحديثات تمحو كل شيء. للاستدامة، يستقبل القالب الفرعي التعديلات.
حالة مصغّرة مستمرة — ضبط دون كسر
يريد سمير تحسين زر التواصل في الورشة: لون أقرب إلى أزرق العلامة ومسافة أوسع. يستخدم المفتّش لإيجاد المحدد، ثم يضيف بضعة أسطر من CSS الإضافي. لاحقًا، سيطلب حسن تعديلًا أعمق في القالب: عندها سينشئ سمير قالبًا فرعيًا ليبقى العمل بعد التحديثات.
تكملة حالة 4.3 — المظهر يستحق ضبطًا دقيقًا ومستدامًا.
1. CSS الإضافي والمفتّش
يتيح CSS الإضافي (المظهر → تخصيص → CSS إضافي، أو محرر الموقع) ضبط المظهر دون تعديل ملفات القالب: لون زر، مسافة قسم، إخفاء عنصر زخرفي. إنه سريع وقابل للتراجع.
لاستهداف العنصر الصحيح، يُظهر مفتّش المتصفح (F12، نقرة يمين → فحص) الفئات والأنماط المطبقة. يكتب سمير محددًا دقيقًا — فئة بدل وسم عام — ويتحقق من المعاينة على الحاسوب والهاتف قبل النشر.
2. القالب الفرعي والاستدامة
يغيّر CSS المظهر لا الوظائف. لتعديل قالب أو إضافة وظائف، يجب المساس بالقالب — لكن ليس أبدًا بـالقالب الأب مباشرة: تحديثه التالي سيمحو التعديلات.
الحل المستدام هو القالب الفرعي: يرث من الأب ويستقبل ملفاتك (style.css، functions.php، القوالب). تستمر تحديثات الأب، وتبقى تغييراتك. لا ينشئ سمير قالبًا فرعيًا إلا عندما تتجاوز الحاجة CSS، لتجنب تعقيد غير ضروري.
🔎 مثال ملموس — ضبط زر التواصل (حالة سمير)
المفتّش: الزر .btn-contact.
CSS الإضافي:
.btn-contact { background:#21759b; padding:14px 28px; border-radius:8px; }
تحقق على الحاسوب + الهاتف.
→ لتعديل قالب صفحة المجموعات:
إنشاء قالب فرعي ونسخ القالب المراد تكييفه إليه.النتيجة: ضبط دقيق ومحفوظ.
الدرس: نختار الأداة حسب عمق التغيير.
مفردات القسم
- CSS إضافي
- قواعد أنماط تُضاف دون المساس بالقالب، عبر المخصص أو محرر الموقع.
مثال بسيط: تغيير لون زر التواصل.
ما ليس كذلك: تحرير style.css في القالب الأب مباشرة.
رد فعل: تعديل بصري صغير = CSS إضافي.
- قالب فرعي
- قالب يرث من الأب ويستقبل التعديلات المستدامة.
مثال بسيط: قالب صفحة مكيّف في الفرعي.
ما ليس كذلك: تعديل الأب وفقدان كل شيء عند التحديث.
رد فعل: تعديل مستدام = قالب فرعي.
- مفتّش المتصفح
- أداة (F12) تعرض HTML وCSS لعنصر.
مثال بسيط: إيجاد فئة الزر.
ما ليس كذلك: تخمين المحدد عشوائيًا.
رد فعل: افحص قبل التنسيق.
- محدد CSS
- هدف قاعدة نمط: فئة، معرّف أو وسم.
مثال بسيط: الفئة .btn-contact بدل وسم button.
ما ليس كذلك: استهداف كل وسوم button في الموقع.
رد فعل: الأكثر دقة ممكن.
- عدم تعديل الأب
- قاعدة ذهبية: التعديلات المباشرة على القالب الأب تمحوها التحديثات.
مثال بسيط: المرور عبر الفرعي أو CSS الإضافي.
ما ليس كذلك: تحرير الأب «مرة واحدة فقط».
رد فعل: لا الأب مباشرة أبدًا.
في التطبيق — ضبط المظهر بدقة وبشكل نظيف
- حدد عنصرًا تريد تعديله وافتح المفتّش (F12) لقراءة فئته.
- أضف قاعدة موجّهة في CSS الإضافي ولاحظ المعاينة.
- تحقق من العرض على الهاتف وعلى الصفحات الأخرى.
- إذا تجاوزت الحاجة التنسيق، أنشئ قالبًا فرعيًا للقوالب أو الوظائف.
نص جاهز للقول — شرح التخصيص النظيف (20 ثانية)
«يمكنني ضبط الألوان والمسافات دون المساس بالقالب، وبالتالي دون مخاطرة عند التحديثات. للتعديلات الأعمق، أستخدم قالبًا فرعيًا: تبقى تغييراتك حتى عندما يتطور القالب.»
ربط الطريقة بالطمأنينة المستقبلية للعميل.
نموذج نسخ ولصق — بطاقة التخصيص
العنصر المراد تعديله: _______________
المحدد الموجود (المفتّش): _______________
قاعدة CSS المضافة: _______________
تم التحقق على الحاسوب / الهاتف: نعم / لا
الحاجة إلى قالب فرعي: نعم / لا
الملفات المعنية: _______________لمسة خفيفة
بضع قواعد CSS تكفي: اللون، المسافة، الحجم.
قالب محدد
قالب فرعي لتكييف قالب صفحة.
وظائف مضافة
قالب فرعي لـ functions.php، وليس الأب أبدًا.
قالب FSE
الأنماط العامة وCSS الإضافي يغطيان معظم الاحتياجات.
✓ ممارسات جيدة
- افحص قبل كتابة CSS.
- ابقَ دقيقًا في المحددات.
- أنشئ قالبًا فرعيًا لكل تعديل عميق.
✗ أخطاء شائعة
- تعديل القالب الأب مباشرة.
- استخدام محددات واسعة جدًا.
- تكديس CSS بلا تعليقات وصعب الصيانة.
النقاط الأساسية
- CSS الإضافي يضبط المظهر بلا مخاطر.
- المفتّش يكشف المحدد الصحيح.
- القالب الأب لا يُعدَّل مباشرة أبدًا.
- القالب الفرعي يجعل التعديلات مستدامة.
تحدي 48 ساعة — طبّق غدًا
غيّر لون زر ومسافته عبر CSS الإضافي، بإيجاد المحدد في المفتّش. تحقق على الهاتف. 20 دقيقة.
- أجد محددًا بالمفتّش.
- أضيف CSS موجّهًا دون كسر الموقع.
- أعرف متى أنشئ قالبًا فرعيًا.
أسئلة شائعة
أين أضيف CSS الإضافي في قالب الكتل؟
في محرر الموقع، عبر الأنماط العامة أو خيار CSS الإضافي حسب القالب. المبدأ نفسه: CSS موجّه دون تعديل ملفات القالب.
هل القالب الفرعي ضروري دائمًا؟
لا. للألوان أو المسافات، يكفي CSS الإضافي. يصبح القالب الفرعي مفيدًا لتعديل القوالب أو إضافة وظائف يجب أن تبقى بعد التحديثات.
ما يحدث إذا عدّلت القالب الأب؟
تعمل تعديلاتك حتى التحديث التالي للقالب، فيمحوها. لهذا نمر عبر CSS الإضافي أو قالب فرعي.
على سمير تعديل نمط قالب دون فقدان تغييراته عند التحديث. ماذا يفعل؟