当前位置:首页网站教程7B2主题美化最新WordPress网站B2主题美化之文章彩色角标

最新WordPress网站B2主题美化之文章彩色角标

由优渥设计@老白转载自网络,适用于WordPress网站B2主题的美化教程,其他主题自测。此方式只改了,其中一个文章列表样式(网格模式),其他的文章列表样式可按照同方法即可。

1.美化演示效果

最新WordPress网站B2主题美化之文章彩色角标

2.B2主题实现教程

①.打开B2主题文件:/b2/Modules/Settings/Post.php  464$gg_meta = new_cmb2_box 之前添加:处加入以下代码:

 // 文章添加角标开始-https://www.uwwuww.com
    $post_meta = new_cmb2_box(array(
    'id' => 'b2_post_onecad_jb',
    'title' => __( '文章角标', 'b2' ),
    'object_types' => array('post','document','page'),
    'context' => 'normal',
    'priority' => 'high',
    'show_names' => true
    ));
    $post_meta->add_field(array(
    $g_name = b2_get_option('normal_custom','custom_announcement_name'),
    'name' => sprintf(__('列表需要显示角标','b2'),$g_name),
    'id' => 'b2_post_onecad_lb',
    'type' => 'select',
    'options'=>array(
    0=>__('推荐','b2'),
    1=>__('VIP','b2'),
    2=>__('原创','b2'),
    3=>__('免费','b2')
    ),
    'default'=>0,
    'desc'=> __('支持 HTML,尽量短小才好看。','b2')
    ));
    add_filter('post_side_settings', 'wporg_custom');
    // 文章添加角标结束-https://www.uwwuww.com
最新WordPress网站B2主题美化之文章彩色角标

②.刷新缓存,在后台文章写作页面,即可看到角标设置项

最新WordPress网站B2主题美化之文章彩色角标

③.在文章样式列表文件中b2/Modules/Templates/Modules/Posts.php 在第一个$hove_avatar前添加以下代码:第108行下方增加:

$b2_post_onecad_lb= get_post_meta($v['id'],'b2_post_onecad_lb',true);
if($b2_post_onecad_lb == ''){
$meta_jiaobiao_html ='<span>'.$b2_post_onecad_lb.'</span>';
}else if($b2_post_onecad_lb ==0){
$meta_jiaobiao_html ='<span class="tipss huodong b2-radius">推荐</span>';
}else if($b2_post_onecad_lb ==1){
$meta_jiaobiao_html = '<span class="tipss remen b2-radius">VIP</span>';
}else if($b2_post_onecad_lb ==2){
$meta_jiaobiao_html ='<span class="tipss jingping b2-radius">原创</span>';
}else if($b2_post_onecad_lb ==3){
$meta_jiaobiao_html ='<span class="tipss tuijain b2-radius">免费</span>';
}

④.然后再同文件的第168行下方增加调用

'.$meta_jiaobiao_html.'
最新WordPress网站B2主题美化之文章彩色角标
最新WordPress网站B2主题美化之文章彩色角标

⑤下面就是CSS了,将下方的CSS代码复制到子主题style.css文件中即可

/*角标CSS-https://www.uwwuww.com*/
    .tipss {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: 50px;
    height: 20px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-size: 13px;
    z-index: 100;
    }
    .yellow {background-color: #ff6000;}
    .huodong{background:#0693e3}
    .remen{background:#fcb900}
    .jingping{background:#cf2e2e}
    .guanggao{background:#00d084}
    .tuijain{background:#ff6900}
    .yuliu{background:#0693e3}

相关的美化教程大家点击分类和文末标签阅读吧!

要和本站一样的请回复

最新WordPress网站B2主题美化之文章彩色角标

最新WordPress网站B2主题美化之文章彩色角标
最新WordPress网站B2主题美化之文章彩色角标

Adobe如果没了?听说 Photo RAW 2022 for Mac(图像处理软件)可以做到完美替代PS和LR?

温馨提示:

文章标题:最新WordPress网站B2主题美化之文章彩色角标

文章链接:https://www.xtuku.com/43.html

更新时间:2023年07月01日

声明:本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:590173@qq.com我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读新图酷网网络免责服务协议

给TA赞助
共{{data.count}}人
人已赞助
12 条回复 A文章作者 M管理员
  1. user957

    风声细碎烛影乱,相思浓时情转淡。

  2. 三十而立

    复制不了 怎么办

  3. 三十而立

    渐行渐远渐无书,水阔鱼沉何处问。谢谢分享

  4. 哒哒多多多

    希望你别像风,在我这里面掀起万翻般波澜,却又跟云去了远方。

  5. 1234

    人生三大错觉,我能反杀,下一发能出金,她喜欢我。

  6. 源素网

    当遇到你时,大脑连上CSGzhichi O都会掉帧。

  7. 姚老师

    你好?

  8. 123123

    sssssss

  9. 可乐

    测试下下

  10. 优渥设计@老白?

  11. 好

    不错

个人中心
购物车
优惠劵
搜索