YIA主题文章分页按钮样式美化教程

以前文章分页还是非常流行的，增加站点的点击率和停留时间，而现在很多站长发布的文章都不是很长，所以就很少对文章进行分页。boke112百科使用的YIA主题自带有文章分页功能，不过分页按钮样式相对比较“简陋”，只有分页数字。具体如下图所示：

个人觉得仅显示分页数字的话，可能有些用户不一定知道是分页按钮，所以就想着给这些分页数字添加一些样式，比如增加边框和背景色。具体如下图所示：

YIA主题文章的分页按钮想要像上图所示的样式，方法很简单，只需要将以下代码添加到WordPress后台的“YIA主题设置 – 自定义代码 – CSS代码”中，并点击【保存】按钮即可。

.yia-paginate .page-numbers,.yia-paginate .post-page-numbers{border: 1px solid #ebebeb;border-radius: 3px;}
.yia-paginate .page-numbers:hover,.yia-paginate .post-page-numbers:hover{background:var(--primary-color);color: #fff;}
.yia-paginate .page-numbers.current,.yia-paginate .post-page-numbers.current{background:var(--primary-color);color: #fff;}

当然，你也可以将上述代码跟YIA主题的style.css文件中相关代码合并在一起。

最后记得清空浏览器缓存和CDN缓存哦。

本文地址：https://boke112.com/article/p7718.html