我们知道 xiu 主题有 3 种布局
、分别为左右两栏、左中右三栏和上下布局，这是如何实现的呢？
xiu 主题的 body 里面有这样一串代码：
<body <?php body_class( hui_bodyclass() ); ?>>
具体的函数就是
function hui_bodyclass(){
$class = '';
if( (is_page() || is_single()) && _hui('post_p_s') ){
$class .= ' post_p_indent';
}
if( !_hui('search_nav') ){
$class .= ' search_not';
}
if( _hui('list_thumb_left') ){
$class .= ' excerpt_thumb_left';
}
global $paged;
if( !$paged && _hui('focusslide_s') && _hui('focusslide_s_m') ){
$class .= ' focusslide_s_m';
}
if( _hui('layout_mo') ){
$class .= ' uimo';
}
return trim(trim($class).' '._hui('layout'));
}
也就是通过后台的设置来判断前台输出的 css 类，通过定义不同的 css 样式来实现 wordpress 网站的前台的多种布局。
body 中添加了 body_class()函数后，每个页面都会输出 wordpress 自带的 css 类，我们可以进一步根据这个类来进行一些功能的设计。
你可能对这些文章感兴趣：
- WordPress博客主题推荐（简单直观的wordstar）
- WordPress移动端主题Wpmip，完全符合MIP规范
- 个人博客WordPress主题： JieStyle Two
- wordpress博客cms主题推荐（旅游主题Traveler）
- WordPress个人博客主题推荐（Mirana）
- WordPress个人博客主题推荐（像书一样的Abook）
- WordPress问答中心插件DW Question & Answer自定义链接和调用问题列表
- Xhtml+css基础第7课 css sprites background-position完美解析
- WordPress插件推荐:jQuery Image Lazy Load wp
- 纯CSS控制WordPress文章中图片显示大小
- WordPress4.5.3重置密码失效解决办法分享（dux主题用户可以参照解决）
- WordPress插件推荐：PDFjs Viewer
- WordPress免插件制作网站地图（HTML+XML两个版本）
- 216讲DIV+CSS入门视频教程免费送
如有疑问，请前往问答中心反馈！
反馈