关注主机资讯
一直在努力转载

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

===== 2019 年 4 月 17 日 =====
由于某些童鞋反应,index.php 前台显示的样式不是很好看,所以博主又从其他地方抓取一个比较好看的前端代码,具体请点击
纯代码为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" rel="external nofollow" target="_blank" href="https://chuyuans.com/wp-content/themes/dux/go.php?url=aHR0cHM6Ly93d3cud2VuemlrYS5jb20=">访问网站</a>               </li>               <li class="eboxx-i eboxx-02">                 <h4>文字咖</h4>                 <p>一个追梦的地方</p>                 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" rel="external nofollow" target="_blank" href="https://chuyuans.com/wp-content/themes/dux/go.php?url=aHR0cHM6Ly93d3cud2VuemlrYS5jb20=">访问网站</a>               </li>               <li class="eboxx-i eboxx-03">                 <h4>文字咖</h4>                 <p>一个不学无术的伪程序员</p>                 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" rel="external nofollow" target="_blank" href="https://chuyuans.com/wp-content/themes/dux/go.php?url=aHR0cHM6Ly93d3cud2VuemlrYS5jb20=">访问网站</a>               </li>               <li class="eboxx-i eboxx-04">                <h4>文字咖</h4>                 <p>一个追梦的地方</p>                 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" rel="external nofollow" target="_blank" href="https://chuyuans.com/wp-content/themes/dux/go.php?url=aHR0cHM6Ly93d3cud2VuemlrYS5jb20=">访问网站</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 的同学,清理缓存刷新页面后,就能得到下图的样式了!

 

特别注意:本站资源、文章多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。请自行识别其商家的好坏,本站仅提供消息,不保证其正确性,和时效性!!!

历史上的今天
四月
16
    哇哦~~~,历史上的今天没发表过文章哦
赞(0)
未经允许不得转载:楚媛Blog » 纯代码为DUX主题添加首页四栏推荐模块

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • Q Q(选填)