كيفية إضافة CSS إلى WordPress: 5 طرق

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

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

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

كيفية إضافة CSS إلى WordPress

هناك عدة طرق لتطبيق نمط CSS على موقع WordPress:

1. عبر أداة تخصيص السمة
2. تحرير ملفات السمات الفرعية
3. تحميل ملف CSS الخاص بك
4. قم بتطبيق CSS على الرأس باستخدام خطافات
5. أضف CSS إلى الخلفية

دعنا نلقي نظرة على كل طريقة ، حتى تتمكن من اختيار الطريقة الأنسب لك.

ملاحظة : لن نشرح بالتفصيل بنية CSS في هذا المنشور ، لذلك نوصي بأن يكون لديك فهم أساسي لـ CSS لتتمكن من اتباع هذا الدليل دون أي مشاكل.

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

1) قم بتطبيق CSS باستخدام أداة تخصيص السمات

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

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

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

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

2) تحرير ملفات موضوع الطفل

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

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

إذا لم يكن القالب الفرعي الخاص بك يحتوي على ملف style.css أو أي ملف آخر بامتداد .css ، فيمكنك إنشاؤه وتطبيقه كما هو موضح في القسم التالي.

بدلاً من ذلك ، تحتوي بعض السمات الفرعية على مجلد CSS به عدة ملفات. إذا كانت هذه هي حالتك ، فتأكد من تحرير ملف style.css الصحيح.

3) قم بتحميل ملف CSS الخاص بك

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

3.1) قم بإنشاء ملف CSS باستخدام محرر التعليمات البرمجية

للقيام بذلك ، تحتاج إلى استخدام محرر كود مثل Visual Studio Code أو Sublime text أو أي محرر آخر يدعم ملفات CSS.

قم بإنشاء ملف جديد بامتداد CSS والصق الكود الخاص بك هناك. في هذا المثال ، قمنا بتسمية الملف my-styles.css .

بعد لصق الرمز الخاص بك ، احفظ الملف ، وتابع إلى الخطوة التالية.

3.2) قم بتحميل الملف إلى مجلد Child Theme

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

الآن استخدم cPanel أو عميل FTP مثل FileZilla لتحميل الملف.

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

باتباع مثالنا ، سنقوم بلصق ملف my-styles.css الخاص بنا في القالب الفرعي.

3.3) قم بإدراج ملف .CSS المخصص في قائمة الانتظار

أنت الآن بحاجة إلى إدراج ملف CSS المخصص في قائمة الانتظار في ملف function.php الخاص بسمة طفلك لجعله يعمل. الصق سكربت PHP التالي بعد أي كود موجود في ملف functions.php ملف.

 وظيفة my_styles () {
wp_register_style ('my-Styles'، get_stylesheet_directory_uri (). '/my-styles.css') ؛
wp_enqueue_style ("الأنماط الخاصة بي") ،
}
add_action ('wp_enqueue_scripts'، 'my_styles') ؛

تأكد من أن الملف الذي تم إنشاؤه حديثًا يسمى بشكل صحيح من خلال المسار اعتمادًا على مكان الملف في دليل النسق. تذكر أيضًا تغيير اسم الملف ( my-styles.css في هذا المثال).

يمكنك استخدام المقتطف التالي للتحقق مما إذا كان المسار صحيحًا أم لا.

 add_action ('wp_head'، function () {
صدى get_stylesheet_directory_uri (). "/my-styles.css" ؛
}) ؛

هذا هو! هذه هي الطريقة التي يمكنك بها تطبيق CSS على WordPress عن طريق تحميل ملف CSS الخاص بك.

4) قم بتطبيق CSS على قسم الرأس باستخدام خطاف

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

يعد ربط wp_head() مفيدًا جدًا عند تطوير مواقع الويب. على الرغم من أنه لا يوصى باستخدامه لتضمين برنامج نصي في علامة HTML <head> ، إلا أنه يسمح لك بإجراء اختبارات سريعة وتصحيح الأخطاء.

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

 add_Action ('wp_head'، 'my_head_css') ؛
وظيفة my_head_css () {
صدى "<نمط>
site-branding {
    الخلفية: أحمر ؛
    العرض: 200 بكسل ؛
    الحشو: 11 بكسل ؛
    نصف قطر الحدود: 23 بكسل ؛ }
</style>
"؛}

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

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

5) أضف CSS إلى الخلفية

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

 add_Action ('admin_head'، 'my_custom_fonts') ؛
وظيفة my_custom_fonts () {
صدى '<نمط>
#adminmenu {
    الخلفية: # 602e93؛}
</style> '؛
}

في هذا المثال ، نقوم بتغيير لون الخلفية (# 602e93).

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

استنتاج

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

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

1. عبر أداة تخصيص السمة
2. تحرير ملفات السمات الفرعية
3. تحميل ملف CSS الخاص بك
4. قم بتطبيق CSS على الرأس باستخدام خطافات
5. أضف CSS إلى الخلفية

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

على الرغم من أن هذه الممارسة غير موصى بها ، يمكنك استخدام الخطافات لتضمين نص برمجي في علامة HTML <head> لإجراء اختبارات سريعة وتصحيح أخطاء موقعك.

هل قمت بإضافة CSS إلى موقع الويب الخاص بك؟ ما الطريقة التي استخدمتها؟ هل تعرف أي طريقة أخرى يجب أن ندرجها؟ اسمحوا لنا أن نعرف في التعليقات أدناه!