免费资源
享你所想

为网站首页添加推荐版块,WordPress的福音!

大前端主题在WordPress中可谓遍地开花,尤其是DUX主题,更是其中佼佼者。使用WordPress源码的站长,都喜欢将其调教一番。虽说使用的是相同的主题,其中不少细节却不相同,甚至于变目全非。

无梦的这个网站使用的是DUX主题,在互联网中见到了不少php使用使用该主题的网站,也大都改造了一番,增加了许多小工具和功能。无梦的网站也一直在改,今天就记录一下如何为网站首页添加推荐版块。

为网站首页添加推荐版块

适用源码:WordPress

适用主题:WordPress的大部分主题

增加功能:增加首页推荐位,手机端显示4个推广位,PC端为一行5个推广位。

改造原理:网站首页添加添加a标签,html+css且无需调用数据库。

涉及文件:

  • index.php
  • main.css

成品效果展示:

index.php

一般来说,改造WordPress指的都是修改主题。大家可以看看无梦以前写的关于WordPress的文章,都是修改根目录~wp-content~theme~dux目录下的文件。

这次也不例外,打开dux文件夹下的index.php文件,将下方的代码添加到文件中。有的新手站长不知道往哪里添加,无梦将代码放到了文件的第27行,也就是

?php _the_ads($name='ads_index_01', $class='asb-index asb-index-01')

这段代码的前方,大家可以参考我的位置来修改代码,请自行斟酌!效果同我的博客首页。

<!--无梦博客www.5meng.cc-->
          <!--首页5栏-->	
          <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"  href="http://www.5meng.cc">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-02">
                <h4>无梦博客</h4>
                <p>一个追梦的地方</p>
                <a class="btn btn-sm btn-primary" target="_blank"  href="http://www.5meng.cc">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-03">
                <h4>高佣联盟</h4>
                <p>专注分享拼多多优惠券,CPS推广神器!</p>
                <a class="btn btn-sm btn-primary" target="_blank"  href="https://api.gaoyong666.com/appapi/newreg/enroll.html?mid=125798">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-04">
                <h4>好软推手</h4>
                <p>自用省钱,分享赚钱,专注拼多多优惠券!</p>
                <a class="btn btn-sm btn-primary" target="_blank"  href="http://tkcm888.com/Y284o">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-100">
                <h4>无梦博客</h4>
                <p>一个不学无术的伪程序员</p>
                <a class="btn btn-sm btn-primary" target="_blank"  href="http://www.5meng.cc">访问网站</a>
              </li>
            </ul>
          </div></div>

main.css

打开main.css文件,将下方的css样式添加进去,尾部直接添加即可。

/* 无梦博客www.5meng.cc 开始*/
/* 首页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}
}
/* 无梦博客www.5meng.cc 结束*/

这个功能用处很大,既可以当推荐,又可以当广告,一举两得。

值得使用!

赞(0) 打赏
未经允许不得转载:无梦博客 » 为网站首页添加推荐版块,WordPress的福音!
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    差不多,我在主页和内页都增加了,适配手机端

    九林网赚8个月前 (03-27)回复

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