Automatic css إطار عمل مساعد لمنشئي صفحات WordPress

مرحبًا بك في الموضوع و من خلال مدونة العرائش التقنية سوف نقدم لكم الدليل العملي لتثبيت إطار العمل Automatic.css (ACSS). تم تصميم هذا الشرح ليكون واضحًا ومباشرًا، مع التركيز على الخطوات العملية التي يجب اتباعها بالترتيب.

---

شرح شامل وعملي لتثبيت وإعداد Automatic.css (ACSS)

💡 ما هو Automatic.css (ACSS)؟

قبل البدء، من المهم أن تفهم أن ACSS ليس مجرد إضافة عادية. هو إطار عمل (Framework) للـ CSS، مصمم خصيصًا للعمل مع منشئي الصفحات مثل Bricks, Oxygen, Breakdance و Cwicly.

بدلًا من كتابة أكواد CSS مخصصة أو تكرار التنسيقات، يوفر ACSS مجموعة من الفئات المساعدة (Utility Classes) الذكية. يمكنك استخدامها مباشرة داخل منشئ الصفحات للتحكم في المسافات، إنشاء شبكات (Grids) متجاوبة، ضبط طباعة متجاوبة (Fluid Typography)، وإدارة الألوان بطريقة منظمة. الهدف الأساسي هو تسريع البناء وضمان تناسق التصميم.

تحميل نسخة Automatic.css المفعلة

تحميل Automatic.css

---

📥 الجزء الأول: تثبيت الإطار (Framework) خطوة بخطوة

عملية التثبيت بسيطة وتعتمد على تحميل إضافة (Plugin) من موقع ACSS الرسمي.

المتطلبات الأساسية:

• موقع ووردبريس قيد التشغيل (يمكنك الوصول إلى لوحة التحكم).
• حساب مفعل في موقع Automatic.css مع رخصة سارية لتحميل ملف الإضافة.

خطوات التثبيت:

1. تحميل ملف الإضافة:

   سجل الدخول إلى حسابك في automaticcss.com. من قسم التنزيلات، قم بتحميل ملف الإضافة (الـ Plugin) إلى جهاز الكمبيوتر الخاص بك. ستحصل على ملف بامتداد .zip.

2. رفع الإضافة في ووردبريس:

   سجل الدخول إلى لوحة تحكم موقع ووردبريس، ثم اتبع المسار التالي:

   • من القائمة الجانبية، توجه إلى إضافات > أضف جديداً (Plugins > Add New).
   • انقر على زر "رفع الإضافة" ("Upload Plugin") في أعلى الصفحة.
   • انقر على "اختيار ملف" ("Choose File") وحدد ملف .zip الذي حمّلته من موقع ACSS.
   • انقر على "التثبيت الآن" ("Install Now")، ثم فعِّل الإضافة بالضغط على "تنشيط الإضافة" ("Activate Plugin") بعد اكتمال التثبيت.
3. تفعيل الرخصة:

   بعد التفعيل، ستظهر مساحة جديدة باسم "Automatic.css" في القائمة الجانبية للوحة التحكم.

   • افتح قسم "License" (الترخيص).
   • أدخل مفتاح الترخيص الخاص بك (ستجده في حسابك على موقع ACSS) في الحقل المخصص.
   • ملاحظة مهمة: إذا كان لديك أكثر من مفتاح في حسابك، استخدم المفتاح المسمى "–Automatic.css" تحديدًا، وليس المفتاح الخاص بالحزمة (Bundle) إن وجد.
   • انقر على زر "Activate License" (تفعيل الرخصة).
4. التهيئة الأولية (اختياري):

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

---

⚙️ الجزء الثاني: الإعداد المتقدم مع منشئ Cwicly

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

1. التثبيت والتفعيل (الترتيب مهم)

1. قم بتثبيت وتفعيل إضافة Cwicly أولاً على موقع ووردبريس الخاص بك. هذا يسمح لـ ACSS بالتعرف على وجود Cwicly أثناء تثبيته.
2. بعد ذلك، قم بتثبيت وتفعيل Automatic.css باتباع الخطوات المذكورة في الجزء الأول أعلاه.

2. إعدادات Automatic.css داخل ووردبريس

