网站主题推荐

DUX主题首页添加推荐模块

本文转自果果静静，在此基础上稍加修改，效果和本站一样好。

之前分享了一个WordPress推荐的小工具。最近从一个什么都不做的网站上看到了它的首页版本。觉得不错的时候就稍微修改了一下，放在了DUX主题主页模块的前缀后面。具体显示效果如下。如果你愿意，你可以把它放在你自己的网站上。

让我们仔细看看这个模块的修改。首先希望你能在主题修改前做好备份。修改的文件主要是DUX文件夹下的index.php文件和css文件夹下的main.css文件。

CSS样式文件修改

DUX主题的主要样式文件都保存在main.css文件中。我们只需要在main.css文件的末尾添加以下代码并保存即可；对于其他主题，通常会将以下代码添加到主题的style.css文件中。当然，您也可以在背景中设置CSS样式选项的主题的背景CSS样式文本框中添加以下代码。不过为了方便管理自己对主题的修改，我个人建议还是放在CSS文件里比较好。

/*首页5格*/ .eboxx{ overflow:hidden; font-size:12px; text-align:center; background-color:#fff; margin-bottom:10px; } .eboxxh4{ font-size:14px; color:#444; margin:10px0; } .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:2pxsolid#eee; } .eboxx-i:hover{background-color:#F9F9F9;} .eboxx-ip{height:36px;overflow:hidden;color:#bbb;} @media(max-width:1024px){ .eboxx.btn-default{display:none;} .eboxxh4{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:2pxsolid#eee;} .eboxx-02{border-right:none;border-bottom:2pxsolid#eee;} } @media(max-width:480px){ .eboxx-i{padding:10px15px15px;} .eboxxh4{margin-bottom:0;} .eboxx-ip{margin:5px0} } HTML文件修改

在修改了主题的CSS文件后，我们需要将下面的代码添加到主题的index.php文件中，以显示其前端。具体位置可以自己设置。我把它放在了DUX主题首页的模块前缀后面，那就是<？PHP_the_ads($name='ads_index_01'，$class='asb-indexasb-index-01')？>这条线的前面。为了您的方便，以下代码中的推荐文本和链接是我们网站的内容。您可以替换相应的文本和链接来修改它们。需要注意的是，为了避免编辑过程中文件编码错误导致前端显示异常，建议您使用NotePad++编辑代码，选择“UTF-8无BOM格式的代码”。

<!--首页5栏--> <divclass="asbasb-indexdasb-indexd-01"><divclass="container"> <ulclass="eboxx"> <liclass="eboxx-ieboxx-01"> <h4>蝈蝈要安静</h4> <p>一个不学无术的伪程序员</p> <aclass="btnbtn-smbtn-primary"target="_blank"rel="nofollow"href="http://www.blog.quietguoguo.com">访问网站</a> </li> <liclass="eboxx-ieboxx-02"> <h4>安静蝈蝈工作室</h4> <p>一个追梦的地方</p> <aclass="btnbtn-smbtn-primary"target="_blank"rel="nofollow"href="http://www.quietguoguo.com">访问网站</a> </li> <liclass="eboxx-ieboxx-03"> <h4>蝈蝈要安静</h4> <p>一个不学无术的伪程序员</p> <aclass="btnbtn-smbtn-primary"target="_blank"rel="nofollow"href="http://www.blog.quietguoguo.com">访问网站</a> </li> <liclass="eboxx-ieboxx-04"> <h4>安静蝈蝈工作室</h4> <p>一个追梦的地方</p> <aclass="btnbtn-smbtn-primary"target="_blank"rel="nofollow"href="http://www.quietguoguo.com">访问网站</a> </li> <liclass="eboxx-ieboxx-100"> <h4>蝈蝈要安静</h4> <p>一个不学无术的伪程序员</p> <aclass="btnbtn-smbtn-primary"target="_blank"rel="nofollow"href="http://www.blog.quietguoguo.com">访问网站</a> </li> </ul> </div></div>