Cara Menambahkan Kelas Peramban Pengguna dan OS di Kelas Tubuh WordPress

Saat mengembangkan tema WordPress, terkadang Anda mungkin memerlukan informasi dari browser dan sistem Pengguna untuk memodifikasi aspek tertentu dari desain Anda menggunakan CSS atau jQuery. WordPress mampu melakukan itu untuk Anda. Pada artikel ini, kami akan menunjukkan cara menambahkan kelas browser pengguna dan sistem operativo di kelas body WordPress.

Secara default, WordPress menghasilkan kelas CSS untuk berbagai bagian situs web Anda. Ini juga menyediakan filter, sehingga pengembang tema dan plugin dapat menghubungkan lapisan mereka sendiri. Anda akan menggunakan filter body_group untuk menambahkan informasi tentang browser dan operasi sistem sebagai kelas CSS.

Hal pertama yang harus dilakukan adalah menambahkan kode berikut ke file .php tema Anda.

        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');

Bagian pertama dari skrip ini mendeteksi browser pengguna dan menambahkannya ke $. Bagian kedua mendeteksi sistem operasi pengguna dan juga menambahkannya ke $. Baris terakhir menggunakan filter tubuh WordPress untuk menambahkan kelas.

Sekarang Anda perlu menambahkan kelas tubuh

Tag HTML di file header.php tema Anda. Ganti garis tubuh di file template Anda dengan kode ini:

>

Perhatikan bahwa jika Anda bekerja dengan tema pemula seperti garis bawah atau kerangka kerja tema yang dikodekan dengan baik seperti Genesis maka tema Anda akan memiliki fungsionalitas kelas tubuh di tag tubuh. Setelah kode diterapkan, Anda akan melihat kelas browser dan sistem operasi dengan tag tubuh di sumber HTML. Anda juga akan melihat bahwa WordPress akan menambahkan kelas lain ke tag tubuh.

Anda sekarang dapat mendesain kelas untuk berbagai browser dan sistem operasi, atau menggunakannya sebagai penyeleksi di jQuery. Kami harap artikel ini membantu Anda mendeteksi browser dan informasi browser. sistem operasi pengguna di WordPress.

Jika Anda baru memulai pengembangan tema WordPress, Anda juga dapat melihat pengantar kami tentang Sass dan WordPress Body Class 101 untuk desainer tema baru. Beri tahu kami jika Anda memiliki komentar atau pertanyaan dengan meninggalkan komentar di bawah.

Sumber: Justin Sternberg