DeveWork

WordPress 根据浏览器 user-agent 按需加载CSS 文件

在进行前端开发的时候,为了兼容性,比如hack 那个讨厌的IE 浏览器,我们常常需要<!--[if IE X]>这类IE 判断代码来实现hack 的效果。而在WordPress 中,我们可以借助PHP 的功能,通过判断浏览器user-agent 来按需加载CSS 文件——如此不仅仅只是对IE hack,对于chrome 、firefox 等主流浏览器也可以实现不同的样式效果。

先看下面的代码,添加到主题的functions.php 文件下:

function dw_enqueue_styles() {
	global $wp_styles;
	if (!is_admin()) {
		// ua vars
		global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
		// chrome
		if ($is_chrome) {
			wp_register_style('chrome', get_template_directory_uri() .'/chrome.css', false, null);
			wp_enqueue_style('chrome');
		}
	}
}
add_action('wp_print_styles', 'dw_enqueue_styles');

上面的代码应该很容易看懂,具体不解释了;如果你想对chrome 浏览器进行CSS hack,将CSS 代码以chrome.css 保存在主题目录下;如果用户的浏览器是chrome 浏览器,便会加载该chrome.css 文件,非chrome 浏览器绝对不加载——除非浏览器伪装user-agent 。

类似的,对于其他浏览器,则这么写法:

// mozilla firefox 火狐
if ($is_gecko) {
	wp_register_style('mozilla', get_template_directory_uri() .'/mozilla.css', false, null);
	wp_enqueue_style('mozilla');
	}

// safari
if ($is_safari) {
	wp_register_style('safari', get_template_directory_uri() .'/safari.css', false, null);
	wp_enqueue_style('safari');
	}

//IE 浏览器
if ($is_IE) {
       wp_register_style('ie', get_template_directory_uri() .'/ie.css', false, null);
       wp_enqueue_style('ie');
                }

这么说来,如果想对不同浏览器进行不同的样式展示,这个是再好不过的方法了。

代码最初来源自WP-MIX ,感谢原作者。