之前博客没有手机模板，用手机看非常不方便，最近抽了30分钟，做了一个手机模板，超级简单。上线没几天，博客在移动端的搜索排名已经明显好于PC端，说明还是有一定作用的。下面跟大家分享一下我的wordpress手机模板的制作过程。

首先，在header.php文件里加入如下代码，表面自己的网站是适应移动端的：

第二，在function.php中增加is_mobile()函数，判断访问者是用手机还是PC在访问。

function is_mobile() {
$user_agent = $_SERVER[‘HTTP_USER_AGENT’];
$mobile_browser = Array(
“mqqbrowser”, //手机QQ浏览器
“opera mobi”, //手机opera
“juc”,”iuc”,//uc浏览器
“fennec”,”ios”,”applewebKit/420″,”applewebkit/525″,”applewebkit/532″,
“ipad”,”iphone”,”ipaq”,”ipod”,
“iemobile”, “windows ce”,//windows phone
“240×320″,”480×640″,”acer”,”android”,”anywhereyougo.com”,”asus”,”audio”,
“blackberry”,”blazer”,”coolpad” ,”dopod”, “etouch”, “hitachi”,”htc”,”huawei”,
“jbrowser”, “lenovo”,”lg”,”lg-“,”lge-“,”lge”,
“mobi”,”moto”,”nokia”,”phone”,”samsung”,”sony”,”symbian”,”tablet”,
“tianyu”,”wap”,”xda”,”xde”,”zte”
);
$is_mobile = false;
foreach ($mobile_browser as $device) {
if (stristr($user_agent, $device)) {
$is_mobile = true;
break;
}
}
return $is_mobile;
}

第三，用如下代码替换模板中header.php中关联css的代码段。

<?php if (is_mobile() ): ?>
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/mobile.css” type=”text/css” media=”all” />
<?php else: ?>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<?php endif ;?>

如果是移动版，mobile.css就会被引用；如果是PC版，还是引用原来的style.css。

第四，复制style.css，重命名为mobile.css，进行修改，使得移动端的样式符合自己的需要。最简单的修改方式是:

1. 将左侧或右侧导航隐藏，加入代码display:none即可；

2. 将width中的px换成百分比。

用手机访问一下你的wordpress网站，手机模板已经可以访问了。如果做的快的，应该用不了30分钟。