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

نتذكر عندما كان مستخدمو ووردبريس يضطرون إلى البحث في ملفات القالب لاضافة CSS مخصص، وقد أخبرنا الكثير من قرائنا كم كان ذلك صعب.

الخبر السار؟ هناك الأن طرق أسهل بكثير لاضافة CSS مخصص دون الحاجة إلى تعديل أي ملفات القالب. يمكنك استخدام أداة تخصيص القالب، أو واجهة تحرير الموقع بالكامل (FSE)، أو إضافة جيدة لمقتطفات الكود مثل WPCode.

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

لماذا اضافة CSS مخصص في ووردبريس؟

CSS هو اختصار لـ Cascading Style Sheets، وهي لغة تساعدك على تنسيق موقع ووردبريس الخاص بك. يرتبط CSS وHTML معًا، حيث يستخدم CSS لتنسيق عناصر HTML المختلفة مثل اللون والحجم والتخطيط والعرض.

تساعد اضافة CSS مخصص على تخصيص تصميم ومظهر موقعك، وهو أمر غير ممكن من خلال الخيارات الافتراضية. يمنحك هذا مزيد من التحكم، ويمكنك بسهولة تخصيص قالب ووردبريس الخاص بك ببضعة أسطر من الكود.

على سبيل المثال، لنفترض أنك تريد تغيير لون خلفية كل منشور على حدة بدلاً من استخدام اللون نفسه في جميع أنحاء الموقع. باضافة كود CSS مخصص، يمكنك تخصيص خلفية منشور أو صفحة معينة.

وبالمثل، يمكنك تغيير نمط ومظهر فئات المنتجات في المتجر الكتروني الخاص بك باستخدام CSS إضافي.

ستناقش الأقسام التالية طرق مختلفة لاضافة CSS مخصص إلى موقع ووردبريس الخاص بك.

هل أنت مستعد؟ لنبدأ.

الطريقة الأولى: اضافة CSS مخصص باستخدام أداة تخصيص القالب

منذ إصدار ووردبريس 4.7، أصبح بإمكان المستخدمين اضافة CSS مخصص مباشرة من لوحة إدارة ووردبريس. الأمر سهل للغاية، ويمكنك رؤية تغييراتك فورًا من خلال معاينة مباشرة.

أولًا، ستحتاج إلى التوجه إلى صفحة المظهر » تخصيص من لوحة تحكم ووردبريس.

سيؤدي هذا إلى تشغيل واجهة تخصيص قالب ووردبريس.

في هذه الصفحة، يمكنك رؤية المعاينة المباشرة لموقعك مع مجموعة من خيارات التخصيص في اللوحة اليمني. ما عليك سوى النقر على علامة التبويب “CSS إضافية” لبدء التعديل.

ستنزلق علامة التبويب لعرض مربع بسيط يمكنك من خلاله اضافة CSS مخصص.

بمجرد اضافة قاعدة CSS صالحة، ستتمكن من رؤيتها مطبقة على لوحة المعاينة المباشرة لموقعك.

يمكنك الاستمرار في اضافة كود CSS مخصص حتى تصبح راضي عن مظهر التغييرات على موقعك.

لا تنس النقر على زر “نشر” في الأعلى عند الانتهاء.

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

الطريقة الثانية: اضافة CSS مخصص باستخدام اضافة WPCode

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

إذا كنت ترغب في تطبيق كود CSS المخصص بغض النظر عن قالب ووردبريس الذي تستخدمه، فهذه الطريقة مناسبة لك.

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

الأن، أول ما عليك فعله هو تثبيت وتفعيل إضافة WPCode المجانية. إذا كنت بحاجة إلى مساعدة، يرجى الاطلاع على دليلنا حول كيفية تثبيت إضافة ووردبريس.

بعد التفعيل، انتقل إلى Code Snippets » + Add New من لوحة تحكم إدارة ووردبريس.

