首页>技术知识>WordPress wordpress CMS主题如何让PC和移动端使用不同的模板样式——响应式布局?
WordPress教程学习网站
2022-06-22
WordPress教程学习网站丨模板定制、网站使用教程、插件推荐、代码优化、wp建站教程、数据文章采集、系统开发、系统优化,功能开发,仿站教程等各类WordPress技术知识,供网友学习了解。


WordPress主题开发过程中,为了方便,我们一般采用响应式布局来做wordpress网站,以适应不同的终端。这也是为了让用户在不同的终端上都能看到效果良好的网站布局。作为开发者,我一般采用2种方案来让我的wordpress CMS主题来适应不同的终端。


方案一:完全通过CSS来控制:

这种方案也是大多数WordPress主题开发者所采用的。因为,只需要一个CSS文件,就可以简单实现。

首先,在页面头部添加viewport标签


width:viewport的宽度 【屏幕宽度】
height:viewport的高度
initial-scale :初始的缩放比例
minimum-scale :允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩放

然后,通过CSS根据屏幕宽度来控制布局:

@media screen and (max-width:320px){  //当屏幕宽度 <= 320px时
html{ font-size:12rem; }  //这里,我们就可以设置页面元素在屏宽320px内的样式
}


方案二:先判断终端是PC还是移动端:

意思是说:先通过php或其它方式判断当前访问网站的是手机还是电脑,然后再根据判断来布局。对于布局比较复杂、页面调用数据库比较多的情况下,这种方案比较适用,它可以让一些调用在手机端不调用,以减少数据库调用次数而提升手机端响应时间。

判断终端函数放到functions.php文件中:

function is_mobile() {
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$mobile_browser = Array(
"mqqbrowser", //手机QQ浏览器
"opera mobi", //手机opera
"juc","iuc",//uc浏览器
"fennec","ios","applewebKit/420","applewebkit/525","applewebkit/532","ipad","iphone","ipaq","ipod",
"iemobile", "Windows ce",//windows phone
"240x320","480x640","acer","android","anywhereyougo.com","asus","audio","blackberry","blazer","coolpad" ,"dopod", "etouch", "hitachi","htc","huawei", "jbrowser", "lenovo","lg","lg-","lge-","lge", "mobi","moto","nokia","phone","samsung","sony","symbian","tablet","tianyu","wap","xda","xde","zte"
);
$is_mobile = false;
foreach ($mobile_browser as $device) {
if (stristr($user_agent, $device)) {
$is_mobile = true;
break;
}
}
return $is_mobile;
}

在需要判断的地方添加这个函数来判断,如:在header.php头部文件中判断,如果是PC端就调用style.css文件,如果是移动端就调用mobile.css样式文件:

if(is_mobile()){
echo '<meta name="viewport" content="width=device-width, initial-scale=1/>';
echo '';
}else{
echo '';
}

这样,在PC端就会显示PC端的样式,在手机端就会显示手机端的样式。当然,在页面的其它地方也可以用这个函数来处理,如:PC端有幻灯片,而手机端就不想使用幻灯片…… 等。开发wordpress CMS主题时,以上2种方案都可以使用。

显示全部内容...