RiPro-V2美化之首页广告位添加教程 WordPress教程

本次带来的是【RiPro-V2美化教程之首页广告位添加教程 WordPress教程】

如上图红圈所示，这就是ripro-v2首页广告效果

下面是教程：

首先在 后台-外观-小工具，把自定义HTML小工具模块添加到-首页模块化布局，然后把下面代码添加进去。

<div class="afo_ads">
<li>
<a href="http://ziyuan.iifer.com/" target="_blank"><img src="https://www.cdnjson.com/images/2021/07/29/2021063017183653.png" alt="到期时间：2099-09-09"></a>
</li>
<li>
<a href="http://ziyuan.iifer.com/" target="_blank"><img src="https://www.cdnjson.com/images/2021/07/29/2021063017183653.png" alt="到期时间："></a>
</li>
<li>
<a href="http://ziyuan.iifer.com/" target="_blank"><img src="https://www.cdnjson.com/images/2021/07/29/2021063017183653.png" alt="到期时间："></a>
</li>
</div>

保存好之后再到 主题设置，顶部设置，自定义CSS样式处添加以下代码

/**首页广告**/
.afo_ads {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-top: 10px;
margin-bottom: 10px !important;
}
.afo_ads li {
margin: 5px 0;
padding-left: 15px;
flex: 0 0 33.33344%;
box-sizing: border-box;
width: 100%;
max-width: 100%;
list-style: none;
}
.afo_ads a {
position: relative;
display: block;
float: left;
}
.afo_ads a:before {
position: absolute;
content: " ";
width: 26px;
height: 1pc;
background: url(https://s3.bmp.ovh/imgs/2021/08/748b05991e59fe63.png);
right: 0;
font-size: 9pt;
text-align: center;
bottom: 0;
color: #fff;
}
@media screen and (max-width: 800px) { .yfx_ads{display:none; }
}
/**首页广告**/

然后到前台强制刷新一下看看效果吧！

安稳

链接