كيفية إضافة CSS مخصص إلى موقع WordPress الخاص بك: تم استكشاف 3 طرق

نشرت: 2021-07-28

إضافة CSS ووردبريس مخصص

هنا 3 طرق لإضافة CSS مخصص في موقع WordPress الخاص بك

.

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

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

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

1. استخدم نسق الطفل لتحرير CSS

إذا قمت بتنزيل سمة لموقع الويب الخاص بك وتريد بعض التغييرات فيه ، يُنصح بالقيام بذلك باستخدام سمة فرعية. بعد ذلك ، قد يكون لديك سؤال في ذهنك حول سبب إضافة سمة فرعية ، والإجابة بسيطة ، غالبًا ما يقوم العديد من المطورين بتحديث السمات لتغييرات التصميم وإصلاحات الأخطاء.

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

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

2. استخدم البرنامج الإضافي لإضافة CSS مخصص إلى WordPress

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

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

أ) CSS مخصص بسيط وشبيبة

CSS مخصص بسيط

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

ب) CSS مخصص و JavaScrippt

CSS مخصص و JavaScrippt

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

ج) AccessPress CSS مخصص

AccessPress مخصص CSS

يعد AccessPress Custom CSS أكثر من مجرد مكون إضافي ، فهو يمكّن المطور من إضافة لغات تشفير أخرى مثل PHP أو HTML أو مجرد نص عادي. يمكّنك هذا المكون الإضافي من استخدام التخصيص على عناصر معينة من صفحة الويب الخاصة بك مثل مناطق عناصر واجهة المستخدم وعنوان المنشور أو الصفحات ومحتوى المنشور أو الصفحات والعلامات والعديد من المجالات الأخرى.

د) نشر / صفحة CSS مخصصة مخصصة

المكون الإضافي لـ Post-Page CSS

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

يقدم هذا المكون الإضافي العديد من الميزات مثل المعاينة المباشرة ، والواجهة سهلة الاستخدام ، وعملية إلغاء التثبيت ، والميزة الرئيسية المهمة هي أنه لا يلزم تكوين لإعداد هذا المكون الإضافي

ه) مكون موضوع الطفل

مكون السمة الفرعية

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

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

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

3. قم بتحرير ملف style.css

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

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

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

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

نظرًا لأنه تم تثبيت WordPress لموقعك ، يمكنك رؤية المجلد المسمى wp-content أسفل اسم موقع الويب الخاص بك حيث يتم تثبيت جميع ملفات السمات مسبقًا. ستجد أيضًا المجلد المسمى السمة الحالية على سبيل المثال إذا كنت قد استخدمت النشرة الإخبارية للموضوع ، فسيكون هناك مجلدين هما المجلد الأصل للرسائل الإخبارية ومجلد الرسائل الإخبارية الفرعي.

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

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

بمجرد الانتهاء من كتابة الرموز ، يمكّنك المظهر الفرعي من تخصيص الوظائف وملفات القوالب التي تحتاج إلى تغييرها في ملف قالب معين دون التأثير على الآخرين.

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