كيفية تطبيق CSS على صفحة / منشور معين

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

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

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

لماذا تطبيق CSS على صفحة معينة أو منشور

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

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

على سبيل المثال ، حتى نحن في QuadLayers استخدمنا CSS على صفحات معينة مثل Portfolio و About لجعلها مختلفة عن الصفحات أو أنواع المنشورات الأخرى. الآن ، دون مزيد من اللغط ، دعنا ننتقل إلى هذه العملية.

كيفية تطبيق CSS على صفحة معينة أو منشور

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

1. باستخدام معرف HTML أو فئة
2. إضافة دالة PHP
3. بما في ذلك ملف CSS في صفحة أو منشور معين

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

1. استخدام معرف HTML أو فئة

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

1.1 ابحث عن فئة HTML أو معرف الصفحة

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

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

هنا ، تحقق من علامة HTML الأساسية. سيختلف هذا حسب الموضوع الذي تستخدمه.

لقد استخدمنا موضوع Twenty Twenty في جميع الأمثلة التالية. إذن ، هذا ما ستراه عند فحص الصفحة الرئيسية لموقع ويب باستخدام سمة Twenty Twenty:

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

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

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

 .home .custom-logo{ /*your CSS here */}

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

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

على سبيل المثال ، هذا محدد محدد جدًا لتصميم عنصر الشعار نفسه الذي رأيناه من قبل:

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2 ابحث عن فئة HTML أو معرّف المشاركة

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

بالنسبة إلى المنشور التالي الذي يحتوي على نسق Twenty Twenty ، فإن الفئة التي تحدد هذه المشاركة هي postid -557.

وبالمثل ، يمكنك أن تفعل الشيء نفسه مع أي صفحة أخرى من موقع الويب. استخدام الفئة الفريدة التي تحدد الصفحة. إذا نظرت إلى لقطة الشاشة التالية ، يمكنك أن ترى أن الفئة التي تحدد الصفحة هي page-id-357 .

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

2. إضافة دالة PHP

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

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

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

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

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

2.1. العثور على الصفحة / معرّف آخر

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

المعرف الذي نشير إليه الآن هو متغير PHP يحدد المنشورات والصفحات. حيث أن المعرف في الطريقة السابقة يحدد فئة HTML.

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

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

ثم الصق المقتطف التالي في المحرر وقم بتحديث الملف. سيتم طباعة معرف الصفحة على الواجهة الأمامية.

 add_action ('wp_head'، function () {
    page_id $ = get_queried_object_id () ؛
    صدى $ page_id؛
}) ؛

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

ما عليك سوى لصق المقتطف التالي في ملف jobs.php مرة أخرى.

 add_action ('wp_head'، 'my_head_css') ؛
وظيفة my_head_css () {
    page_id $ = get_queried_object_id () ؛
    إذا ($ page_id == 97) {
        صدى "<style> / * CSS الخاص بك هنا * / </style>"؛
    }
}

تأكد من إضافة CSS الخاص بك في قسم "CSS الخاص بك هنا" وقم بتحديث الملف.

3. تضمين ملف CSS في صفحة معينة أو منشور

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

3.1 قم بإنشاء ملف CSS باستخدام Code Editor

أولاً ، تحتاج إلى إنشاء ملف CSS منفصل بجميع نصوص CSS النصية الضرورية باستخدام محرر التعليمات البرمجية. يمكن استخدام برامج تحرير مثل Visual Studio Code أو Sublime text أو أي برامج أخرى تدعم ملفات CSS.

بعد ذلك ، أنشئ ملفًا جديدًا بامتداد CSS والصق شفرتك هنا. لقد قمنا بتسمية الملف my-style.css لهذا البرنامج التعليمي.

3.2 قم بتحميل ملف CSS إلى مجلد موضوع الطفل

الآن ، يجب تحميل ملف CSS الذي قمت بإنشائه إلى دليل القالب الفرعي. لهذا ، يمكنك استخدام عميل FTP مثل FileZilla لتحميل الملف. يمكنك حتى تحميله في دليل السمات الفرعية الرئيسي نفسه.

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

الآن ، يمكنك إدراج ملف CSS المخصص في قائمة انتظار على موقع WordPress الخاص بك عن طريق إضافة مقتطف رمز في ملف jobs.php الخاص بك.

في البرنامج النصي التالي ، سنستخدم الخطاف wp_enqueue_script() ، وهي الطريقة الصحيحة لتطبيق ملفات CSS على موقع ويب WP. داخل الوظيفة ، نقوم بتسجيل وإدراج ملف CSS الخاص بنا ( my-styles.css ) فقط إذا تم استيفاء الشرط. هذا هو نفس استخدام المثال السابق.

بعد ذلك ، ستسترجع وظيفة get_queried_object_id() معرف الصفحة أو المنشور الحالي. كل ما عليك فعله هو إضافة البرنامج النصي التالي إلى ملف function.php مرة أخرى وتحديثه .

 add_action ('wp_enqueue_scripts'، 'my_theme_styles') ؛

الوظيفة my_theme_styles () {
    إذا (get_queried_object_id () == 97) {
        wp_register_style ('my-Styles'، get_stylesheet_directory_uri (). '/my-styles.css') ؛
        wp_enqueue_style ('my-Styles'، get_stylesheet_directory_uri (). '/my-styles.css') ،
    }
}

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

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

استنتاج

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

• باستخدام معرف HTML أو فئة
• إضافة دالة PHP
• تضمين ملف CSS في صفحة أو منشور معين

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

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

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

• كيفية تحويل / تغيير نوع المنشور في WordPress
• قم بإنشاء نوع منشور مخصص في WordPress برمجيًا
• كيفية تخصيص صفحة عربة WooCommerce