WordPress手机主题移动版优化方案-WPtouch安装使用

文章目录

• 为什么移动优化
• 制作自适应主题
• 用插件打造手机站
• WPtouch安装设置
• 百度移动适配方法
• 手机主题优化小结

前一段部落已经用上了Wordpress手机版主题，刚一上线就惊喜地发现原来有不少的朋友一直在用手机等移动客户端浏览博客，由此看来移动流量已经到了不得不重视的地步。之前一直用百度统计查看客户端信息，发现来自PC的流量占了绝大多数。

而移动流量却基本上可以忽略不计。直到有一天突然看到一篇文章才猛然醒悟不是来自移动客户端的流量少，而是一直以来博客都没有针对移动客户端做好体验优化。久而久之，搜索引擎不给关键字排名，直接浏览用户越来越少，也就导致了统计中的“忽略不计”的结果了。

搭建一个Wordpress手机主题移动版也不是一件难事，现在网上的Wordpress主题基本上都是自适应的，平板、手机和PC电脑等基本上都是兼容的，强大的Wordpress插件也可以让我们自定义Wordpress手机主题和样式，搭建一个WP手机站基本上就是分分钟钟的事情。

鉴于百度搜索引擎在国内强大的占有率，坑爹的百度还会针对没有手机端的网站页面进行转码，所以我们很有必要利用百度移动适配来做好移动百度的SEO优化。关于Wordpress主题和优化的方法，还可以参考：

• 1、正版主题：国外优秀网站模板平台Themeforest付费WordPress主题购买下载安装方法
• 2、总结汇总:WordPress性能优化加速五大方法:PHP,MysqL优化和评论,图片静态文件加速
• 3、用户体验：WordPress优化：查询百度收录,自动同步微博带图片,年月日排名读者墙

WordPress手机主题移动版优化方案WPtouch安装使用百度移动适配设置

一、为什么要做好Wordpress手机主题移动版优化？

1、为了获取移动用户流量。使用手机、平板等移动终端上网和获取信息的用户越来越多，原来只能在PC上进行社交和娱乐活动，现在基本上可以在手机上操作了。加上近几年国内移动用户的增加，这其中蕴藏着无限的“机遇”。

2、为了获取搜索引擎移动版中更好的排名。使用手机上网的用户越来越多，百度等搜索引擎早在几年前就已经开始针对移动站点进行的索引优化，对于那些自适应网站，搜索引擎会优先考虑放在前面，增加他们的曝光度。

（1）以免费资源部落分别在百度PC端和百度移动端（m.baidu.com）的搜索结果为例，同样一个关键字会出现不同的搜索结果，有的甚至前十个搜索结果都不同。

（2）由于部落长期以来忽视了移动用户的体验，所以在百度移动端（m.baidu.com）搜索“免费PHP空间”排名不如PC端的百度搜索结果。

3、为了提升网站用户粘度。以前用户都是用PC来上网，现在用手机的时间大大超过了PC，我们自然应该调整策略来迎合大众的需要，毕竟没有用户网站的广告收入也是无从谈起。

二、快速制作Wordpress自适应主题的方法

1、基本原则就是：文字流式，控件弹性，图片等比缩放。掌握了这三个技能，就可以制作出漂亮的网站移动主题了。

2、基本的CSS语法：

1 2 3 4 5 6

width:100%;宽度设置百分数 height:100%;高度设置百分数 display:none;隐藏不显示 text-overflow:ellipsis; 超出的文字用省略号 overflow:hidden; //超出隐藏 white-space:nowrap; //超出隐藏

3、加载不同的CSS方法：

（1）利用Wordpress自带的函数：wp_is_mobile()。用法：

1 2 3 4 5 6 7 8 9

< ?php if (wp_is_mobile() ): ?> //这里写你要实现的代码 < ?php endif ;?> //另一种用法 < ?php if ( wp_is_mobile() ){ echo '你正在使用移动设备浏览'; }else{ echo '你目前使用的不是移动设备'; } ?>

（2）wp_is_mobile()函数在wp-includes/vars.php，已经可以自动识别安卓、苹果等主流浏览器，你也可以根据国内的情况添加UC、QQ等浏览器。代码示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/** * Test if the current browser runs on a mobile device (smart phone, tablet, etc.) * * @return bool */ function wp_is_mobile() { if ( empty($_SERVER['HTTP_USER_AGENT']) ) { $is_mobile = false; } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.) || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) { $is_mobile = true; } else { $is_mobile = false; }   return $is_mobile; }

（3）利用CSS判断语句：@media screen and （最大）and（最小）。用法示例：

1 2 3 4 5