ثم مرر مؤشر الماوس فوق خيار “(Add Your Custom Code (New Snippet” في مكتبة مقتطفات الكود، ثم انقر على “Use snippet”.

بعد ذلك، عليك تحديد “CSS Snippet” كنوع الكود من قائمة الخيارات التي تظهر على الشاشة.

بعد ذلك، في أعلى الصفحة، يمكنك اضافة عنوان لمقتطف CSS المخصص. يمكنك استخدام أي شيء يساعدك في تحديد الكود.

بعد إدخال العنوان، يمكنك كتابة أو لصق مقتطف CSS المخصص في مربع “Code Preview”.

لننتقل الأن إلى قسم “Insertion” ونختار طريقة “Auto-Insert” إذا كنت ترغب في تنفيذ الكود على موقع ووردبريس بأكمله.

إذا كنت ترغب في تنفيذ الكود على صفحات أو منشورات محددة فقط، يمكنك اختيار طريقة “Shortcode”.

الأن، عليك العودة إلى أعلى الصفحة.

ثم، ما عليك سوى تفعيل الوضع “Active” ثم النقر على زر “Save Snippet”.

هذا كل شيء! يمكنك زيارة موقع ووردبريس الخاص بك لمشاهدة CSS المخصص أثناء العمل.

الطريقة 3: اضافة CSS اضافي باستخدام محرر الموقع الكامل (FSE)

هناك طريقة أخرى لاضافة CSS مخصص في ووردبريس وهي استخدام محرر الموقع الكامل (FSE). باستخدام FSE، يمكنك تعديل تخطيط وتصميم الموقع بالكامل باستخدام محرر الكتل في ووردبريس، تمامًا كما هو الحال عند تعديل منشور أو صفحة مدونة.

يرجى ملاحظة أن محرر الموقع الكامل متاح فقط لقوالب محددة. لمزيد من التفاصيل، يمكنك الاطلاع على مقالتنا حول أفضل قوالب تحرير الموقع الكامل ووردبريس.

استخدام اضافة لاضافة CSS أسهل قليلاً. مع ذلك، إذا كنت تفضل عدم استخدام إضافة، فسنوضح لك كيفية الوصول إلى أداة التخصيص حتى لو لم تعد متوفرة في قائمة الإدارة.

كل ما عليك فعله هو تسجيل الدخول إلى لوحة إدارة ووردبريس. ثم انسخ ولصق الرابط أدناه في متصفحك واستبدل “example.com” بـ اسم نطاق موقعك.

https://example.com/wp-admin/customize.php

سينقلك هذا إلى إصدار محدود من أداة تخصيص القالب. في القائمة اليمني، ستجد خيار إضافة CSS مخصص في الأسفل.

انقر ببساطة على تبويب “تنسيقات (CSS) إضافية”.

الآن، أدخل كود CSS الخاص بك في قسم “تنسيقات (CSS) إضافية”.

بعد إضافة الكود، انقر على زر “نشر”، وبذلك تكون قد انتهيت.

نصيحة إضافية: استخدام اضافة CSS مخصص مقابل اضافة CSS في القالب

جميع الطرق المذكورة أعلاه موصى بها للمبتدئين. يمكن للمستخدمين المتقدمين أيضًا اضافة كود CSS مخصص مباشرة إلى قوالبهم.

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

أفضل طريقة هي استخدام قالب فرعي. مع ذلك، يتجنب العديد من المبتدئين إنشاء قالب فرعي لأنهم يجدون العملية مرهقة. كما أن المبتدئين غالبًا ما يفتقرون إلى فهم كيفية استخدام القالب الفرعي بخلاف مجرد اضافة كود CSS مخصص.

يتيح لك استخدام اضافة CSS مخصص تخزين أكواد CSS المخصصة بشكل مستقل عن قالبك. بهذه الطريقة، يمكنك بسهولة تبديل القوالب، وستبقى أكواد CSS المخصصة.

طريقة رائعة أخرى لاضافة اكواد CSS مخصصة إلى موقع ووردبريس الخاص بك هي استخدام اضافة CSS Hero. تتيح لك هذا الاضافة الرائع تعديل جميع أنماط CSS تقريبًا على موقع ووردبريس الخاص بك دون كتابة سطر واحد من الكود.

يمكنك أيضًا اضافة CSS مخصص باستخدام إضافة Elementor.

SeedProd هو منشئ مواقع ويب يعمل بالسحب والإفلات، ويتيح لك إنشاء قوالب ووردبريس وصفحات مقصودة مخصصة لموقعك. يمكنك تعديل إعدادات CSS العامة بسهولة، دون الحاجة إلى أي أكواد.

صممت بعض العلامات التجارية الشريكة لنا مواقعها الإلكترونية بالكامل باستخدام Elementor. هل أنت مهتم بمعرفة كيف يمكن لـ Elementor تحويل تصميم ووردبريس الخاص بك؟ تأكد من قراءة هذا الدليل الشامل حول كيفية استخدام Elementor لمعرفة سبب كونه الخيار الأمثل لإنشاء مواقع ويب مذهلة.

نأمل أن يكون هذا المقال قد ساعدك في تعلم كيفية اضافة CSS مخصص إلى موقع ووردبريس الخاص بك. قد ترغب أيضًا بالاطلاع على دليلنا حول كيفية إصلاح CSS المعطل في لوحة تحكم إدارة ووردبريس وكيفية تصغير حجم ملفات CSS وJavaScript في ووردبريس.