7b2首页文章标题美化

文本是《WordPress美化（共17篇）》专题的第 14 篇。阅读本文前，建议先阅读前面的文章：

演示效果

首先找到b2主题或者子主题下面的/themes/b2child/Modules/Templates/Modules/posts.php搜索代码modules-title-box然后对应下面的代码添加

        
        // $desc = in_array('desc',$post_meta);
        $randomNumber = rand(1, 7);
        //$desc = in_array('desc',$post_meta);
        $html .= '<div class="modules-title-box" id="biaotibg'.$randomNumber.'">';

其次/b2child/Modules/Templates/Modules/Products.php搜索代码modules-title-box然后对应下面的代码添加

        $randomNumber = rand(1, 7);
        $html .= '<div class="shop-box-title"><div class="modules-title-box" id="biaotibg'.$randomNumber.'">';

第三步找到b2主题或者子主题下面的/Modules/Templates/Header.php的 <style>与.header-banner{之间添加下面代码

#biaotibg1 {
    
    height: 39px;
    background: url(https://www.laipang.com/wp-content/themes/b2child/pic/goods-title.png) no-repeat;
    background-position: 0 0;
    
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
}
#biaotibg2 {
    
    height: 39px;
    background: url(https://www.laipang.com/wp-content/themes/b2child/pic/goods-title.png) no-repeat;
    background-position: 0 -55px;
     
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
}
#biaotibg3 {
    
    height: 39px;
    background: url(https://www.laipang.com/wp-content/themes/b2child/pic/goods-title.png) no-repeat;
    background-position: 0 -385px;
     
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
}
#biaotibg4 {
    
    height: 39px;
    background: url(https://www.laipang.com/wp-content/themes/b2child/pic/goods-title.png) no-repeat;
    background-position: 0 -165px;
     
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
}
#biaotibg5 {
    
    height: 39px;
    background: url(https://www.laipang.com/wp-content/themes/b2child/pic/goods-title.png) no-repeat;
    background-position: 0 -220px;
     
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
}
#biaotibg6 {
    
    height: 39px;
    background: url(https://www.laipang.com/wp-content/themes/b2child/pic/goods-title.png) no-repeat;
    background-position: 0 -275px;
     
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
}
#biaotibg7 {
    
    height: 39px;
    background: url(https://www.laipang.com/wp-content/themes/b2child/pic/goods-title.png) no-repeat;
    background-position: 0 -330px;
     
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
}

.modules-title-box .module-title {
    padding-left: 45px;
    padding-top: 8px;
}

最后一步

在子主题下functions.php加载刚刚修改的这些文件，如果子主题没有这三个文件，对应从b2里面复制到子主题下面

require_once get_theme_file_path('/Modules/Templates/Header.php');
require_once get_stylesheet_directory() . '/Modules/Templates/Modules/Posts.php';
require_once get_stylesheet_directory() . '/Modules/Templates/Modules/Products.php';

您已阅读完《WordPress美化（共17篇）》专题的第 14 篇。请继续阅读该专题下面的文章：

免责声明 1：本站的课程与素材，都是电子版课件，非实物光盘，课件由百度网盘发送.（百度网盘下载教程）2：本站所有涉及视频及素材，软件等由互联网搜索收集而来，本站不拥有此类资料的版权。3：本站所有视频，素材及软件不加密、不限时、可永久观看或使用！禁止二次销售，否则因此引起的一切问题与本站无关。4：本站所有的资源均为免费提供，提供资料的目的是让大家学习和交流，所收取的相关费用非资料销售费用，而是资料收集整理手工费。5：无意侵害您的权益，请发送邮件至 590173@qq.com 或点击左侧私信：站长反馈，我们将尽快处理。