^ 回到顶部
  • 人生没有定律，每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布，希望对你有帮助，如果有代码出错，请联系站长解决
  • 希望你的坚持，都是因为热爱，而不是因为不甘心
  • 8年wordpress建站经验，5星服务品质
  • 那些不愿意让你吃亏的人，才是真正值得你深交的人，也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

WordPress网站利用body_class()实现多种布局

 陌小雨  2018年4月26日  7.26K  1

我们知道 xiu 主题有 3 种布局

WordPress网站利用body_class()实现多种布局、分别为左右两栏、左中右三栏和上下布局，这是如何实现的呢？

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

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 类，我们可以进一步根据这个类来进行一些功能的设计。

推荐阅读：

赠人玫瑰，手有余香。
赞赏支持
标签：