效果展示
- 将下面的代码添加在 WordPress 后台小工具
- 添加路径:后台 >> 外观 >> 小工具 >> 自定义 HTML >> 选择你需要放的位置
- 我是添加在首页顶部全宽度
- 修改代码中的链接以及文字改为自己的就好
<!--首页四个导航模块样式文件-->
<meta charset="UTF-8">
<link rel="stylesheet" href="文件目录/dhmk.css">
<link rel="stylesheet" href="文件目录/iconfontdhmk.css">
<script type="text/javascript" src="文件目录/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="user/auth" 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://huliku.com/" target="_blank" rel="noopener">快捷导航</a><span>精品网站资源教程</span> </h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><a href="/tutorial" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-moban"></i><span>建站笔记</span></a></li>
<li><a href="/share" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-moban"></i><span>资源分享</span></a></li>
<li><a href="/leisure" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-moban"></i><span>休闲娱乐</span></a></li>
<li><a href="/tool" 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://huliku.com" target="_blank" rel="noopener">网站积分</a><span>如何获取网站积分?</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><h3><a href="https://huliku.com" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>等待编辑</span><em>立即阅读</em></a></h3></li>
<li><h3><a href="/user/" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>签到领积分,资源免费下!</span><em>会员中心</em></a></h3></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--首页四个导航模块结束-->
将下方提供的 css 和 js 文件上传到你自己服务器目录下解压(位置自己决定),然后在上面的代码中填写文件存放对应路径即可。
© 版权声明
1. 资源都是经过站长或作者收集测试修改后发布分享。如若转载请在文内以超链形式注明狐狸库文章出处,谢谢合作!
2. 本站除原创内容,其余所有内容均收集自互联网,仅限用于学习和研究目的,本站不对其内容的合法性承担任何责任。如有版权内容,请通知我们或作者删除,其版权均归原作者所有,本站虽力求保存原有版权信息,但因众多资源经多次转载,已无法确定其真实来源,或已将原有信息丢失,所以敬请原作者谅解!
3. 本站用户所发布的一切资源内容不代表本站立场,并不代表本站赞同其观点和对其真实性负责,若您对本站所载资源作品版权归属存有异议,请留言附说明联系邮箱,我们将在第一时间予以处理 ,同时向您表示歉意!为尊重作者版权,请购买原版作品,支持您喜欢的作者,谢谢!
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客如有发现请立即向站长举报;本站资源文件大多存储在云盘,如发现链接或图片失效,请联系作者或站长及时更新。
THE END
请登录后查看评论内容