هل تريد إضافة Custom CSS لتغيير شكل ومظهر موقعك WordPress ؟.
تساعدك إضافة CSS المخصصة على تغيير تخطيط ومظهر موقع الويب الخاص بك ، وهو أمر غير ممكن من خلال الخيارات الافتراضية. يعد استخدام FTP محيرًا للغاية بالنسبة لمعظم المبتدئين ، ولكن هناك طرق أخرى لإضافة CSS مخصصة.
في هذه المقالة ، سنوضح لك كيفية إضافة CSS مخصص بسهولة إلى موقع WordPress الخاص بك دون تحرير أي ملفات سمات.
لماذا تضيف CSS مخصص في ووردبريس؟
CSS هي اختصار لـ Cascading Style Sheets وهي لغة تساعدك على تصميم موقع WordPress الخاص بك . يتم استخدام CSS و HTML معًا حيث يتم استخدام CSS لتصميم عناصر HTML مختلفة مثل اللون والحجم والتخطيط والعرض.
تساعد إضافة CSS المخصصة في تخصيص تصميم ومظهر موقعك ، وهو أمر غير ممكن من خلال الخيارات الافتراضية. يمنحك مزيدًا من التحكم ، ويمكنك بسهولة إجراء تغييرات على قالب WordPress الخاصة بك ببضعة أسطر من التعليمات البرمجية.
على سبيل المثال ، لنفترض أنك تريد تغيير لون الخلفية لكل منشور فردي بدلاً من استخدام نفس اللون في جميع أنحاء موقع الويب. من خلال إضافة رمز CSS مخصص ، يمكنك تخصيص خلفية منشور أو صفحة معينة.
وبالمثل ، يمكنك تغيير نمط ومظهر فئات المنتجات في متجر التجارة الإلكترونية الخاص بك باستخدام CSS إضافي.
بعد قولي هذا ، دعنا نلقي نظرة على الطرق المختلفة التي يمكنك من خلالها إضافة CSS مخصص إلى موقع WordPress الخاص بك.
الطريقة الأولى: إضافة CSS مخصص باستخدام أداة تخصيص السمات
منذ إصدار WordPress 4.7 ، يمكن للمستخدمين الآن إضافة CSS مخصص مباشرةً من منطقة إدارة WordPress. هذا سهل للغاية ، وستتمكن من رؤية التغييرات من خلال المعاينة المباشرة على الفور.
أولاً ، عليك التوجه إلى المظهر »تخصيص الصفحة من لوحة معلومات WordPress الخاصة بك.
سيؤدي ذلك إلى تشغيل واجهة تخصيص سمة WordPress.
سترى المعاينة المباشرة لموقعك مع مجموعة من الخيارات في الجزء الأيمن. انقر فوق علامة التبويب “CSS إضافية” من اللوحة اليمنى.
ستنزلق علامة التبويب لتظهر لك مربعًا بسيطًا حيث يمكنك إضافة CSS المخصص. بمجرد إضافة قاعدة CSS صالحة ، ستتمكن من رؤيتها مطبقة على جزء المعاينة المباشرة لموقع الويب الخاص بك.
يمكنك الاستمرار في إضافة كود CSS مخصص حتى تشعر بالرضا عن شكله على موقعك.
لا تنس النقر فوق الزر “نشر” في الأعلى عند الانتهاء.
ملاحظة: أي CSS مخصص تضيفه باستخدام أداة تخصيص السمات متاح فقط مع هذا القالب المحدد. إذا كنت ترغب في استخدامه مع قوالب أخرى ، فستحتاج إلى نسخه ولصقه في نسقك الجديد باستخدام نفس الطريقة.
الطريقة الثانية: إضافة CSS مخصص باستخدام البرنامج المساعد
تسمح لك الطريقة الأولى فقط بحفظ CSS المخصص للموضوع النشط حاليًا. إذا قمت بتغيير السمة ، فقد تحتاج إلى نسخ ولصق CSS المخصص الخاص بك في السمة الجديدة.
إذا كنت تريد تطبيق CSS المخصص بغض النظر عن قوالب WordPress التي تستخدمها ، فهذه الطريقة مناسبة لك.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Simple Custom CSS . إذا كنت بحاجة إلى مساعدة ، فالرجاء الاطلاع على دليلنا حول كيفية تثبيت الإضافة WordPress .
عند التنشيط ، ما عليك سوى الانتقال إلى المظهر »Custom CSS واكتب CSS المخصص أو الصقه.
لا تنس الضغط على الزر “Update Custom CSS” لحفظ التغييرات.
يمكنك الآن عرض موقع WordPress الخاص بك لمشاهدة CSS المخصص قيد التنفيذ.
الطريقة الثالثة: إضافة CSS إضافية باستخدام محرر الموقع الكامل (FSE)
هناك طريقة أخرى يمكنك من خلالها إضافة CSS مخصصة في WordPress وهي استخدام محرر الموقع الكامل (FSE). باستخدام FSE ، يمكنك تعديل تخطيط وتصميم موقع الويب بالكامل باستخدام محرر قوالب WordPress ، تمامًا كما هو الحال عند تحرير منشور أو صفحة مدونة.
يعد استخدام إضافة لإضافة CSS أسهل قليلاً. ومع ذلك ، إذا كنت تفضل عدم استخدام إضافة ، فسنعرض لك كيفية الوصول إلى أداة التخصيص حتى عندما لا تكون متوفرة في قائمة المسؤول الخاصة بك.
كل ما عليك فعله هو تسجيل الدخول إلى مسؤول WordPress الخاص بك.
بعد ذلك ، ما عليك سوى نسخ عنوان URL أدناه ولصقه في المستعرض الخاص بك ، واستبدال “example.com” باسم دومين موقع الويب الخاص بك .
https://example.com/wp-admin/customize.php |
سينقلك هذا إلى إصدار محدود من أداة تخصيص السمات. في القائمة الموجودة على اليسار ، سترى خيار إضافة CSS مخصص في الأسفل.
ما عليك سوى النقر فوق علامة التبويب “CSS إضافية”.
انتقل الآن وأدخل رمز CSS الخاص بك ضمن منطقة CSS الإضافية.
بعد إضافة الرمز ، ما عليك سوى النقر فوق الزر “نشر”.
استخدام مكون CSS إضافي مخصص مقابل إضافة CSS في السمة
جميع الطرق المذكورة أعلاه موصى بها للمبتدئين. يمكن للمستخدمين المتقدمين أيضًا إضافة CSS مخصصة مباشرة إلى سماتهم.
ومع ذلك ، لا يُنصح بإضافة مقتطفات CSS مخصصة إلى نسقك الأصلي. ستفقد تغييرات CSS إذا قمت بتحديث السمة عن طريق الخطأ دون حفظ التغييرات المخصصة.
أفضل طريقة هي استخدام قالب فرعي بدلاً من ذلك. ومع ذلك ، لا يرغب العديد من المبتدئين في إنشاء سمة فرعية. بصرف النظر عن إضافة CSS مخصصة ، غالبًا ما لا يعرف المبتدئون حقًا كيف سيستخدمون هذا المظهر الفرعي.
يتيح لك استخدام مكون CSS إضافي مخصص تخزين CSS المخصص بشكل مستقل عن قالبك. بهذه الطريقة ، يمكنك بسهولة تبديل السمات ، وسيظل CSS المخصص موجودًا.
هناك طريقة أخرى رائعة لإضافة CSS مخصصة إلى موقع WordPress الخاص بك وهي استخدام الإضافة CSS Hero . تتيح لك هذه الإضافة الرائعة تحرير كل نمط CSS تقريبًا على موقع WordPress الخاص بك دون كتابة سطر واحد من التعليمات البرمجية.
يمكنك أيضًا إضافة CSS مخصص باستخدام الإضافة SeedProd . SeedProd هو منشئ مواقع السحب والإفلات الذي يسمح لك بإنشاء سمات WordPress مخصصة وصفحات مقصودة لموقع WordPress الخاص بك. يمكنك بسهولة تعديل إعدادات CSS العامة ، دون الحاجة إلى كود.
نأمل أن تساعد هذه المقالة في إضافة CSS مخصص إلى موقع WordPress الخاص بك.