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

هل تعلم أنه يمكنك تطبيق CSS على صفحة معينة أو منشور في WordPress ؟ نعم ، نظرًا لطبيعة WordPress المتوافقة مع CSS ، فهذا ممكن. وفي هذا الدليل ، سنوضح لك الطرق المختلفة التي يمكنك من خلالها إضافة CSS إلى صفحة أو منشور معين. عادةً ما يتم تطبيق جميع سمات WordPress بشكل مختلف أنماط لكل نوع من أنواع المحتوى. تحتوي المنشورات والصفحات والتصنيفات والملفات الشخصية وأي جزء آخر من المحتوى على أوراق أنماط مختلفة في كل منها. وينطبق الشيء نفسه على الإضافات وجميع جوانب WordPress الأخرى أيضًا. ومع ذلك ، نظرًا لمرونة WordPress ، يمكنك أيضًا استخدام أوراق أنماط مختلفة لـ صفحة وأنواع منشورات معينة. ولكن دعونا نلقي نظرة على سبب احتياجك إلى إضافة CSS إليهم قبل أن نواصل العملية. لماذا تطبيق CSS على صفحة معينة أو منشور تعد إضافة CSS إلى صفحات ومنشورات معينة مفيدة جدًا إذا كنت تقوم ببناء موقع ويب أو تصميم موقع الويب الخاص بك . يتم استخدام CSS بشكل عام لتخصيص المظهر المرئي للموقع. لذلك ، استخدام CSS على موقع الويب الخاص بك بشكل عام يمكن أن يكون مفيدًا جدًا لتقديم صفحات الويب الخاصة بك بالطريقة التي تريدها بالضبط لزوار موقع الويب الخاص بك. قد تكون هناك صفحة معينة أو نوع المنشور الذي يحتاج إلى تصميم فريد مقارنة بالصفحات أو المنشورات الأخرى على موقع الويب الخاص بك. في هذه الحالة ، فإن أحد أفضل الخيارات المتاحة لك هو تطبيق CSS على صفحة معينة أو المنشور. تتم عادةً إضافة هذه الصفحات أو المنشورات إلى قوائم موقع الويب الخاص بك. ولكن يمكنهم أيضًا تضمين صفحات ومنشورات فريدة أخرى مثل صفحة المتجر أو صفحة المنتج أو حتى الصفحة الرئيسية. على سبيل المثال ، حتى نحن في QuadLayers استخدمنا CSS على صفحات معينة مثل Portfolio و About لجعلها مختلفة عن الصفحات أو أنواع المنشورات الأخرى. الآن ، دون مزيد من اللغط ، دعنا ننتقل إلى العملية. كيفية تطبيق CSS على صفحة معينة أو منشور هناك عدة طرق يمكنك من خلالها إضافة تطبيق CSS على صفحة أو منشور معين. ولكن ، هنا 3 الأكثر شيوعًا : باستخدام معرف HTML أو الفئة إضافة وظيفة PHP بما في ذلك ملف CSS في صفحة أو منشور معين يمكن استخدام كل هذه الأساليب لتطبيق CSS لأغراض متعددة. سنستعرض كل هذه الأساليب في هذه المقالة مع برنامج تعليمي مناسب خطوة بخطوة. 1. استخدام معرف HTML أو فئة هذا هو أحد الأساليب الأكثر شيوعًا والمقبولة على نطاق واسع إذا كنت تريد تطبيق CSS على صفحة أو منشور معين. كل ما نحتاج إلى القيام به هو الحصول على معرف فريد تحتويه الصفحة أو المنشور. بعد ذلك ، تسمح لنا فئة أو معرف HTML هذا باستهداف جميع نصوص CSS الخاصة بنا إلى الصفحة أو المنشور المطلوب. 1.1. ابحث عن فئة HTML أو معرف الصفحة أولاً ، يجب عليك معرفة المعرف أو الفئة المراد استخدامها نص CSS. يمكن العثور على هذا بسهولة بمساعدة أداة فحص المتصفح. فقط افتح الصفحة حيث تريد تطبيق CSS و انقر بزر الماوس الأيمن على العنصر الذي تريد تحريره. ثم اضغط على تفحص . هنا ، تحقق من علامة HTML الخاصة بالنص. سيختلف هذا وفقًا للموضوع الذي تستخدمه. لقد استخدمنا موضوع Twenty Twenty في جميع الأمثلة التالية. إذن ، هذا ما ستراه عندما تتفقد الصفحة الرئيسية لموقع ويب باستخدام قالب Twenty Twenty: من لقطة الشاشة أعلاه ، المعرف الفريد للصفحة الرئيسية هو ” البيت “فئة. لذلك ، إذا كنت ترغب في تطبيق بعض قواعد CSS على الصفحة الرئيسية فقط ، فأنت بحاجة إلى استخدام هذه الفئة في المحددات الخاصة بك. على سبيل المثال ، لنفترض أننا نريد لتطبيق بعض النمط على الشعار فقط على الصفحة الرئيسية . بعد ذلك ، إلى جانب فئة المنزل ، نحتاج أيضًا إلى محدد صورة الشعار. مرة أخرى ، يمكن الحصول على هذا من أداة فحص المتصفح. في هذه الحالة ، سنستخدم فئة “الشعار المخصص” لتطبيق أسلوبنا على الشعار. الآن ، دعنا نجمعها مع الفصل الذي تم الحصول عليه في الخطوة السابقة. أخيرًا ، يمكننا تطبيق البرنامج النصي الخاص بنا فقط على الصفحة الرئيسية باستخدام محدد CSS التالي: . home. Custom-logo {/ CSS الخاص بك هنا /} ملاحظة: لا تحتاج إلى متابعة كل ما بين وسوم HTML وتضمينها في محددك. يمكنك تخطيها جميعًا حتى لو كان العنصر الذي تريد تنسيقه بعيدًا عن محدد الصفحة الفريد. بالطبع ، إذا كنت بحاجة إلى محدد أكثر تحديدًا ، يمكنك استخدام محدد مسار CSS الكامل. ولكن هذا أمر مربك للغاية ولن يكون ضروريًا في معظم الحالات. كمثال ، هذا محدد محدد جدًا لتصميم نفس عنصر الشعار الذي ” لقد رأينا من قبل: html body.home div # page.site header # masthead div.site-branding div.site-logo span.custom-logo-link img.custom- الشعار {/ الخاص بك CSS هنا /} 1.2. ابحث عن فئة HTML أو معرف المنشور على غرار الصفحات ، يجب أن يكون هناك فئة HTML فريدة لكل منها آخر أيضا. مرة أخرى ، افحص فقط العنصر الموجود في المنشور الذي تريد تطبيق CSS بمساعدة أداة مطور المتصفح. بعد ذلك ، ستتمكن من رؤية المعرف الفريد كما هو الحال مع postid السمة. بالنسبة للمنشور التالي الذي يحتوي على نسق Twenty Twenty ، فإن الفئة التي تحدد هذه التدوينة هي بعد معرف – 557. . وبالمثل ، يمكنك أن تفعل الشيء نفسه مع أي صفحة أخرى من موقع الويب. استخدام الفئة الفريدة التي تحدد الصفحة. إذا نظرت إلى لقطة الشاشة التالية ، يمكنك أن ترى أن الفئة التي تحدد الصفحة هي معرف الصفحة – 129 . أخيرًا ، قم بإنشاء محدد CSS الخاص بك الذي يناسب احتياجات موقع الويب الخاص بك تمامًا مثل مثال الشعار المخصص. بعد ذلك ، يمكنك تطبيق CSS على صفحة معينة أو منشور عن طريق إضافته في مظهر > تخصيص> CSS إضافي . إذا كنت بحاجة إلى مزيد من المساعدة في ذلك ، فيمكنك إلقاء نظرة على دليلنا حول كيفية تطبيق CSS على WordPress أو تطبيق CSS باستخدام أداة مطور المتصفح. 2. إضافة دالة PHP الطريقة السابقة مناسبة لتطبيق CSS المخصص لدينا على منشورات أو صفحات محددة. سيكون كافيًا لمعظم التخصيصات التي قد تحتاجها. لكن في بعض الحالات ، يمكن أن تكون هناك قيود: لا يحتوي المظهر الخاص بك على أي فئة أو معرف HTML فريد للمحتوى الذي تريد تصميمه. لديك قائمة كبيرة من قواعد CSS وتحتاج إلى حفظها في ملفات منفصلة. تريد تطبيق شرط آخر بجانب الصفحة الحالية. إذا كانت لديك مشكلات مماثلة عندما تريد تطبيق CSS على صفحة معينة أو منشور ، باستخدام دالة PHP سيكون أفضل. ولكن قبل أن نبدأ ، تأكد من عمل نسخة احتياطية من موقع WordPress الخاص بك أو قم بإنشاء سمة فرعية لهذا الأسلوب. سنقوم بتحرير بعض الملفات الحساسة على موقع الويب الخاص بك. لذلك ، قد تؤدي أي تغييرات غير ضرورية إلى مزيد من المشكلات مع موقع الويب الخاص بك. إذا كنت بحاجة إلى مساعدة ، يمكنك حتى استخدام أحد أفضل المكونات الإضافية للقوالب الفرعية لـ WordPress لإنشاء موضوع فرعي. 2.1. ابحث عن معرف الصفحة / المنشور الخطوة الأولى هي التحقق من معرف الصفحة أو المنشور الذي نريده لتطبيق أنماطنا. قد تلاحظ أن قيم المعرف هي نفس قيم الخطوة السابقة. ومع ذلك ، ليس هذا هو نفس معرف HTML الذي استخدمناه من قبل. المعرف الذي نشير إليه الآن هو متغير PHP يحدد المنشورات والصفحات. حيث إن المعرف في النهج السابق يحدد فئة HTML. لحسن الحظ ، من السهل جدًا العثور على الصفحة ومعرف النشر على موقع الويب الخاص بك. يمكنك رؤية معرف الصفحات والمنشورات على لوحة تحكم مسؤول الواجهة الخلفية عندما تقوم بفتح المحرر . المنشور أو معرف الصفحة مذكور على عنوان URL لمتصفحك. طريقة أخرى للحصول على معرف الصفحة أو النشر يستخدم البرنامج النصي التالي على jobs.php ملف ثيم فرعي. ما عليك سوى الانتقال إلى Appearance> Theme Editor وافتح ملف jobs.php . ثم قم بلصق المقتطف التالي في المحرر و قم بتحديث الملف. سيتم طباعة معرف الصفحة على الواجهة الأمامية. add_action (‘wp_head ‘، function () {$ page_id = get_queried_object_id ()؛ echo $ page_id؛})؛ بعد أن تعلم معرف PHP للمنشور أو الصفحة التي تريد تطبيق CSS عليها ، يمكنك ببساطة طباعة CSS على الرأس. يمكنك استخدام نفس الخطاف الذي استخدمناه من قبل ، على سبيل المثال ، wp_head () . فقط الصق المقتطف التالي على ملف jobs.php مرة أخرى. add_action (‘wp_head’، ‘my_head_css’)؛ function my_head_css () {$ page_id = get_queried_object_id ()؛ إذا ($ page_id == 12){ صدى صوت ” / CSS الخاص بك هنا / “؛ }} تأكد من إضافة CSS على “CSS الخاص بك هنا “و تحديث الملف. 3. تضمين ملف CSS في صفحة أو منشور معين الطرق السابقة جيدة لإضافة أجزاء صغيرة من CSS للتخصيص الأساسي الذي آخر أو الصفحة تتطلب. ولكن بالنسبة لنصوص CSS الأكبر حجمًا ، يجب عليك اتباع الممارسات الجيدة وتحميل ملف CSS منفصل. حيث يجب جمع كل CSS المخصص الخاص بك. 3.1. قم بإنشاء ملف CSS باستخدام محرر الكود أولاً ، تحتاج إلى إنشاء ملف CSS منفصل مع جميع البرامج النصية الضرورية CSS باستخدام محرر كود. يمكن استخدام برامج تحرير مثل Visual Studio Code أو Sublime text أو أي برامج أخرى تدعم ملفات CSS. ثم ، قم بإنشاء ملف جديد بامتداد CSS والصق كود هنا. لقد قمنا بتسمية الملف my-style.css لهذا البرنامج التعليمي. 198194 3.2. قم بتحميل ملف CSS إلى مجلد سمة الطفل الآن ، يجب تحميل ملف CSS الذي قمت بإنشائه إلى القالب الفرعي الدليل. لهذا ، يمكنك استخدام عميل FTP مثل FileZilla لتحميل الملف. يمكنك حتى تحميله في دليل السمات الفرعية الرئيسي نفسه. 139370 3.2. قم بإدراج ملف CSS المخصص في قائمة الآن ، يمكنك إدراج ملف CSS المخصص الخاص بك في قائمة WordPress موقع الويب الخاص بك عن طريق إضافة مقتطف الشفرة إلى ملف function.php . في النص التالي ، سنستخدم ال wp_enqueue_script () ، وهي الطريقة الصحيحة لتطبيق ملفات CSS على موقع WP. داخل الوظيفة ، نقوم بالتسجيل وإدراج ملف CSS الخاص بنا (( my-styles.css ) فقط إذا تم استيفاء الشرط. هذا هو نفس استخدام المثال السابق. ثم get_queried_object_id () ستسترجع الوظيفة معرف الصفحة الحالية أو المنشور. كل ما عليك فعله هو إضافة البرنامج النصي التالي إلى ملف jobs.php مرة أخرى و Update هو. add_acti على (‘wp_enqueue_scripts’، ‘my_theme_styles’) ؛ الوظيفة my_theme_styles () {if (get_queried_object_id () == ) {wp_register_style (‘my-styles’، get_stylesheet_directory_uri (). ‘/ my-styles. css ‘) ؛ wp_enqueue_style (‘my-Styles’، get_stylesheet_directory_uri (). ‘/my-styles.css’) ، } } ملحوظة: في نموذج البرنامج النصي أعلاه ، نشير إلى نفس مرجع المعرف الذي استخدمناه في الأمثلة السابقة ، وهو . إذا كنت تريد مزيدًا من المعلومات حول إضافة ملف CSS ، فيرجى إلقاء نظرة على دليلنا المفصل لتطبيق CSS على WordPress. الخلاصة هذه هي جميع الطرق المختلفة التي يمكنك من خلالها تطبيق CSS على صفحة أو منشور معين . يمكن أن يساعدك كثيرًا في إنشاء تصميمات فريدة لصفحات ومنشورات معينة لموقعك على الويب. للتلخيص ، هناك 3 طرق شائعة لإضافة CSS إلى صفحات ومشاركات محددة: باستخدام معرف HTML أو الفئة إضافة دالة PHP بما في ذلك ملف CSS في صفحة أو منشور معين الطريقة الأكثر مباشرة للخروج منها هي استخدام معرف HTML أو فئة لمحددات CSS. ومع ذلك ، إذا كان الموضوع الخاص بك يحتوي على أي قيود عليه ، فإن خيارك الأفضل التالي هو إضافة وظيفة PHP لتطبيق CSS. أخيرًا ، إذا كان عليك تطبيق نصوص CSS كبيرة لصفحة أو منشور معين ، فإن تضمينها في ملف CSS هو الأسلوب الأنسب لك. إذا إذا كنت ترغب في استخدام المزيد من CSS على موقع الويب الخاص بك ، فلدينا أيضًا برامج تعليمية لتخصيص قائمة Divi باستخدام CSS أو تحرير متجر WooCommerce برمجيًا. وبالمثل ، يمكنك أيضًا تخصيص صفحاتك ومنشوراتك بشكل أكبر بمساعدة أدلةنا لإنشاء منشورات وصفحات برمجيًا ، أو تحويل منشور إلى صفحة ، أو إنشاء نوع منشور مخصص ، أو حتى إضافة منشورات إلى صفحة في WordPress. إذن ، هل يمكنك تطبيق CSS على صفحات أو منشورات محددة الآن؟ هل كان هذا البرنامج التعليمي مفيد؟ لو سمحتوا دعونا نعرف في التعليقات. في غضون ذلك ، إليك بعض المقالات الأخرى التي قد ترغب في زيارتها: كيفية تحويل / تغيير نوع المنشور في WordPress إنشاء نوع منشور مخصص برمجيًا على WordPress كيف لتخصيص صفحة عربة WooCommerce