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

免费教程   2016年06月03日 17:11  

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

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

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

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

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

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

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

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

Wordpress手机主题近年来用户增多

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

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

Wordpress手机主题百度搜索结果

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

Wordpress手机主题百度排名

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

Wordpress手机主题迎合用户需求

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

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

Wordpress手机主题制作的基本原则

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插件。

Wordpress手机主题调用WP插件

1、WPtouch Mobile Plugin

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

Wordpress手机主题使用WPtouch插件

(2)官网:https://wordpress.org/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.功能强大,允许添加自定义的手机主题,支持多站点模式,具备手机用户统计功能。

Wordpress手机主题WordPress Mobile Pack

(2)官网:https://wordpress.org/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二维码和一键拨打电话功能。特色功能就是任意切换移动主题。

Wordpress手机主题Any Mobile Theme Switcher

(2)官网:https://wordpress.org/plugins/any-mobile-theme-switcher/

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

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

Wordpress手机主题效果展示

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

WPtouch 操作界面

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

WPtouch 开启设备自动识别功能

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

WPtouch 菜单图标

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

WPtouch 菜单显示隐藏

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

WPtouch 主题设置

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

WPtouch 是否显示幻灯片

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

WPtouch 添加统计代码

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

WPtouch 开启搜索功能

五、自适应网站做好搜索引擎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默认的主题上修改。

Wordpress手机主题自己动手修改

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.freehao123.com/ 版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。

十个便宜VPS主机分享-VPS服务器建站和搭建应用服务体验
2014年六大免费VPS主机-免费VPS申请、使用和点评

您或许对下面这些文章有兴趣:                    本月吐槽辛苦排行榜

