مكان إضافة CSS مخصص في WordPress

إضافة CSS مخصص لموقعك من الأمور الهامة  التي يجب عليها معرفة كيفية عملها .

لماذا قد تريد أن تفعل هذا؟ يمكن أن يكون لأي من الأسباب التالية:

1. لإضافة نمط جديد إلى قالب لم يتم تعريفه (على سبيل المثال، إضافة استعلام وسائط جديد لنقطة توقف معينة).
2. لتغيير نمط عنصر داخل القالب الذي تستخدمه.
3. للإضافة إلى الأنماط الافتراضية ل الإضافة أو تعديلها.

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

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

سلسلة CSS

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

هناك بعض الاستثناءات والحلول لهذا المبدأ، مثل هذه الطريقة لإنشاء خلفيات متعددة الألوان في CSS:

لكن بشكل عام تبقى القاعدة.

هناك شيئان يساعدان المتصفح في تحديد النمط الذي سيتم تطبيقه : الاتساع والخصوصية .

• العرض الصحيح = الاختيار الصحيح لعنصر (عناصر) HTML وليس أي عناصر أخرى.
• الخصوصية الصحيحة = إعلان CSS الخاص بك يتفوق على الإعلانات الأخرى التي تستهدف نفس العنصر (العناصر).

إذا كنت ترغب في التعمق أكثر في خصوصية CSS، فإنني أوصي بقراءة كتاب ” حروب خصوصية CSS” بقلم Andy Clarke، والذي يشرح هذا المفهوم بشكل جميل. (إنها أكثر فائدة إذا كنت من محبي حرب النجوم!)

كيف يتم تطبيق CSS داخل ووردبريس

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

كيف يقرر WordPress أيهما سيتم تحميله أولاً؟ يحتوي على ترتيب محدد يتم من خلاله وضع أنماط CSS في قائمة الانتظار.

الترتيب العام هو من الأول إلى الأخير:

1. الإضافات
2. قالب الطفل
3. قالب الوالدين
4. أداة التخصيص

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

الأولوية الافتراضية للدالة المرتبطة – أو رد الاتصال – هي 10. سيتم تشغيل رد الاتصال برقم أقل من هذا في وقت سابق، وسيتم تشغيل دالة ذات رقم أعلى لاحقًا.

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

حيث يمكنك إضافة WordPress CSS مخصص

فيما يلي ثلاثة أماكن رئيسية يمكنك من خلالها إضافة CSS مخصص إلى WordPress.

• القوالب
• الإضافات
• أداة تخصيص ووردبريس

دعونا نلقي نظرة على هذه بدورها.

style.css1. ملف القالب الخاص بك

الطريقة الأكثر وضوحًا لتغيير نمط القالب هي تحرير الملف style.css.

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

الطريقة الخطيرة هي الذهاب إلى Appearance > Theme Editor مباشرةً. إذا حاولت ذلك مع القالب النشط الخاص بك، فسترى تحذيرًا مثل هذا:

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

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

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

2. WordPress CSS مخصص في الإضافات

توفر لك معظم الإضافات لإنشاء صفحات ذات تأثيرًا كبيرًا على الأنماط. على سبيل المثال، في Beaver Builder، يمكنك إضافة أنماط إلى صفوف أو وحدات فردية عبر عناصر التحكم الخاصة بها:

تتم إضافة لون الخلفية هذا إلى ورقة أنماط منفصلة تم إنشاؤها بواسطة Beaver Builder.

يمكنك أيضًا تغيير أنماط العناصر في صفحة واحدة فقط:

ولكن ماذا لو لم تعجبك أنماط الإضافات، ولكن تم تحميلها على أي حال؟

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

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

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

3. إضافة CSS في أداة تخصيص WordPress

يعد WordPress Customizer ، الذي وصل إلى WordPress 4.7، أداة مفيدة لإضافة CSS الخاص بك، حيث يتم تحميل CSS المخصص الخاص بك بعد جميع الأنماط الأخرى.

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

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

