Products
GG网络技术分享 2025-03-18 16:13 0
XSzeng企业主题是一款简约高端企业通用产品展示WordPress主题，设计上简约、干净、精致、响应式，功能上可满足任意企业官网的使用。
基于bootstrap响应式布局，兼容PC、平板、手机等主流媒体浏览，可嵌入微信公众号作为微网站使用；
导航菜单设置有快捷下拉菜单，可根据需要开启或关闭；
自定义首页幻灯图片和链接；
自定义每个页面和不同分类内页顶部banner图片；
侧边栏设置可选择小工具；
独立主题设置页面，方便管理网站LOGO\\标题\\关键词\\描述\\广告\\版权\\联系方式等信息。
针对首页、列表页、单页面、文章页都做了SEO相关关键词、描述设置字段，让您方便地为您网站所有页面自定义关键字和描述。
首页采用模块化管理，可以设置模块是否显示或隐藏，设置模块的标题，显示内容，显示条数等。
网站右侧浮动在线客服，包含客服电话、在线QQ、二维码以及返回顶部功能，电话、QQ、二维码均可通过后台设置，同时可以根据需要选择是否启用在线客服。
网站首页公司介绍的地方可以选择文字图片介绍。
响应式网站是未来网站的大趋势，越来越受到众多站长的追捧。当然，作为wordpress站长，也不会落后，所以在开发wordpressCMS主题时，我们也要努力地向响应式的wordpress主题方向发展。什么是响应式？就是一个网页在不同的客户端都能正常显示，比如一个非响应式网页在PC端能正常显示，而在手机端依然会按PC布局显示，那样，页面字体及宽度都是和手机浏览不相附的。而响应式网页不会这样，PC端以PC端的样式显示，手机端就以手机端的样式显示。
那么，响应式WordPress主题是如何开发的？有以下关键三步：
第一步：判断客户端。
在wordpressCMS主题的header.php文件的<head></head>之间添加判断客户端的代码。也就是先判断一下，是手机还是pc。代码如下：
<linkrel=\"stylesheet\"type=\"text/css\"href=\"/lib/css/style.css\"media=\"screenand(min-width:640px)\"/>
<linkrel=\"stylesheet\"type=\"text/css\"href=\"/lib/css/style-mobile1.css\"media=\"screenand(min-width:300px)and(max-width:480px)\">
<linkrel=\"stylesheet\"type=\"text/css\"href=\"/lib/css/style-mobile2.css\"media=\"screenand(min-width:480px)and(max-width:640px)\">
上面这段代码做了3次判断：第1句是“屏幕宽度最小为640px”，第2句是“屏幕宽度最小300px，最大480px”，第3句是“屏幕宽度最小480px，最大640px”。目前，手机屏幕一般在300~640px之间。
第二步：在HTML头部增加viewport标签。
<metaname=\"viewport\"content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no\">
参数解说：
viewport视窗
width-视窗的宽度
height-视窗的高度
initial-scale-初始的缩放比例
minimum-scale-允许用户缩放到的最小比例
maximum-scale-允许用户缩放到的最大比例
user-scalable-用户是否可以手动缩放
第三步：添加不同客户端的CSS样式。
然后，我们需要为不同的客户端添加不同的CSS样式，在第一步中的代码中，我们添加了不同的样式文件，第1句中我们添加的样式文件名是style.css，第2句中添加的样式文件名是style-mobile1.css，第3句中添加的样式文件名是style-mobile2.css。这样一来，我们就可以在不同的客户端上浏览到不同的效果。
如果你也想让自己的wordpressCMS主题也变成响应式主题，那就不妨试试上面的方法吧。虽然wordpressCMS主题相对于wordpress博客主题来说，改成响应式有点麻烦，但是，只要花点心思，同样可以做出出色的响应式。
Demand feedback
