Cách tự động thêm lớp trình duyệt vào html trong WordPress

Trích dẫn MDN,

Lưu ý: Cần phải lặp lại: rất hiếm khi sử dụng tính năng đánh hơi tác nhân người dùng là một ý tưởng hay. Bạn hầu như luôn có thể tìm ra cách tốt hơn, tương thích rộng hơn để giải quyết vấn đề của mình!

Ngoài ra, có một số trường hợp nhất định mà bạn cần phải tự động thêm tên trình duyệt vào phần tử html / body trong các trang web của mình. Ví dụ: Xử lý làm nổ hình nền trong Microsoft Edge với và .background-attachment: fixed background-size: cover

Trong bài viết này, tôi chỉ ra cách thư viện Detect.js có thể được sử dụng để thêm tên trình duyệt (ở dạng chữ thường) dưới dạng một lớp cho html phần tử.

Bước 1

Tải lên explore.min.js vào thư mục chủ đề con của bạn js (tạo nếu không có).

Bước 2

Tạo một tệp có tên say, general.js ở cùng một vị trí có mã này:

jQuery(function( $ ){

	var ua = detect.parse(navigator.userAgent);

	$('html').addClass(ua.browser.family.toLowerCase());

});

Bước 3

Thêm phần sau vào functions.php của chủ đề con :

// Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {

	wp_enqueue_script( 'detect', get_stylesheet_directory_uri() . '/js/detect.min.js', '', '1.0.0', true );
	wp_enqueue_script( 'general', get_stylesheet_directory_uri() . '/js/general.js', '', '1.0.0', true );

}