当前位置:首页教程文档WordPress教程B2主题美化给文章添加彩色角标
WordPress教程B2主题美化给文章添加彩色角标

教程来源于互联网,感谢原作者的分享。保存自用一下懒得以后更新再去找这个教程了

美化教程

1.修改b2主题目录下 /b2/Modules/Settings/Post.php 文件,在$gg_meta = new_cmb2_box 之前添加:

  1. // 文章添加角标开始
  2. $post_meta = new_cmb2_box(array(
  3. 'id' => 'b2_post_onecad_jb',
  4. 'title' => __( '文章角标', 'b2' ),
  5. 'object_types' => array('post','document','page'),
  6. 'context' => 'normal',
  7. 'priority' => 'high',
  8. 'show_names' => true
  9. ));
  10. $post_meta->add_field(array(
  11. 'name' => sprintf(__('列表需要显示角标','b2'),$g_name),
  12. 'id' => 'b2_post_onecad_lb',
  13. 'type' => 'select',
  14. 'options'=>array(
  15. 0=>__('推荐','b2'),
  16. 1=>__('VIP','b2'),
  17. 2=>__('原创','b2'),
  18. 3=>__('免费','b2'),
  19. 4=>__('积分','b2')
  20. ),
  21. 'default'=>0,
  22. 'desc'=> __('支持 HTML,尽量短小才好看。','b2')
  23. ));
  24. add_filter('post_side_settings', 'wporg_custom');
  25. // 文章添加角标结束
WordPress教程B2主题美化给文章添加彩色角标

2.修改b2主题目录下 b2/Modules/Templates/Modules/Posts.php 文件,在第一个$hove_avatar前添加以下代码:

  1. $index_jiaobiao =get_option('b2_one_main_tab2')['index_jiaobiao'];
  2. if($index_jiaobiao == '1'){
  3. $b2_post_onecad_lb= get_post_meta($v['id'],'b2_post_onecad_lb',true);
  4. if($b2_post_onecad_lb == ''){
  5. $meta_jiaobiao_html ='<span>'.$b2_post_onecad_lb.'</span>';}
  6. else if($b2_post_onecad_lb ==0){
  7. $meta_jiaobiao_html ='<span class="tipss huodong b2-radius">推荐</span>';}
  8. else if($b2_post_onecad_lb ==1){
  9. $meta_jiaobiao_html = '<span class="tipss remen b2-radius">VIP</span>';}
  10. else if($b2_post_onecad_lb ==2){
  11. $meta_jiaobiao_html ='<span class="tipss jingping b2-radius">原创</span>';}
  12. else if($b2_post_onecad_lb ==3){
  13. $meta_jiaobiao_html ='<span class="tipss tuijain b2-radius">免费</span>';}
  14. }
WordPress教程B2主题美化给文章添加彩色角标

3.在第二步同文件中,大概167行的文章列表中添加以下代码:

  1. '.$meta_jiaobiao_html.'
WordPress教程B2主题美化给文章添加彩色角标

4.在主题目录或子主题目录的style.css中添加样式代码:

  1. /*角标样式*/
  2. .tipss {
  3. position: absolute;
  4. top: 10px;
  5. left: 10px;
  6. z-index: 1;
  7. width: 50px;
  8. height: 20px;
  9. color: #fff;
  10. line-height: 20px;
  11. text-align: center;
  12. font-size: 13px;
  13. z-index: 5;
  14. }
  15. .yellow {background-color: #ff6000;}
  16. .huodong{background:#00d084}
  17. .remen{background:#fcb900}
  18. .jingping{background:#cf2e2e}
  19. .guanggao{background:#00d084}
  20. .tuijain{background:#ff6900}
  21. .yuliu{background:#0693e3}

5.大功告成,现在在后台文章编辑中就能看到列表角标设置选择了。

这个教程仅是给网格列表添加了角标,其他列表也可以使用此方法添加。

声明:
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:admin@miknio.com,我们将第一时间处理!
2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明
6 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
  1. 久留不走i

    好像失效了,添加完没有显示

    • miknio

      失效是不能的,肯定是有地方没操作对。

  2. skyandy

    谢谢分享

  3. lack

    你的代码有问题,就不要拿出来忽悠人了。根本不行。你再看你的第二段代码,根本就是有问题的。不知道你是故意的,还是自己复制过来的时候就漏了。

  4. lack

    在第二段代码里面,把 $index_jiaobiao =get_option('b2_one_main_tab2')['index_jiaobiao']; if($index_jiaobiao == '1'){ 和最后一个}删掉就可以用了。 这段代码是原来子主题里面设置是否开启角标用的。

  5. 'ZhaoHuan

    楼上说的对,不然打开分类目录菜单,会报错。

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