صفحات الأنماط الإنسيابيّة أو Cascading Style Sheets (CSS) هي أحد أهم لغات التصميم في مواقع الويب، وهي لغة تُستخدم لتحديد المظهر المرئي وتنسيق المستندات بلغة HTML. وتُمكّنك لغة CSS من التلاعب بالمظهر والتنسيق والخطوط والألوان والمزيد.
تستخدم قوالب (ثيمات) ووردبريس لغتي CSS و HTML لتصدير البيانات المنشأة بواسطة منصة ووردبريس، حيث أن كل قالب من قوالب ووردبريس يحتوي على ملف بصيغة تحت اسم style.css، والذي يحتوي على قواعد النمط لتحديد تنسيق الصفحات المُنشأة بواسطة ووردبريس.
لغة CSS سهلة الاستخدام والتعلّم، فهناك الكثير من الموارد عبر الانترنت التي تحتوي على دروس تعليميّة وشروحات CSS للمبتدئين، ويُمكنك الاستفادة منها كمالك لموقع ووردبريس مبتدئ.
بما أن لغة CSS سهلة للغاية، فيُمكن لمستخدمي ووردبريس فهم الأساسيّات بمجرد النظر إلى ملف style.css الخاص بقوالب موقع ووردبريس الخاص بهم.
مثال:
يُمكنك تصميم عناصر HTML مباشرةً بصيغة CSS، ويستخدم المصممون أيضًا المُعرّفات (Identifiers) والفئات (Classes) لتحديد أقسام مختلفة يُمكن تصميمها باستخدام CSS.
يُساعدهم هذا الأمر باستخدام تنسيقات مختلفة لعناصر HTML ذاتها على صفحة الويب ولكن في أقسام مختلفة.
على سبيل المثال، يُمكن تصميم عنصر H1 من عنوان المقال في قسم ترويسة الصفحة بشكلٍ مختلف عن عنصر H1 آخر مُستخدم في منطقة صدر النص للمقال بذات الصفحة.
مثال:
يحتوي كود HTML الظاهر أعلاه على معرّف (Identifier) باسم “header” وفئة تسمى “blog-title”. يمكن تصميم هذه الأقسام في CSS أيضًا
مثال:
كيف تُضيف كود CSS مُخصص في ووردبريس؟
يُمكنك إضافة كود CSS مباشرةً إلى صفحة تنسيق قالبك في ووردبريس، ولكننا لا ننصح بهذه الطريقة، حيث أن خطأً واحدًا في الكود قد تؤدي للكثير من العواقب في شكل القالب.
يُمكنك ولحسن الحظ، اتّباع الخطوة السهلة التالية لإضافة كود CSS إلى ووردبريس كالتالي:
- توجّه في لوحة تحكم ووردبريس إلى قائمة “المظهر” ثم انقر على “تخصيص” أسفل القالب المُفعّل على موقعك، وسيتم نقلك إلى صفحة تخصيص ووردبريس.
- في أسفل القائمة اليُمنى، أنقر على “تنسيقات (CSS) إضافية”
يُمكنك كتابة سطور كود CSS أو نسخها ولصقها في المساحة الفارغة في قائمة التنسيقات، ويُمكنك إضافة قدر غير محدود من كود CSS. كل ما عليك فعله هو تضمين كل قصاصة من الكود في السطر الخاص بها، ويُمكنك رؤية التغييرات التي تقوم بها مباشرةً في النافذة اليُسرى.
بعد الانتهاء من كتابة أو إضافة أسطر الكود، سيُساعدك المُحرر من “التحقق” من كود CSS الذي أضفته، أي أنه سيُنبّهك في حال كتبت أي أخطاء في الكود.
