rp_mobile-style1.jpg

Posted by & filed under Wordpress.

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

wordpress手机模板 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分钟。