wordpress手机网站实现方法和代码

如果想更好的服务用户或做好SEO优化,网站友好展示变得越来越重要,所谓友好展示无非就是符合以下几点内容:

1、更快的响应速度;
手机设备因为受限于4G、3G、设备或wifi环境覆盖率等因素,目前还无法与电脑设备相比较,所以手机浏览网站需要网页具有更快的加载速度。
2、无障碍的页面浏览效果;
手机设备的尺寸和电脑的尺寸不同,所以如果之前是以电脑宽度为设计基础的网页,在手机上显示不全、缩放放大等问题就很严重,这种效果肯定不能得到用户的喜欢,所以无论是从css布局还是页面元素设计上,都需要考虑移动设备的展现效果。
3、简洁风格效果;
受限于手机屏幕,手机上展示的网站无法像电脑端一样,太多的广告、大图、多级分类等元素都不是手机网站的选择,网站应该尽量使用简洁的页面元素进行展现。

综上所述,手机网站展示效果和电脑端有很大的不同,这也迫切要求我们网站制作人员需要为手机网站的实现寻找方法,我这里把wordpress网站实现手机展示效果的几种方法分享出来,建站人员可以根据自己的情况灵活选择实现。

方法一:wordpress手机插件法
wordpress最强大的地方莫过于具有海量的插件和主题了,所以当你准备解决wordpress网站的一个问题的时候,首先可以搜索下有没有类似的插件能够快速时间,毫无疑问,wordpress有很多这样的插件,例如:WPtouch、MobilePress等,其中最著名的就是WPtouch,这个插件本身为你的手机网站准备了很多优秀的模板,不过有些模板需要你购买pro版才能使用,免费版也可以实现效果,你可以在网站上简单的摸索下,相信就可以轻松实现手机网站效果了。

方法二:设计具有响应式布局效果的主题;
所谓响应式布局,就是网页在设计的时候会针对不同的浏览设备宽度,自动切换不同套系的css风格样式,从而适应不同设备的展现效果。

例如:当屏蔽≤800px时,使用screen800.css的风格样式:
<link rel="stylesheet" media="(max-width: 800px)" href="screen800.css" />

也可以通过在css文档中添加如下代码,直接把样式写入到一个css文档中:

@media (max-width: 800px) {
这里写上样式内容
}

更多的屏幕尺寸说明可以看下这个页面中介绍:http://www.shejidaren.com/examples/tools/device-metrics/index.html

方法三:单独设计一套符合手机的主题;
为wordpress电脑端和手机端分别设置一套不同的主题风格,然后通过手机调度插件或代码判断。
手机调度插件:

  • Any Mobile Theme Switcher
  • WordPress Mobile Themes
  • Device Theme Switcher

因为WordPress3.4版本开始,WordPress已支持wp_is_mobile函数,所以除了插件之外,你也可以使用下面的代码实现手机调度:
<?php if ( wp_is_mobile() ){
echo '正在使用移动设备浏览';
}else{
echo '目前使用的不是移动设备';
} ?>

代码具体使用流程:
1、创建一个mobile_theme.php文件,并粘贴以下代码到文件中:(名称可随意)
<?php
/*Plugin Name: mobile_theme*/
function mobile_switch_theme($theme){
if( wp_is_mobile() ){
$theme = 'mobilethemename'; //手机端使用的主题名称
}
return $theme;
}
add_filter('template', 'mobile_switch_theme');
add_filter('stylesheet', 'mobile_switch_theme');
?>

2、上传mobile_theme.php文件到插件文件夹\wp-content\plugins\里面;
3、后台已安装插件中启用插件就可以了。

评论

微信扫描,手机学习

学建站网