كيفية إضافة مستعرض المستخدم وفئات نظام التشغيل في فئة Body ووردبريس

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

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

الكشف عن منصة المستخدم والمتصفح في ووردبريس

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

أول شيء عليك القيام به هو إضافة الكود التالي في ملف function.php الخاص بالقالب .

function mv_browser_body_class($classes) {
        global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
        if($is_lynx) $classes[] = 'lynx';
        elseif($is_gecko) $classes[] = 'gecko';
        elseif($is_opera) $classes[] = 'opera';
        elseif($is_NS4) $classes[] = 'ns4';
        elseif($is_safari) $classes[] = 'safari';
        elseif($is_chrome) $classes[] = 'chrome';
        elseif($is_IE) {
                $classes[] = 'ie';
                if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
                $classes[] = 'ie'.$browser_version[1];
        } else $classes[] = 'unknown';
        if($is_iphone) $classes[] = 'iphone';
        if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
                 $classes[] = 'osx';
           } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
                 $classes[] = 'linux';
           } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
                 $classes[] = 'windows';
           }
        return $classes;
}
add_filter('body_class','mv_browser_body_class');

يكتشف الجزء الأول من هذا البرنامج النصي متصفح المستخدم ويضيفه إليه $classes. الجزء الثاني يكتشف نظام التشغيل الخاص بالمستخدم ويضيفه $classesأيضًا. يستخدم السطر الأخير body_classمرشح  ووردبريس لإضافة فئات.

أنت الآن بحاجة إلى إضافة فئة الجسم إلى <body>علامة HTML في header.phpملف المظهر الخاص بك . استبدل الخط الأساسي في ملف القالب بهذا الرمز:

<body <?php body_class(); ?>>

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

إضافة معلومات المتصفح ونظام التشغيل في فئة نص ووردبريس

يمكنك الآن تصميم الفئات لمتصفحات وأنظمة تشغيل مختلفة أو استخدامها كمحددات في jQuery. نأمل أن تساعدك هذه المقالة في اكتشاف معلومات متصفح المستخدم ونظام التشغيل في  ووردبريس.

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

المصدر: جاستن ستيرنبرغ

خدمات مميزة لآجلك

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

اشترك معنا لمزيد من المعرفة

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

توضيح

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

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

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}