主题添加教程:
将下面的代码添加到主题的 css 文件,dux 添加到 mian.css
.feedback { height: 80px; margin: 0px -20px 0px -20px; color: #fff; overflow: hidden; margin-bottom: 10px; } .fb-primary { background-color: #50b7ff; } .fb-danger { background-color: #ff5f53; } .fb-warning { background-color: #f9c13e; } .fb-info { background-color: #1ac5e2; } .fb-purple { background-color: #b771e8; } .feedback span { font-size: 28px; float: left; padding: 0px 0px 0px 20px; line-height: 80px; } .feedback a { margin: 22px 20px 0px 0px; float: right; position: relative; height: 36px; line-height: 36px; border: 1px solid #fff; display: inline-block; font-size: 16px; padding: 0 26px; color: #fff; text-decoration: none; } .feedback a:hover { background-color: #fff; color: #000000; text-decoration: none } @media (max-width: 640px) { .feedback span { font-size: 12px; float: left; padding: 0px 0px 0px 20px; line-height: 50px; } .feedback a { margin: 12px 20px 0px 0px; float: right; position: relative; height: 26px; line-height: 26px; border: 1px solid #fff; display: inline-block; font-size: 12px; padding: 0 18px; } .feedback { height: 50px; } }
前台调用样式(参考上方 css 演示):
<div class="feedback fb-danger"> <span>Vieu 主题 v2 系列 专注于工体美学</span> <a href="链接地址" rel="external nofollow" >使用教程</a> </div>
大功告成!
转载请注明:汇站网 » 添加特色广告代码到 WordPress 文章(原始教程代码)