@media screen and (min-width:200px) and (max-width:600px){ //移动CSS样式 } //另外一种直接引用方法 <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)"/>

三、使用Wordpress插件快速打造WP手机网站

WordPress功能强大，其实主要还是归功于Wordpress各类插件。想要把自己的Wordpress打造成为自适应网站，完全可以下载安装WP插件。

1、WPtouch Mobile Plugin

（1）说到Wordpress手机主题插件，一般都会提到WPtouch。这个插件支持 iPhone, iPod touch, Android , BlackBerry OS6+ 等手机客户端，功能强大，更新及时，国内外用户众多。免费版本的WPtouch不能添加第三方手机主题，但是可以自己动手修改默认主题。

（2）官网：https:///plugins/wptouch/

2、WordPress Mobile Pack

（1）全新的WordPress Mobile Pack 2.0+由原插件的基础进行了代码重建，支持iPhones, Android smartphones, Windows Phone 8, Firefox OS.兼容Safari, Google Chrome, Android - Native Browser, Internet Explorer 10 and Firefox.功能强大，允许添加自定义的手机主题，支持多站点模式，具备手机用户统计功能。

（2）官网：https:///plugins/wordpress-mobile-pack/

3、Any Mobile Theme Switcher

（1）这款Wordpress手机主题插件支持Iphone / Ipod、Ipad、Palm Os、Android、Android Tab、Windows Mobile、Blackberry、Opera Mini等，兼容W3 Total Cache，支持QR code二维码和一键拨打电话功能。特色功能就是任意切换移动主题。

（2）官网：https:///plugins/any-mobile-theme-switcher/

四、WPtouch Mobile Plugin安装和配置方法

1、经过综合比较，部落博客最终选择了WPtouch Mobile Plugin这款插件，默认自带的移动主题自己又修改一下，最后呈现出来的效果如下（点击放大）：

2、直接到Wordpress后台搜索WPtouch Mobile Plugin并安装，这是WPtouch Mobile Plugin后台界面，一般、设备、菜单设置、主题设置等。（点击放大）

3、在“设备”选项中可以开启对安卓、苹果、Opera、FireFox等移动设置的自动识别功能。

4、“菜单设置”中可以配置菜单链接，为菜单选项设置图标等，插件自带不少好看的图标，也支持手动上传图标。（点击放大）

5、这是利用WPtouch打造的Wordpress移动主题菜单栏，点击图片可以显示或者隐藏。（点击放大）

6、“主题设置”可以上传Logo，决定菜单栏是放在左边还是右边，是否显示搜索。

7、字体设置建议使用浏览器默认字体，使用Google字体会出现无法打开页面的情况。还可以设置是否显示幻灯片、评论、最新文章等。（点击放大）

8、“页脚”则可以添加你自己的JS文件，例如统计、广告代码等。

9、WPtouch安装后搜索和菜单栏点击没有反应？这主要是由于你的WP主题加载的jQuery版本低于1.7。解决方法就是在自定义“页脚”中引用jQuery 2.0 以上的。

五、自适应网站做好搜索引擎SEO优化-百度移动适配

1、百度移动适配主要是针对PC和手机站采用不同的域名的网站，站长可以根据百度制定的提交规则，采用规则适配和URL适配等方式，帮助百度移动搜索快速匹配结果。简单地说，搜索技术不行，人工来助阵。

2、自适应网站有没有必要再单独针对手机站设立一个域名？答案是：完全没有必要。请看百度站长工具官方发布的移动建站问答，再来想想Google等搜索引擎有没有搞这类的“创举”，就明白移动适配是百度当前技术“软肋”的权宜之计。

3、使用Meta标签协议规范（在/head前标注，表示页面同时适合在移动设备和PC上进行浏览。）：

1 2	<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="applicable-device"content="pc,mobile"/>

4、然后到百度站长工具的“站点属性”将网站设置为自适应网站。

5、提交后，等待百度站长平台审核通过即可。

六、Wordpress手机主题移动版优化

1、一劳永逸的方法就是直接安装和使用自适应Wordpress主题，现在网上的WP主题基本上满足这个条件了。WPtouch功能强大，但是免费版本的可选主题比较少，当然我们也可以直接在WPtouch默认的主题上修改。

2、正在使用WP Super Cache的朋友，你先需要到WP Super Cache勾选支持Mobile Device Support，在Rejected User Agents处填入以下标识，即让WP Super Cache对移动浏览时不生成缓存。（W3 Total Cache也是一样）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

iPhone iPod Android BB10 BlackBerry webOS IEMobile/7.0 IEMobile/9.0 IEMobile/10.0 MSIE 10.0 iPad PlayBook Xoom P160U SCH-I800 Nexus 7 Touch

文章出自：免费资源部落 https://www./ 版权所有。本站文章除注明出处外，皆为作者原创文章，可自由引用，但请注明来源。