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

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

为网站首页添加推荐版块

适用源码：WordPress

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

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

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

涉及文件：

index.php
main.css

成品效果展示：

图片[1]-为网站首页添加推荐版块，WordPress的福音！-白日做梦

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 结束*/