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

如果别人做了自适应，你的博客还没有做到话，其他端查看你的网站体验就太差了！我们看下制作wordpress自适应主题的几种常见方法：

第一个就是看一下常见的几个需要自适应的模块，首先是文字需要重新排版，第二块是选项控件，第三块就是图片自适应了！

如果是设置CSS的话，基本的CSS语法：

width:100%;宽度设置百分数 

height:100%;高度设置百分数 

display:none;隐藏不显示 

text-overflow:ellipsis; 超出的文字用省略号 

overflow:hidden; //超出隐藏 

white-space:nowrap; //超出隐藏

利用wordpress自身函数wp_is_mobile()，加载不同CSS

< ?php if (wp_is_mobile() ): ?>

//这里写你要实现的代码

< ?php endif ;?>

//另一种用法

< ?php if ( wp_is_mobile() ){

echo '你正在使用移动设备浏览';

}else{

echo '你目前使用的不是移动设备';

} ?>

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

/**

* 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;

}

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

@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自适应主题中常见的CSS设置方法

0

本文固定链接: https://www.ziyouwu.com/archives/1171.html | 自由屋博客