تذكر استخدام زر النشر لحفظ أنماطك.

لاحظ أنه يتم تحميل أنماط أداة التخصيص الخاصة بك بشكل مضمّن في <head>قالبك. هنا مثال:

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

أين يتم تخزين أنماط CSS المخصصة؟

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

إليك استعلام للعثور عليهم:

SELECT post_title, post_name, post_content, post_type FROM wp_posts WHERE post_type = 'custom_css';

سترى ذلك post_titleوكلاهما post_nameيتوافق مع سبيكة القوالب ويحتوي post_contentعلى قواعد CSS المخصصة الخاصة بك.

على الرغم من أنه من المطمئن معرفة أن CSS المخصص الخاص بك آمن في حالة حذفه عن طريق الخطأ (!) إلا أنه لا توجد طريقة بسيطة للوصول إلى مراجعات CSS الخاصة بك مثلما يمكنك من خلال المراجعات اللاحقة.

إلا إذا قمت بإضافة البرنامج المساعد.

أدوات CSS مخصصة إضافية مع JETPACK

لدى المطورين آراء متباينة حول البرنامج الإضافي Jetpack – البعض يحبه، بينما يكرهه الآخرون.

لقد كان لـ Jetpack سمعة سيئة لأنه يحتوي بالفعل على عدة  إضافات في واحد، ويتم تمكين بعض وظائفه تلقائيًا سواء كنت في حاجة إليها أم لا.

للعلم، وجدنا أن Jetpack يحتوي على بعض الميزات المفيدة مثل ربط موقع الويب الخاص بك بـ WordPress.com .

ومع ذلك، فإن تحسينات CSS المخصصة لـ Jetpack رائعة حقًا.

لتمكينها، بمجرد تثبيت Jetpack، يتعين عليك الانتقال إلى Jetpack > الإعدادات وتبديل لوحة تخصيص Enhance CSS .

باستخدام Jetpack، يمكنك:

شاهد آخر 25 مراجعة CSS مخصصة بالطريقة المعتادة.

يمكنك عرض CSS مخصص لأي سمات أخرى أضفتها إليها أيضًا.

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

ابدأ من جديد باستخدام CSS، عن طريق تعطيل CSS الخاص بقالبك تمامًا.

هذا يعني أنك إذا كنت تستخدم قالبًا أصليًا بدلاً من قالب فرعي، فستحتفظ بترميز PHP وHTML للقالب، ولكن style.cssلن يتم تحميل القالب الخاص بك – مما يمنحك لوحة فارغة فعليًا.

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

استخدم معالجات CSS الأولية مثل Sass أو LESS. للبدء، قم بتمكين LESS أو Sass (بناء جملة SCSS) من مربع تحديد المعالج المسبق.

هذه طريقة سهلة بشكل خاص للبدء باستخدام معالج مسبق إذا كنت جديدًا عليه.

فيما يلي مثال بسيط، باستخدام متغيرات Sass لتغيير لون روابط عنوان المقالة في قالب Twenty Twenty:

مساعدة، CSS المخصص الخاص بي لا يعمل!

إذا لم يظهر CSS المخصص الخاص بك على الصفحة، فتحقق مما يلي:

1. هل لديك أي قواعد نمط في أداة التخصيص تتجاوز الأنماط التي تريد تطبيقها؟ يمكنك التحقق من ذلك باستخدام Inspect Element في متصفحك.
2. هل تستخدم محدد (محددات) CSS الصحيح؟
3. هل أسلوبك محدد بما فيه الكفاية؟ تذكر أنه في CSS، هناك محددات معينة تتفوق على غيرها.

تعد إضافة CSS المخصصة لـ WordPress أمرًا سهلاً عندما تعرف كيفية القيام بذلك

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

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

ولا تنس استثمار الوقت في تعلم قواعد CSS، حتى تتمكن من إنشاء الأنماط وتعديلها مثل المحترفين.