كيفية إضافة كلاس body مخصص لصفحات محددة باستخدام Astra Pro

هل تريد تطبيق أنماط CSS فريدة على صفحات محددة في موقع WordPress الخاص بك؟
الطريقة الأنظف هي إضافة كلاس مخصص إلى وسم <body> — بحيث يمكنك استهداف تلك الصفحات بدقة باستخدام CSS.
باتباع الخطوات التالية، ستتمكن من إضافة كلاس body مخصص لأي صفحة (أو مجموعة صفحات) باستخدام ميزة Custom Layouts في Astra Pro — دون الحاجة إلى أي معرفة برمجية.

نظرة عامة

يضيف WordPress تلقائياً بعض الكلاسات إلى body (مثل page-id-42)، لكنك أحياناً تحتاج إلى
كلاس نظيف وذو معنى مثل special-page تتحكم فيه بنفسك.
تتيح لك ميزة Custom Layouts في Astra Pro حقن مقطع JavaScript صغير في صفحات محددة،
يضيف كلاسك المخصص إلى body عند تحميل الصفحة.

مسار العمل:

[Astra Pro → Custom Layouts] → [مقطع JavaScript] → [حقنه عبر hook الـ wp_head] → [إضافة كلاس body عند DOMContentLoaded]

الخطوة 1. فتح Custom Layouts في Astra Pro

1. سجّل الدخول إلى لوحة تحكم WordPress.
2. اذهب إلى المظهر ← Astra Options.
3. ابحث عن وحدة Custom Layouts وانقر على Settings.
4. انقر على Add New.

إذا لم تجد Custom Layouts، فقد تحتاج إلى تفعيله أولاً.
اذهب إلى المظهر ← Astra Options ← Astra Addons وقم بتشغيل مفتاح Custom Layouts.

الخطوة 2. إعداد Custom Layout

ستظهر لك شاشة محرر جديدة. أدخل المعلومات التالية:

1. أضف عنواناً كمرجع شخصي (مثلاً Body Class - صفحات مميزة).
2. في المحرر، انقر على تبويب Code والصق المقطع التالي:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

استبدل special-page باسم الكلاس الذي تريد استخدامه.

الخطوة 3. إعداد الـ Hook

انتقل إلى الأسفل للعثور على لوحة Layout Settings وقم بالإعداد التالي:

Layout → Hook
Action → wp_head
Priority → 10

مهم: على الرغم من أن السكريبت يُحقن داخل <head>،
إلا أنه لن يُنفَّذ حتى يتم تحليل DOM بالكامل — لأننا لففناه داخل
document.addEventListener('DOMContentLoaded', ...).
هذا يضمن وجود document.body عند إضافة الكلاس،
كما أنه يُنفَّذ قبل wp_footer، مما يتجنب أي وميض للمحتوى غير المنسّق.

الخطوة 4. تحديد شروط العرض

لا تزال في لوحة Layout Settings، ابحث عن Display On وحدد الصفحات
التي تريد أن يظهر فيها كلاس body.

يمكنك الاختيار من بين الشروط التالية:

Specific Page — استهداف صفحة واحدة أو أكثر بالاسم
All Pages — تطبيق على جميع صفحات الموقع
Front Page — الصفحة الرئيسية فقط
Page Template — جميع الصفحات التي تستخدم قالباً محدداً

يمكنك إضافة صفحات متعددة دفعة واحدة في Custom Layout واحد،
وهو أكثر كفاءة بكثير من إنشاء layout منفصل لكل صفحة.

الخطوة 5. النشر

بعد إعداد الـ hook وشروط العرض، انقر على Publish في الزاوية العلوية اليمنى.

الخطوة 6. التحقق من عمل الإعداد

زر إحدى الصفحات التي حددتها في Display On.
انقر بزر الماوس الأيمن في أي مكان على الصفحة واختر فحص (أو اضغط F12).
في تبويب Elements، ابحث عن وسم <body>.
تأكد من ظهور الكلاس المخصص في قائمة الكلاسات:

<body class="home page-template-default ... special-page">

ملاحظة: لا تستخدم عرض مصدر الصفحة للتحقق —
فهو يعرض HTML الخام قبل تنفيذ JavaScript، لذا لن يظهر الكلاس هناك.
استخدم دائماً فحص العنصر لرؤية DOM الحي بعد تنفيذ JavaScript.

استخدامه في CSS

يمكنك الآن استهداف تلك الصفحات تحديداً في CSS:

/* يُطبَّق فقط على الصفحات التي تحتوي على كلاس body المسمى special-page */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

أضف هذا في المظهر ← تخصيص ← CSS إضافي أو في ملف الأنماط الخاص بـ child theme.

استكشاف الأخطاء وإصلاحها

الكلاس لا يظهر؟ تأكد من استخدام فحص العنصر وليس عرض مصدر الصفحة.
لا يزال لا يعمل؟ امسح ذاكرة التخزين المؤقت للمتصفح وأي إضافات تخزين مؤقت، ثم أعد التحميل.
تستخدم Cloudflare؟ قم بمسح ذاكرة التخزين المؤقت لـ Cloudflare لتلك الصفحة أيضاً.
الكلاس يظهر على صفحات خاطئة؟ راجع شروط Display On في Custom Layout مرة أخرى.

خلاصة

أصبح لديك الآن طريقة بسيطة وموثوقة لإضافة كلاس body مخصص لصفحات محددة في WordPress
باستخدام Astra Pro — دون المساس بـ functions.php أو إنشاء قوالب صفحات مخصصة.

ملخص العملية:
Custom Layouts → مقطع JavaScript → hook الـ wp_head → شروط العرض → كلاس body مخصص ✅

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