子比主题 – 在首页添加一个多功能导航小工具

效果图：

代码部署

首先我们要知道他这个多导航小工具一共分四个文件：”两个CSS文件”，”一个JS文件”，”一个HTML文件”

我把文件全部放在了底部，然后我们把里面的CSS和JS目录改成你的即可，如下代码是HTML代码，如果不想本地可以用我的，如果是用我的那就直接将HTML代码放到：小工具-自定义HTML-放到你想放的地方：

<!--首页四个导航模块样式文件-->
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.xuwbk.com/wp-content/themes/zibll-child/css/dhmk.css">
<link rel="stylesheet" href="https://www.xuwbk.com/wp-content/themes/zibll-child/css/iconfontdhmk.css">
<script type="text/javascript" src="https://www.xuwbk.com/wp-content/themes/zibll-child/js/iconfontdhmk.js"></script>
<!--首页四个导航模块-->
<div class="ads-box"> 
<div class="home-first"> 
<div class="container hide_sm"> 
 <div class="row ron"> 
   <!--导航模块 1-->
  <div class="col-1-4"> 
   <div class="hf-widget hf-widget-1 hf-widget-software"> 
  <h3 class="hf-widget-title"> 
  <svg class="ydicon" aria-hidden="true">
  <use xlink:href="#icon-huiyuan"></use>
  </svg> 
  <a href="/user/" target="_blank" rel="noopener">会员中心</a><span>专属贴心服务</span> 
  </h3> 
  <div class="hf-widget-content"> 
   <div class="scroll-h"> 
  <ul> 
   <li><a href="/user/" target="_blank" rel="noopener">
   <svg class="kuai" aria-hidden="true">
  <use xlink:href="#icon-dingyue"></use>
   </svg><span>升级会员</span></a></li> 
   <li><a href="/message/news" target="_blank" rel="noopener">
   <svg class="kuai" aria-hidden="true">
  <use xlink:href="#icon-xiaoxi"></use>
   </svg><span>消息订单</span></a></li> 
   <li><a href="/renzheng/" target="_blank" rel="noopener">
   <svg class="kuai" aria-hidden="true">
  <use xlink:href="#icon-zhinan"></use>
   </svg><span>身份认证</span></a></li> 
   <li><a href="/newposts/" target="_blank" rel="noopener">
   <svg class="kuai" aria-hidden="true">
  <use xlink:href="#icon-tougaofabu"></use>
   </svg><span>资源投稿</span></a></li> 
  </ul>       
   </div> 
  </div> 
   </div> 
  </div> 
  <!--导航模块 2-->
  <div class="col-1-4"> 
   <div class="hf-widget hf-widget-2"> 
  <h3 class="hf-widget-title">
  <svg class="ydicon" aria-hidden="true">
  <use xlink:href="#icon-tishi"></use>
  </svg>
  <a href="/" target="_blank" rel="noopener">广告服务</a><span>广告位展示</span> </h3> 
  <div class="hf-widget-content"> 
   <div class="no-scroll hf-tags"> 
  <a class="style_orange" href="/" target="_blank" rel="noopener"><span>广告位 1</span></a> 
  <a class="" href="/" target="_blank" rel="noopener"><span>广告位 2</span></a> 
  <a class="" href="/" target="_blank" rel="noopener"><span>广告位 3</span></a> 
  <a class="" href="/" target="_blank" rel="noopener"><span>广告位 4</span></a> 
  <a class="" href="/" target="_blank" rel="noopener"><span>广告位 5</span></a> 
  <a class="" href="/" target="_blank" rel="noopener"><span>广告位 6</span></a> 
  <a class="" href="/" target="_blank" rel="noopener"><span>广告位 7</span></a> 
  <a class="" href="/" target="_blank" rel="noopener"><span>广告位 8</span></a> 
   </div> 
  </div> 
   </div> 
  </div> 
  <!--导航模块 3-->
  <div class="col-1-4"> 
   <div class="hf-widget hf-widget-1 hf-widget-hot-cats"> 
  <h3 class="hf-widget-title">
  <svg class="ydicon" aria-hidden="true">
  <use xlink:href="#icon-kuaijiedaohang-ceping"></use>
  </svg>
  <a href="https://127.0.0.1/" target="_blank" rel="noopener">快捷导航</a><span>轩玮资源教程</span> </h3> 
  <div class="hf-widget-content"> 
   <div class="scroll-h"> 
  <ul> 
   <li><a href="https://www.xuwbk.com/category/yuanma" target="_blank" rel="noopener">
   <i class="hhicon iconfont icon-moban"></i><span>网站源码</span></a></li> 
   <li><a href="https://www.xuwbk.com/category/wpmb" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-yuanma"></i><span>主题模板</span></a></li> 
<li><a href="https://www.xuwbk.com/category/wpjc" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-jiaocheng"></i><span>教程分享</span></a></li> 
<li><a href="https://www.xuwbk.com/links" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-moban"></i><span>友情链接</span></a></li> 
  </ul> 
   </div> 
  </div> 
   </div> 
  </div> 
  <!--导航模块 4-->
  <div class="col-1-4"> 
   <div class="hf-widget hf-widget-4"> 
  <h3 class="hf-widget-title">
  <svg class="ydicon" aria-hidden="true">
  <use xlink:href="#icon-dongtai"></use>
  </svg>
  <a href="https://127.0.0.1/" target="_blank" rel="noopener">最新活动</a><span>注册会员享福利</span>      
  </h3> 
  <div class="hf-widget-content"> 
<div class="scroll-h"> 
<ul> 
<li><h3><a href="https://www.xuwbk.com/xin-zaobao" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>每日新闻早报 60s</span><em>立即阅读</em></a></h3></li> 

  </ul>       
   </div> 
  </div> 
   </div> 
  </div> 
 </div> 
</div> 
 </div>
</div>
<!--首页四个导航模块结束-->