WordPress首页添加推荐版块

最近一直在找关于dux首页推荐版块的文章,就是在网站的首页添加一个模块等于就是一个推荐模块,可以打广告或者是给出其他的宣传信息,非常的美观好看,功能也很实用。

源码不仅仅只适用于dux,相对于其他的WordPress主题都是通用的,这里无作为用秀主题也做来测试一样兼容可用。

只要是css样式不重复即可,源码就是简单的html+css无需调用数据库,等于就是在网站首页添加了个A标签链接。

 

d83cce73gy1fg27mliks0j20nv08sgm8 WordPress首页添加推荐版块

效果图如上,是不是很美观呀,一共五个小版块推荐,大家可以自己修改,去除一个版块也是一样的,

不过手机主题就只会显示四个,这样也是更好的兼容了手机主题的优化。

d83cce73gy1fg27mliks0j20nv08sgm8 WordPress首页添加推荐版块

这里手机上面无作为自己开了护眼模式,所以图片不是很好看,不过大家自己去测试了就知道好不好了。

WordPress首页添加推荐版块

首先我们自己在对应的位置添加代码即可,加到想要显示的位置,一般主题首页是index.php,如果你像加到其他地方都是可以的。

html代码:

 

<div class="asb asb-indexd asb-indexd-01"><div class="container"> <ul class="eboxx"> <li class="eboxx-i eboxx-01"> <h4>无作为</h4> <p>在这里,啥都有。</p> <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3d3dy53dXp1d29laS5uZXQv">查看演示</a> </li> <li class="eboxx-i eboxx-02"> <h4>无作为推荐</h4> <p>优秀WordPress主题</p> <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3d3dy53dXp1d29laS5uZXQv">查看演示</a> </li> <li class="eboxx-i eboxx-03"> <h4>每日优惠券</h4> <p>每日优惠券福利</p> <a class="btn btn-sm btn-primary" target="_blank" href="http://www.wuzuowei.net/taobaoquan/">查看演示</a> </li> <li class="eboxx-i eboxx-04"> <h4>无作为导航</h4> <p>wp什么值得买主题</p> <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL2RoLnd1enVvd2VpLm5ldC8=">查看演示</a> </li> <li class="eboxx-i eboxx-100"> <h4>WordPress主题定制</h4> <p>完全按照您的需求量身打造,此项服务需要排期,具体请联系我们</p> <a class="btn btn-sm btn-danger" target="_blank" rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3d3dy53dXp1d29laS5uZXQv">联系我们</a> </li> </ul> </div></div>

自己改吧,如果你想要留个,你的主题没有边侧栏,可以自己加个li标签,自己举一反三吧。

然后是css样式代码,添加到主题的主要css文件或者后台都可以。

css样式代码

/* 首页5格 */ .eboxx { overflow: hidden; font-size: 12px; text-align: center; background-color: #fff; margin-bottom: 10px; } .eboxx h4 { font-size: 14px; color: #444; margin: 10px 0; } .eboxx-i { position: relative; float: left; width: 20%; padding: 18px; background-color: #fff; color: #777; } .eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 { border-right: 2px solid #eee; } .eboxx-i:hover {background-color: #F9F9F9;} .eboxx-i p {height: 36px;overflow: hidden;color: #bbb;} @media (max-width: 1024px) { .eboxx .btn-default {display: none;} .eboxx h4 {height: 20px;overflow: hidden;} } @media (max-width: 860px) { .eboxx .eboxx-100 {display: none;} .eboxx-i {width: 25%;} .eboxx-04 {border-right: none;} } @media (max-width: 640px) { .eboxx-i {width: 50%;} .eboxx-01 {border-bottom: 2px solid #eee;} .eboxx-02 {border-right: none;border-bottom: 2px solid #eee;} } @media (max-width: 480px) { .eboxx-i {padding: 10px 15px 15px;} .eboxx h4 {margin-bottom: 0;} .eboxx-i p {margin: 5px 0} }

到此教程就完美的结束了,关于更多主题的同能或者是dux主题的美化,大家都可以搜索本周关键词,或者直接去本周的WordPress栏目看看有没有自己感兴趣的帖子。

 

发表评论

电子邮件地址不会被公开。

扫描立即分享本页
WordPress首页添加推荐版块