在这个部落村庄里,已经有58 位神马家族成员冒出泡来在农场开始干活了
  • 沙发,我的移动端也用的这个哎

    qi 回复:

    @浩瀚部落格, 这个插件还不错。

    这是农场的第 1 块农田,部落批准 [浩瀚部落格] 在[2016-6-3 17:27]开垦完成.
  • 路人甲 1

    这个是沙发?2016-6-3 17:28:11

    这是农场的第 2 块农田,部落批准 [路人甲] 在[2016-6-3 17:28]开垦完成.
  • RR233CY 17

    移动版怎么访问?

    qi 回复:

    @RR233CY, 直接访问网站网址就行了,自适应的。

    这是农场的第 3 块农田,部落批准 [RR233CY] 在[2016-6-3 17:40]开垦完成.
  • acirno 2

    手机看你这终于不用放大了(笑

    Jim 回复:

    @acirno, 同感!!

    qi 回复:

    @acirno, 是呀,现在方便多了。

    这是农场的第 4 块农田,部落批准 [acirno] 在[2016-6-3 19:40]开垦完成.
  • saber 4

    板凳……

    这是农场的第 5 块农田,部落批准 [saber] 在[2016-6-3 19:59]开垦完成.
  • exexue

    支持。。。。。。。。。。。。。。。。。。

    这是农场的第 6 块农田,部落批准 [exexue] 在[2016-6-3 21:44]开垦完成.
  • 还是自适应主题好,插件多了也不好

    qi 回复:

    @黑马行空, 没办法了,自己不想对主题动太大手术,就干脆用插件了。

    这是农场的第 7 块农田,部落批准 [黑马行空] 在[2016-6-4 03:15]开垦完成.
  • 小武 1

    支持!

    这是农场的第 8 块农田,部落批准 [小武] 在[2016-6-4 08:41]开垦完成.
  • 其实我自己用 2012。。。自适应

    qi 回复:

    @sxbxjhwm, 现在的主题基本上都是自适应的了。

    这是农场的第 9 块农田,部落批准 [sxbxjhwm] 在[2016-6-4 09:37]开垦完成.
  • 部落终于上手机版了!

    qi 回复:

    @黄良钵博客, 是呀,之前有好多朋友都要求上手机主题。

    这是农场的第 10 块农田,部落批准 [黄良钵博客] 在[2016-6-4 11:26]开垦完成.
  • 我觉得还是直接使用自适应主题比较好,不过我的另一个wordoress站还是开启了WPtouch插件,这个插件现在界面还蛮不错的,我记得以前用着不舒服卸载了、

    qi 回复:

    @小龙, WPtouch免费插件还有幻灯片浏览效果,挺不错的。

    这是农场的第 11 块农田,部落批准 [小龙] 在[2016-6-4 13:22]开垦完成.
  • 在用自适应 感觉是最好的解决办法了

    qi 回复:

    @免费资源, 如果是自适应的主题,就最好了,不要用什么插件。

    这是农场的第 12 块农田,部落批准 [免费资源] 在[2016-6-4 14:30]开垦完成.
  • 现在好多主题使用bootstrap开发响应式布局主题,自动适应任何设备。

    qi 回复:

    @小z博客, 是呀,我这个主题是零几年的,已经跟不上时代了,每次都是修修补补。我的博客新增加的返回顶部按钮,不知道有没有人注意到。

    qi 回复:

    @小z博客, 你网站无法打开,受到攻击 了?

    小z博客 回复:

    @qi, 这两天遭到DDOS攻击了,时不时的打不开,哎。。。wordpress pingback DDOS攻击:https://www.xiaoz.me/archives/7116

    小z博客 回复:

    @qi, 超过16W的WordPress网站被用来做DDoS攻击:https://drops.wooyun.org/news/1062

    qi 回复:

    @小z博客, 我的WP的关闭了PingBack,这个应该没有问题吧。

    这是农场的第 13 块农田,部落批准 [小z博客] 在[2016-6-4 16:46]开垦完成.
  • uu

    现在都是自适应网站了。

    这是农场的第 14 块农田,部落批准 [uu] 在[2016-6-5 20:57]开垦完成.
  • SaFly 7

    1.感觉手机版代码显示不友好(桌面版也不怎么好,但手机版的都看不下去了。。。),希望使用相关插件
    2.手机版没看到广告

    SaFly 回复:

    @qi,我换头像啦,帮我刷一下我的缓存吧

    qi 回复:

    @SaFly, 地址是:https://pic.freehao123.com/avatar/d7943e3a7447b28f20df3c4658838f3f?s=64,没有更新?

    SaFly 回复:

    @qi, https://avatar2.safly.org/avatar/d7943e3a7447b28f20df3c4658838f3f?s=64
    没有更新的 :neutral:

    qi 回复:

    @SaFly, 刚刚清除了缓存,已经更新了。

    qi 回复:

    @SaFly, 代码展示效果已经优化,欢迎指正。

    SaFly 回复:

    @qi, 代码显示好多啦 :smile:

    这是农场的第 15 块农田,部落批准 [SaFly] 在[2016-6-5 22:36]开垦完成.
  • 被gr的电信http劫持了,打开网站基本都导致avast报读,用上*就正常,tmd!
    上你的网站大部分头像css什么的没了,avast狂弹病毒警告、、、、

    qi 回复:

    @cy91.win, 电信的问题吧?CSS显示不正常?

    小曦 回复:

    @cy91.win, 没有啊,我也用的是Avast!高级版,但是没有出现奇怪的报毒现象啊。(我新@疆= =)

    这是农场的第 16 块农田,部落批准 [cy91.win] 在[2016-6-5 22:47]开垦完成.
  • 有些复杂,好多英文

    这是农场的第 17 块农田,部落批准 [茂名博客] 在[2016-6-6 23:51]开垦完成.
  • 蛋疼实验室路过

    这是农场的第 18 块农田,部落批准 [不认识] 在[2016-6-7 16:22]开垦完成.
  • 泷涯 5

    响应式主题比较好

    qi 回复:

    @泷涯, 现在基本上是趋势了。

    泷涯 回复:

    @qi, 主要是比较简单。但是大型网站基本上都是两套模板甚至于两套程序

    这是农场的第 19 块农田,部落批准 [泷涯] 在[2016-6-9 03:41]开垦完成.
  • 风铃 1

    我这个Wordpress也是在部落学的能帮我看看吗?[url]http://qsxiaocao.ml[/url]

    qi 回复:

    @风铃, 网站挺好的,遇到什么问题了吗?

    风铃 回复:

    @qi, 就不知道独立ip怎么得到

    fourstring 回复:

    @风铃, 独立IP你问博主有何用?如果是免费虚拟主机,我记得就几年前的某体有送独立IP的,现在基本不要想了。付费虚拟主机可以问服务商有没有提供,价格的话每月数刀不等,我以前用过的差不多20一个月/个。至于VPS,除了极少数廉价的奇葩,一般都有独立IP。

    风铃 回复:

    @fourstring, 谢谢

    这是农场的第 20 块农田,部落批准 [风铃] 在[2016-8-6 15:13]开垦完成.
  • 陈大大

    为什么安装WPtouch插件后,手机端网页一片空白啊😱。在本地测试的好好的,openshift空间上就不行了,求解?

    qi 回复:

    这个应该和空间有关系,你可以打开wp的bug模式,看看是不是有错误。

    这是农场的第 21 块农田,部落批准 [陈大大] 在[2016-9-11 21:43]开垦完成.
  • 关于wordpress的文章好久没更新了哦~~

    qi 回复:

    @龙笑天, 是的,主要是感觉没有什么可以写的了。

    龙笑天 回复:

    @qi, 不能有这种感觉!!!

    qi 回复:

    @龙笑天, 哈哈,主要是感觉Wordpress好像不能写出点新的东西出来。

    这是农场的第 22 块农田,部落批准 [龙笑天] 在[2016-11-2 22:57]开垦完成.
  • 我也用过这个移动主题,但不太会设置,只能在2012上更改了

    qi 回复:

    @唯历史, 我是在原主题直接改的。

    这是农场的第 23 块农田,部落批准 [唯历史] 在[2016-11-28 10:52]开垦完成.
  • 我换来换取的,这个主题是不是特别影响网页打开速度?是不是特别占cpu呢?因为我用P3检测,这个占了70%

    qi 回复:

    @松本, 有点,因为它是全动态PHP的,且多处进行了调整。

    这是农场的第 24 块农田,部落批准 [松本] 在[2016-11-28 15:39]开垦完成.
看贴要回贴有N种理由!看帖不回贴的后果你懂得的!


(Ctrl + Enter提交)   

部落快速搜索栏

热门点击排行榜

网站导航栏

X
返回顶部