文章正文前后添加同一分类目录下文章提示功能
本文是《技术相关(共37篇)》目录的第 6 篇。阅读本文前,建议先阅读本文前3篇文章:
本功能有了衍生进化版
本功能已经适配了PIX主题,并且做了适当美化,包括添加了四角为圆的虚框,以及虚框内相对舒适的背景颜色。理论上适应于任何WP主题,但可能需要做相应修改,尤其是CSS部分。
PIX因为没有专题collection功能,它的专题名字虽然叫专题,其实就是分类目录category。因此,如果你是其它主题,想要实现统一专题下文章提示功能,只需要把本文代码中的category替换为collection即可。
先看效果:
改造开始:
1、为了保证pix/functions.php的安全,我们先在同目录下建立func.php,这样的好处是以后我们添加、删除或者修改以及以后的主题升级都不会对functions.php造成任何威胁。
建立完func.php后,functions.php最后添加以下代码用来引用func.php。
if (file_exists(get_theme_file_path('/func.php'))) {
require_once get_theme_file_path('/func.php');
}
2、编辑pix/func.php,添加以下代码并保存。
3、编辑pix/style.css,最后添加以下CSS代码并保存,没改动过的话,大概975处。
.category-posts {
border: 1px dashed #ccc;
border-radius: 5px;
padding: 10px;
background-color: #f7f1e3; /* 舒适的背景颜色 */
}
.category-posts p {
font-size: 12px;
color: #333;
margin: 0;
}
.category-posts ol {
padding-left: 20px;
}
.category-posts ol li {
position: relative;
padding-left: 20px;
margin-bottom: 5px;
}
.category-posts ol li:before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background-color: #ccc; /* 标记的颜色 */
border-radius: 50%;
}
.category-posts ol li a {
color: #2c3e50;
font-size: 14px;
text-decoration: none;
}
.category-posts ol li a:hover {
color: #e74c3c;
}
四、大功告成,浏览器删除缓存后刷新看效果。
您已阅读完《技术相关(共37篇)》目录的第 6 篇。请继续阅读本文后3篇文章:
sanant
借鉴一下回复可见功能。