如果想更好的服务用户或做好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、后台已安装插件中启用插件就可以了。
评论(0)