Cách thêm các lớp trình duyệt người dùng và hệ điều hành trong lớp cơ thể WordPress
Khi phát triển các chủ đề WordPress, đôi khi bạn có thể cần thông tin về trình duyệt và hệ điều hành của người dùng để sửa đổi một số khía cạnh nhất định trong thiết kế của bạn bằng CSS hoặc jQuery. WordPress có khả năng làm điều đó cho bạn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm các lớp trình duyệt và hệ điều hành của người dùng vào lớp nội dung WordPress.
Theo mặc định, WordPress tạo các lớp CSS cho các phần khác nhau trên trang web của bạn. Nó cũng cung cấp các bộ lọc để các nhà phát triển chủ đề và plugin có thể kết nối các lớp của riêng họ. Bạn sẽ sử dụng bộ lọc body_class để thêm thông tin về trình duyệt và hệ điều hành dưới dạng lớp CSS.
Điều đầu tiên bạn cần làm là thêm đoạn mã sau vào tệp tin.php của chủ đề.
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');
Phần đầu tiên của tập lệnh này sẽ phát hiện trình duyệt của người dùng và thêm nó vào $classes. Phần thứ hai phát hiện hệ điều hành của người dùng và thêm nó vào $classes. Dòng cuối cùng sử dụng bộ lọc body_class của WordPress để thêm lớp.
Bây giờ bạn cần thêm lớp nội dung vào thẻ HTML <body> trong tệp header.php của chủ đề. Thay thế dòng nội dung trong tệp mẫu của bạn bằng mã này:
<body <?php body_class(); ?>>
Lưu ý rằng nếu bạn đang làm việc với một chủ đề khởi đầu như dấu gạch dưới hoặc các khung chủ đề được mã hóa tốt như Genesis, thì chủ đề của bạn sẽ có chức năng lớp nội dung trong thẻ nội dung. Sau khi mã được triển khai, bạn sẽ có thể xem các lớp trình duyệt và hệ điều hành có thẻ body trong nguồn HTML. Bạn cũng sẽ nhận thấy rằng sẽ có các lớp khác được WordPress thêm vào thẻ body.
Bây giờ bạn có thể tạo kiểu cho các lớp cho các trình duyệt và hệ điều hành khác nhau hoặc sử dụng chúng làm bộ chọn trong jQuery. Chúng tôi hy vọng bài viết này đã giúp bạn phát hiện thông tin trình duyệt và hệ điều hành của người dùng trong WordPress.
Nếu bạn mới bắt đầu phát triển chủ đề WordPress, thì bạn cũng có thể muốn xem phần giới thiệu của chúng tôi về Sass và WordPress Body Class 101 dành cho các nhà thiết kế chủ đề mới. Hãy cho chúng tôi biết nếu bạn có bất kỳ phản hồi hoặc câu hỏi nào bằng cách để lại nhận xét bên dưới.
Nguồn: Justin Sternberg