วิธีเพิ่มเบราว์เซอร์ผู้ใช้และคลาส OS ใน WordPress Body Class

---

เมื่อพัฒนาธีม WordPress บางครั้งคุณอาจต้องการข้อมูลเบราว์เซอร์และระบบปฏิบัติการของผู้ใช้เพื่อแก้ไขลักษณะบางอย่างของการออกแบบของคุณโดยใช้ CSS หรือ jQuery WordPress สามารถทำสิ่งนั้นเพื่อคุณได้ ในบทความนี้ เราจะแสดงวิธีเพิ่มเบราว์เซอร์ของผู้ใช้และคลาส OS ในคลาสของ WordPress

ตามค่าเริ่มต้น WordPress จะสร้างคลาส CSS สำหรับส่วนต่างๆ ของเว็บไซต์ของคุณ นอกจากนี้ยังมีตัวกรองเพื่อให้นักพัฒนาธีมและปลั๊กอินสามารถเชื่อมโยงคลาสของตนเองได้ คุณจะใช้ตัวกรอง body_class เพื่อเพิ่มข้อมูลเบราว์เซอร์และระบบปฏิบัติการเป็นคลาส CSS

สิ่งแรกที่คุณต้องทำคือเพิ่มโค้ดต่อไปนี้ลงในไฟล์ Functions.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 เช่นกัน บรรทัดสุดท้ายใช้ตัวกรอง WordPress body_class เพื่อเพิ่มคลาส

ตอนนี้ คุณต้องเพิ่มคลาสเนื้อหาให้กับแท็ก HTML <body> ในไฟล์ header.php ของธีมของคุณ แทนที่เส้นเนื้อหาในไฟล์เทมเพลตของคุณด้วยโค้ดนี้:

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

โปรดทราบว่าหากคุณกำลังทำงานกับธีมเริ่มต้น เช่น ขีดล่างหรือเฟรมเวิร์กธีมที่มีโค้ดอย่างดี เช่น Genesis ธีมของคุณก็จะมีฟังก์ชันคลาสเนื้อหาในแท็ก body อยู่แล้ว เมื่อนำโค้ดไปใช้แล้ว คุณจะสามารถดูคลาสของเบราว์เซอร์และระบบปฏิบัติการที่มีแท็ก body ในซอร์ส HTML ได้ คุณจะสังเกตเห็นว่า WordPress จะมีคลาสอื่นเพิ่มให้กับแท็ก body

ตอนนี้คุณสามารถจัดสไตล์คลาสสำหรับเบราว์เซอร์และระบบปฏิบัติการที่แตกต่างกัน หรือใช้เป็นตัวเลือกใน jQuery เราหวังว่าบทความนี้จะช่วยคุณตรวจจับข้อมูลเบราว์เซอร์และระบบปฏิบัติการของผู้ใช้ใน WordPress

หากคุณเพิ่งเริ่มต้นด้วยการพัฒนาธีม WordPress คุณอาจต้องการดูบทแนะนำของเราเกี่ยวกับ Sass และ WordPress Body Class 101 สำหรับนักออกแบบธีมใหม่ แจ้งให้เราทราบหากคุณมีข้อเสนอแนะหรือคำถามใด ๆ โดยแสดงความคิดเห็นด้านล่าง

ที่มา: จัสติน สเติร์นเบิร์ก