1. اذهب إلى لوحة تحكم ووردبريس > Automatic.css > Options (الإعدادات).
2. فعّل خيار "Gutenberg Support" (دعم محرر جوتنبرج) عن طريق تحويل المفتاح إلى وضع "On" (تشغيل).
3. تأكد من أن جميع الإعدادات في قسم Gutenberg مضبوطة على "On".
4. استثناء هام: تأكد من أن خيار "Class-First Workflow" مضبوط على "Off" (إيقاف). هذا ضروري لأن Cwicly يعتمد على نهج Class-First، وقد يتعارض معه.

3. إعدادات Cwicly العامة (Admin Settings)

1. من لوحة تحكم ووردبريس، اذهب إلى Cwicly > Settings ثم افتح تبويب "Advanced Settings" (الإعدادات المتقدمة).
2. يوصى بتأكيد الإعدادات التالية (اضبطها كما هو مذكور):
   • Remove List Container = On
   • Remove Classes & IDs = On
   • Cwicly Defaults = Off
   • Remove SVG Filters = On
   • Remove WordPress Global Styles = On
   • Remove WordPress Emojis = On
   • Remove Gutenberg Template Part Wrapper = On
   • Remove Container Block Display Properties = Off

4. إعدادات منشئ Cwicly (Builder Settings)

افتح أي صفحة بمحرر Cwicly لبدء التعديل.

1. نقاط التوقف (Breakpoints): يجب أن تتطابق نقاط التوقف في Cwicly مع تلك الموجودة في ACSS لضمان عمل التصميم المتجاوب بشكل صحيح.
   • اذهب إلى لوحة الإعدادات (Settings Panel) في محرر Cwicly.
   • ابحث عن إعدادات نقاط التوقف. يوصى بتغيير قيمة نقطة "Mobile" من 576px الافتراضية إلى 480px. هذا يتوافق مع نقطة التوقف "S" في ACSS، مما يمنحك تحكمًا أفضل على شاشات الهواتف.
   • نقطة "Tablet" (992px) تتوافق مع نقطة "L" في ACSS، وهي جيدة كما هي.
2. الخطوط (Fonts):
   • في إعدادات الطباعة (Typography) العامة للموقع، اختر الخط المفضل للجسم (Body) والعناوين (Headings).
   • اترك جميع المدخلات الأخرى المتعلقة بأحجام الخطوط وارتفاع الأسطر فارغة. سيتولى ACSS مسؤولية التحكم في هذه القيم وجعلها متجاوبة (Fluid) بشكل تلقائي.

5. إعداد العناصر الإفتراضية (Global Elements Styles)

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

1. عنصر القسم (Section):
   • في منشئ Cwicly، اذهب إلى لوحة "Elements Global Styles" (أيقونة الصندوق ثلاثي الأبعاد).
   • أضف قواعد نمط جديدة لعنصر "Section" إذا لم تكن موجودة.
   • من إعدادات التخطيط (Layout)، اجعل خاصية العرض (Display) هي "Flex" واتجاه المرونة (Flex-direction) هو "Column". هذا يسهل استخدام متغيرات المسافات (مثل `--gap`) داخل الأقسام.
2. عنصر الحاوية (Container):
   • في نفس لوحة "Elements Global Styles"، أضف قواعد نمط جديدة لعنصر "Container".
   • من إعدادات التحجيم (Sizing)، اجعل العرض (Width) 100% وأقصى عرض (Max-width) يساوي var(--content-width). يمكنك كتابة هذا المتغير مباشرة في حقل Max-width.
   • هذا الإعداد يضمن أن جميع الحاويات ستتماشى تلقائيًا مع عرض المحتوى الرئيسي الذي قمت بتعيينه في إعدادات ACSS (مثلاً 1200px).

6. (اختياري) دعم المقالات العادية

بشكل افتراضي، لا يتم تحميل أنماط ACSS داخل محرر المقالات العادية (Posts). إذا أردت تفعيل ذلك، ستحتاج إلى إضافة كود برمجي بسيط إلى ملف functions.php لقالبك. يمكنك إضافته عبر إضافة Code Snippets أو من خلال محرر الملفات في ووردبريس.

add_filter( 'acss/gutenberg/allowed_post_types',
    function( $post_types ) {
        // إضافة 'post' إلى قائمة أنواع المحتوى المدعومة
        return array_merge( $post_types, array( 'post' ) );
        // مثال لإضافة منتجات ووكومرس: array( 'post', 'product' )
    }
);
    

---

✅ الخلاصة النهائية

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