yarpp插件：wordpress相关文章插件文章页面美化(Yet Another Related Posts Plugin)

yarpp插件美化

，实现文章页美化的同时，还增加SEO优化功能，不错的推荐！——《wordpress相关文章插件在文章页显示美化(Yet Another Related Posts Plugin)》好绕口的文章名称，我自己都看懵了，哈哈!

因为，有部分网友来问我云服务器网(yuntue.com)文章底部有一个推荐阅读那个样式怎么操作的，问的多了，我自己也难得去挨个的说，直接发文章教程吧!

效果展示：

插件介绍：

Yet Another Related Posts Plugin这款插件是柒比贰主题中推荐使用的，因为主题可能对于关联文章这方面没做太多研究，所以为了满足大家对SEO的要求，就推荐使活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看用了这款插件!

美化方法：

首先，就是先装这个插件，后台直接搜索“Yet Another Related Posts Plugin”

安装好了以后后台设置一下，具体我这边的设置参数是这样的，供大家参考：

第四条就是我截图中提到的配置的html代码：





/ /codebr / code class="html keyword" style="vertical-align: baseline;margin: 0px;letter-spacing: 0px;background-color: #eeeeee;border-radius: 3px;border: 0px;padding: 2px"br / usebr / /codebr / code class="html plain" style="vertical-align: baseline;margin: 0px;letter-spacing: 0px;background-color: #eeeeee;border-radius: 3px;border: 0px;padding: 2px"br / >/ /codebr / code class="html keyword" style="vertical-align: baseline;margin: 0px;letter-spacing: 0px;background-color: #eeeeee;border-radius: 3px;border: 0px;padding: 2px"br / svgbr / /codebr / code class="html plain" style="vertical-align: baseline;margin: 0px;letter-spacing: 0px;background-color: #eeeeee;border-radius: 3px;border: 0px;padding: 2px"br / >推荐阅读/ /codebr / code class="html keyword" style="vertical-align: baseline;margin: 0px;letter-spacing: 0px;background-color: #eeeeee;border-radius: 3px;border: 0px;padding: 2px"br / h3br / /codebr / code class="html plain" style="vertical-align: baseline;margin: 0px;letter-spacing: 0px;background-color: #eeeeee;border-radius: 3px;border: 0px;padding: 2px"br / >



配置好之后你会发现我我引用了一个svg的图标，关于这个图标使用需要大家看一下引用阿里巴巴矢量图标，当然你也可以直接放一个图标图片，把svg代码部分改成img标签的用法就好了

引用css文件，放置位置就是子主题或者父主题的style.css里面，代码如下：


.yarpp-related{


background


:


#fafafa


;


border


:


1px

?

solid

?

rgba(


0


,


0


,


0


,.


05


);


margin-top


:


50px


}




.yarpp-related?h


3


{


padding-left


:


10px


;


padding-top


:


20px


}




.yarpp-related?ol?li?a{


color


:

vps云服务器

#999


;


border-bottom


:


0


;


text-decoration


:


none


}




.yarpp-related?ol?li{


color


:


#999


}




.yarpp-related?ol?li?a:hover{


color


:


#4082cf


;


border-bottom


:


1px

?

solid

?

#4082cf


;


text-decoration


:


none


}


如果有问题的可以再次胡留言反馈!教程基本就结束了，关于svg图标引用，可以参考视屏

《yarpp插件：wordpress相关文章插件文章页面美化(Yet Another Related Posts Plugin)》来自互联网同行内容，若有侵权，请联系我们删除！