当前位置:首页>文章资讯WordPress教程> 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 本站永久网址:https://www.gzkj8.com
2 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长:yixinis@163.com,进行删除处理。
3 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
4 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
WordPress教程文章资讯

如何在WordPress中优雅美观地显示代码片段

2023-5-23 11:02:17

WordPress教程文章资讯

一些颇有特色的网站会在LOGO的位置添加一共扫光,吸引访客的注意力,起到以前强化品牌的作用.

2023-5-26 9:19:43

0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索