
免费领流量卡 | 广告招租 |
wordpress子比主题文章发布后会在文章表右上角显示ICON图标,大多数网站都有这个美化,但是有很多不太一样的地方,今天分享给大家,右上角的角标大家可以根据自己的喜好进行更换。
效果图
![图片[1] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-265.png)
![图片[2] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-266.png)
ICON图片可自由更换
图片素材:
![图片[3] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-267.png)
![图片[4] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-268.png)
![图片[5] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-269.png)
![图片[6] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-270.png)
![图片[7] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-271.png)
![图片[8] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-272.png)
部署教程
在子比主题目录下“func.php”(子比主题推荐放这里)或者“functions.php”,在合适位置放下面PHP代码。
上面图标链接自己修改
在子比主题目录下“/zibll/inc/functions/zib-posts-list.php”文件中,放在获取文章列表标题内,大概440行的文章放入下面PHP代码(如图)
或者搜索
获取文章列表的标题
$html .= tianyishangke_post_newicon($post);//置顶文章icon图标函数
![图片[9] - WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标 - 狐狸资源网](https://www.foxccs.com/wp-content/uploads/2024/08/image-273.png)
css代码
/*新文章发布图标样式*/
.posts-item{position: relative !important;}
.tianyishangke-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.tianyishangke-new-icon img{-webkit-user-drag: none;}

© 版权声明
免责声明:本站采用CC BY-NC-SA 4.0协议,完整转载请注明来自狐狸资源网
THE END
- 最新
- 最热
只看作者