WordPress给小工具栏加个样式吧

2017年8月25日10:24:09 2 997 views

本文最后更新于2017年9月15日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

效果对比

修改前：

修改后：

方法

1、通过页面审查，原h3标签为：

修改为：

即修改functions-theme.php

        foreach ($sidebars as $key => $value) {
                register_sidebar(array(
                        'name'          => $value,
                        'id'            => $key,
                        'before_widget' => '<div class="widget %2$s wow fadeInRight">',
                        'after_widget'  => '</div>',
                        'before_title'  => '<h3><i class="fa fa-bars"></i>',   //注意这里！！
                        'after_title'   => '</h3>'
                ));
        };
}

foreach ($sidebars as $key => $value) {

register_sidebar(array(

'name' => $value,

'id' => $key,

'before_widget' => '<div class="widget %2$s wow fadeInRight">',

'after_widget' => '</div>',

'before_title' => '<h3><i class="fa fa-bars"></i>', //注意这里！！

'after_title' => '</h3>'

));

};

}

2、添加css样式

编辑main.css

找到 .weiget h3 块，修改为:

.widget h3 {
        font-size: 18px;
        color: #666;
        border-bottom: 1px solid #eaeaea;
        background-color: #fbfbfb;
        margin: 0;
        height: 40px;    //注意这里！！
        line-height: 40px;  //注意这里！！
        /*background: url(../img/bg.png) 0 bottom repeat-x;*/
}

.widget h3 {

font-size: 18px;

color: #666;

border-bottom: 1px solid #eaeaea;

background-color: #fbfbfb;

margin: 0;

height: 40px; //注意这里！！

line-height: 40px; //注意这里！！

/*background: url(../img/bg.png) 0 bottom repeat-x;*/

}

再在 .weiget h3 模块下，添加下面代码：

.widget h3 i {
        float: left;
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        margin: 0 10px 0 0;
        padding: 1px 0;
        border-right: 1px solid #ddd;
        border-radius: 2px 0 0 0;
}