选云
从这里开始

WordPress教程B2主题美化给文章添加彩色角标

WordPress教程B2主题美化给文章添加彩色角标-常网小站Miknio

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

美化教程

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

// 文章添加角标开始$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'),4=>__('积分','b2')),'default'=>0,'desc'=> __('支持 HTML,尽量短小才好看。','b2')));add_filter('post_side_settings', 'wporg_custom');// 文章添加角标结束
WordPress教程B2主题美化给文章添加彩色角标-常网小站Miknio

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

$index_jiaobiao =get_option('b2_one_main_tab2')['index_jiaobiao']; if($index_jiaobiao == '1'){$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>';}}
WordPress教程B2主题美化给文章添加彩色角标-常网小站Miknio

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

'.$meta_jiaobiao_html.'
WordPress教程B2主题美化给文章添加彩色角标-常网小站Miknio

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

/*角标样式*/.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: 5;}.yellow {background-color: #ff6000;}.huodong{background:#00d084}.remen{background:#fcb900}.jingping{background:#cf2e2e}.guanggao{background:#00d084}.tuijain{background:#ff6900}.yuliu{background:#0693e3}

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

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

赞(7) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。

2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。

3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。

4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《WordPress教程B2主题美化给文章添加彩色角标》
文章链接:https://www.fwq123.com/archives/1606

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