东风不来
三月的柳絮不飞

纯代码为DUX主题添加首页四栏推荐模块 修复版

===== 2019 年 4 月 17 日 =====
由于某些童鞋反应,index.php 前台显示的样式不是很好看,所以博主又从其他地方抓取一个比较好看的前端代码,具体请点击
纯代码为DUX主题添加首页四栏推荐模块 美化版 查看!

纯代码为DUX主题添加首页四栏推荐模块 二次美化版

前面博主写过一篇 纯代码为 DUX 主题添加首页四栏推荐模块 修复版 ,由于部分小伙伴反应有没有一些好看的样式,博主这里特意找了一下,样式代码是从 嗯哌网 那边抓取的!代码很简单, options.p...

时间:2019-04-17 分类:建站笔记 阅读:3165 评论:11

纯代码为DUX主题添加首页四栏推荐模块-文字咖

==========


前一阵一直想给自己的主题首页添加一个“四栏推荐”的功能,网上有很多样式,功能不是特别完善:
1. 网上所有的教程,都是直接在主题的 index.php 添加 html 代码,所以每次修改都必须在主题文件的 index.php 文件里面去修改,这样极为不便!
2. 缺少控制开关。如果不想使用这个功能,就必须去 index.php 文件中删除掉那几段代码,但是如果某天突然又想使用这个功能的时候,又得去找这个模块的 html 代码!

1. 添加 options.php 代码

在主题根目录的 options.php 文件中 return $options; 代码前,添加下面代码:

 $options[] = array(
 'name' => __('首页四栏推荐', 'haoui'),
 'id' => 'wzk_diy_ad_open',
 'std' => true,
 'desc' => __('开启', 'haoui'),
 'type' => 'checkbox');
 
 $options[] = array(
 'name' => '首页四栏自定义',
 'id' => 'wzk_diy_ad',
 'std' => '<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="https://www.wenzika.com">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-02">
                <h4>文字咖</h4>
                <p>一个追梦的地方</p>
                <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://www.wenzika.com">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-03">
                <h4>文字咖</h4>
                <p>一个不学无术的伪程序员</p>
                <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://www.wenzika.com">访问网站</a>
              </li>
              <li class="eboxx-i eboxx-04">
               <h4>文字咖</h4>
                <p>一个追梦的地方</p>
                <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://www.wenzika.com">访问网站</a>
              </li>
            </ul>
          </div></div>',
 'type' => 'textarea');	

添加完上面代码就可以后台的 DUX 主题设置选项里中会出现下图这几个选项:

2. 添加 css 代码

在 main.css 中添加下面代码:

/* 首页4栏 */
.eboxx {
overflow: hidden;
font-size: 12px;
text-align: center;
background-color: #fff;
margin-bottom: 15px;
}
.eboxx h4 {
font-size: 14px;
color: #444;
margin: 10px 0;
}
.eboxx-i {
position: relative;
float: left;
width: 25%;
padding: 18px;
background-color: #fff;
color: #777;
}
.eboxx-01, .eboxx-02, .eboxx-03 {
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;line-height: 1.2;}
}
@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}
}

3. 调用上面代码

在 index.php 中的适当位置添加下面代码:

<!--四栏推荐-->
<?php 
    if( _hui('wzk_diy_ad_open') ){
        echo _hui('wzk_diy_ad');
    }
?>	

到此教程结束!加了缓存插件或者 CDN 的同学,清理缓存刷新页面后,就能得到下图的样式了!

赞(4) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《纯代码为DUX主题添加首页四栏推荐模块》
文章链接:https://www.wenzika.com/1616.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 5

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

    有了,但是是竖着排列的

    佛系软件 4年前 (2019-11-14) 来自天朝的朋友 谷歌浏览器 Mac OS X 10_15_1 回复
  2. #0

    后台没出现啊

    佛系软件 4年前 (2019-11-13) 来自天朝的朋友 谷歌浏览器 Mac OS X 10_15_1 回复
  3. #0

    好用,但显得首页有点乱。恩派你的站吗?

    VPS驿站 5年前 (2019-04-16) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
    • Wonder Zhou

      @VPS驿站 嗯派不是我的站,只是调用了他的代码,忘记改链接了。。。

      Wonder Zhou 5年前 (2019-04-16) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  4. #0

    干的漂亮,嘿嘿。

    初缘Cvps小站 5年前 (2019-04-16) 来自天朝的朋友 QQ浏览器  PCT-AL10 Build/HUAWEIPCT-AL10 回复

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

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