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

1.美化演示效果

 

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

2.B2主题实现教程

①.打开B2主题文件:/b2/Modules/Settings/Post.php  464处加入以下代码:

(转载自onecad,原文地址:https://www.onecad.cn/237/,感谢站长的分享)

// 文章添加角标开始-https://www.xcbtmw.com/17373.html
$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(
'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.xcbtmw.com/17373.html
 
WordPress网站B2主题美化之文章彩色角标

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

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

③.在文章样式列表文件中b2/Modules/Templates/Modules/Posts.php 第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>';
}

④.然后再同文件的第180行下方增加调用‘.$meta_jiaobiao_html.’

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

⑤.css美化

/*角标CSS-https://www.xcbtmw.com/17373.html*/
.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}
 

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

给TA打赏
共{{data.count}}人
人已打赏
B2美化教程技术教程

WordPress网站添加每日60s读懂世界新闻-自动发布-7b2主题

2025-1-15 16:28:50

B2美化教程技术教程

WordPress网站B2主题会员展示模块

2025-1-15 16:34:24

40 条回复 A文章作者 M管理员
  1. 桃扇骨

    好实用的教程666

  2. Tears°

    太实用了!一定试试666

  3. 修身静心!

    好厉害的教程 赞一个666

  4. single

    太实用了,感谢分享!

  5. 闭眼⼊你梦

    不错的教程,值得一试!

  6. 美丽玉兔

    这个教程太棒了666

  7. 香薰恋乆

    很实用的教程!谢谢分享

  8. 微信用户30

    好实用的教程 赞赞赞

  9. 晚风撩人

    好酷的教程,试试这个方法吧

  10. 与之二三事

    太棒了,学习到了新技巧!

  11. ∫半字浅眉︼

    这个教程太实用了,点赞一个吧

  12. gfdsd

    实用教程666

  13. q.w.q

    不错的教程666

  14. 半生.

    这么实用的教程,太棒了!

  15. happy~

    好实用的教程啊 喜欢这个风格

  16. hildishness

    真不错,学习了很实用

  17. 困成憨包😴

    太棒了,学习了很多技巧!

  18. 子衿

    太有用了,感谢分享!

  19. 全是爱%

    太棒了,学习到了新技巧!

  20. 欠迩的太多

    很棒的教程666

  21. 别说违心话.

    这个教程太棒了666

  22. 尽鹤

    实用教程,真棒!

  23. 繁华若梦

    好详细的教程 想试试看

  24. 休止

    太棒了,值得一试

  25. 南卉

    很不错的教程666

  26. 沉香如屑

    真不错,值得学习一下

  27. 心岛初晴°

    太实用了,马上试试

  28. Midnight

    好详细的教程啊 支持一下

  29. 浊酒

    这个教程太棒了 赞一个

  30. 微信用户

    非常实用的教程666

  31. Warmheart暖心

    很棒的教程啊!感谢分享

  32. 〖夜神鈅〗

    真不错,受益良多666

  33. 萌面人

    真不错,学到了新技巧

  34. 亚比~囧囧囧

    很赞,学习了新技巧

  35. 南瘾浪

    好实用的教程 赞赏一下

  36. 浅黛っ

    很实用的教程,赞赞赞

  37. 括叶作舟

    666 太棒了 试试看

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索