添加文章资源VIP角标

首先，找到ripro -> inc -> theme-functions.php文件，并全局搜索”// 获取图片高度” 默认为176行，在【<div class="entry-media">】后面添加如下代码：

1
2
3
4
5
6
  <?php if ((_get_post_shop_hide()) ||(_get_post_price()!=0)&& _cao('grid_is_price',true)){
         echo '<i class="vwip30"></i>';
      }else{
        echo '<i class="vwip10"></i>';
     }
  ?>

修改CSS

然后，找到，主题目录ripro -> assets -> css -> diy.css 添加如下样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/*VIP图标 样式开始*/
  .vvip0,.vvip10,.vvip30,.vvip70,.vvip75,.vvip80,.vwip0,.vwip10,.vwip30,.vwip70,.vwip75,.vwip80,.vvip302,.vvip702,.vvip752,.vvip802,.vwip302,.vwip702,.vwip752,.vwip802 {
    display: inline-block;
    background-image: url(../images/xxx.png);
    background-size: auto 40px;
    vertical-align: middle;
    height: 40px;
    width: 40px
  }

  .vvip0,.vvip10,.vvip30, .vvip70, .vvip75, .vvip80, .vvip302, .vvip702, .vvip752, .vvip802 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

  .vvip0,.vwip0 {
    background-position: 0 0
}

.vvip70,.vwip70 {
    background-position: -80px 0
}

.vvip30,.vwip30 {
    background-position: -40px 0
}

.vvip302,.vvip702,.vvip752,.vvip802 {
    background-position: -200px 0
}

.vvip75 {
    background-position: -160px 0
}

.vvip80,.vwip75,.vwip80 {
    background-position: -120px 0
}

.vwip0,.vwip10,.vwip30,.vwip70,.vwip75,.vwip80,.vwip302 {
    position: absolute;

    z-index: 10;
    border-radius: 0
}

.vvip10,.vwip10 {
    background-position: 0 0
}

.cvip0,.cvip10,.cvip30,.cvip85,.cvip70,.cvip75,.cvip80,.nvip,.nvip1,.nvip2,.nvip3,.nvip4,.nvipc {
    float: left;
    margin: 0 16px 0 33px;
    display: inline-block;
    background-image: url(../images/xxx.png);
    vertical-align: middle;
    height: 60px;
    width: 36px
}

.cvip0,.cvip10 {
    background-position: 0 -65px
}

.cvip30 {
    background-position: -36px -65px
}

.cvip70 {
    background-position: -72px -65px
}

.cvip75 {
    background-position: -36px -65px
}

.cvip80 {
    background-position: -144px -65px
}

.cvip85 {
    background-position: -180px -65px
}

/*VIP图标 样式结束*/

其中xxx.png是第三步中的图片名称，这张图你另存为后名字可能会和我的不一样，自己改掉就好。
Wordpress教程：RiPro主题美化 - 文章列表添加资源VIP角标插图
Wordpress教程：RiPro主题美化 - 文章列表添加资源VIP角标插图1

服务声明： 本网站所有发布的源码、软件和资料均为作者提供或网友推荐收集各大资源网站整理而来，仅供功能验证和学习研究使用，您必须在下载后24小时内删除。不得使用于非法商业用途，不得违反国家法律，否则后果自负！一切关于该资源商业行为与本站无关。如果您喜欢该程序，请支持购买正版源码，得到更好的正版服务。如有侵犯你的版权合法权益，请邮件或QQ：3089659733与我们联系处理删除（邮箱:ynzsy@qq.com），本站将立即更正。