预览图
前言
这个模块集成了便民服务、广告、快捷导航、最新活动，非常方便简约，有兴趣的可以跟随教程做一个，有能力的也可以自己修改一下，亲测好用！
教程
1.引入需要的css、js
- 来到你的网站根目录 进入 /wp-content/themes/zibll 目录找到 主题的头部文件 header.php 并打开。
- 在<?php wp_head();?>前面加上下方代码（如下图所示），并保存。
css、js代码
<link rel="stylesheet" href="https://tc.cxgreat.cn/huakuai.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2126430_2sho50bri4v.css"><script type='text/javascript' src='https://at.alicdn.com/t/font_2126430_2sho50bri4v.js'></script><link rel="stylesheet" href="https://tc.cxgreat.cn/huakuai.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_2126430_2sho50bri4v.css"> <script type='text/javascript' src='https://at.alicdn.com/t/font_2126430_2sho50bri4v.js'></script><link rel="stylesheet" href="https://tc.cxgreat.cn/huakuai.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_2126430_2sho50bri4v.css"> <script type='text/javascript' src='https://at.alicdn.com/t/font_2126430_2sho50bri4v.js'></script>
2.添加小工具
- 进入后台，找到 外观—自定义
- 点击小工具
-
点击 {论坛}首页-顶部全部宽度
- 点击添加小工具 下滑找到 自定义html
- 点击展开刚添加的自定义html，将下方代码填入
- 或者根据自己的需求放到需要的位置也可以，然后自己改一下代码中的https://www.www.yjjmt.com替换成自己的地址即可。
html代码
<!--将下方代码复制粘贴到你需要的地方链接换成自己的复制开始--><div class="ads-box"><div class="home-first"><div class="container hide_sm"><div class="row ron"><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="https://www.yjjmt.com/"target="_blank">会员服务</a><span>会员专属贴心服务</span></h3><div class="hf-widget-content"><div class="scroll-h"><ul><li><a href="https://www.yjjmt.com/" target="_blank"><svg class="kuai" aria-hidden="true"><use xlink:href="#icon-dingyue"></use></svg><span>升级会员</span></a></li><li><a href="https://www.yjjmt.com/" target="_blank"><svg class="kuai" aria-hidden="true"><use xlink:href="#icon-xiaoxi"></use></svg><span>消息订单</span></a></li><li><a href="https://www.yjjmt.com/" target="_blank"><svg class="kuai" aria-hidden="true"><use xlink:href="#icon-zhinan"></use></svg><span>热门标签</span></a></li><li><a href="https://www.yjjmt.com/" target="_blank"><svg class="kuai" aria-hidden="true"><use xlink:href="#icon-tougaofabu"></use></svg><span>投稿发文</span></a></li></ul></div></div></div></div><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="https://www.yjjmt.com/" target="_blank">广告服务</a><span>精品免费广告位</span></h3><div class="hf-widget-content"><div class="no-scroll hf-tags"><a class="style_orange" href="https://www.yjjmt.com/" target="_blank"><span>域名出售</span></a><a class=""href="https://www.yjjmt.com/"target="_blank"><span>特价服务器</span></a><a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a><a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a><a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a><a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a><a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a><a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a></div></div></div></div><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://www.yjjmt.com/" target="_blank">快捷导航</a><span>精品站长资源教程</span></h3><div class="hf-widget-content"><div class="scroll-h"><ul><li><a href="https://www.yjjmt.com/" target="_blank"><i class="hhicon iconfont icon-moban"></i><span>网页模板</span></a></li><li><a href="https://www.yjjmt.com/" target="_blank"><i class="hhicon iconfont icon-yuanma"></i><span>精品源码</span></a></li><li><a href="https://www.yjjmt.com/" target="_blank"><i class="hhicon iconfont icon-jiaocheng"></i><span>站长教程</span></a></li><li><a href="https://www.yjjmt.com/" target="_blank"><i class="hhicon iconfont icon-moban"></i><span>免费主题</span></a></li></ul></div></div></div></div><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://www.yjjmt.com/" target="_blank">最新活动</a><span>注册会员享福利</span></h3><div class="hf-widget-content"><div class="scroll-h"><ul><li><h3><a href="https://www.yjjmt.com/" target="_blank"> <iclass="icon-time"></i> <span>本站现阶段免费升级永久会员</span><em>立即升级</em></a></h3></li><li><h3><a href="https://www.yjjmt.com/" target="_blank"> <iclass="icon-time"></i> <span>注册升级会员得免费广告位</span><em>免费注册</em></a></h3></li></ul></div></div></div></div></div></div></div></div><!--复制结束--><!-- 将下方代码复制粘贴到你需要的地方 链接换成自己的 复制开始 --> <div class="ads-box"> <div class="home-first"> <div class="container hide_sm"> <div class="row ron"> <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="https://www.yjjmt.com/" target="_blank">会员服务</a><span>会员专属贴心服务</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-dingyue"></use> </svg><span>升级会员</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-xiaoxi"></use> </svg><span>消息订单</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-zhinan"></use> </svg><span>热门标签</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-tougaofabu"></use> </svg><span>投稿发文</span></a></li> </ul> </div> </div> </div> </div> <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="https://www.yjjmt.com/" target="_blank">广告服务</a><span>精品免费广告位</span> </h3> <div class="hf-widget-content"> <div class="no-scroll hf-tags"> <a class="style_orange" href="https://www.yjjmt.com/" target="_blank"><span>域名出售</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>特价服务器</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> </div> </div> </div> </div> <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://www.yjjmt.com/" target="_blank">快捷导航</a><span>精品站长资源教程</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-moban"></i><span>网页模板</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-yuanma"></i><span>精品源码</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-jiaocheng"></i><span>站长教程</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-moban"></i><span>免费主题</span></a></li> </ul> </div> </div> </div> </div> <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://www.yjjmt.com/" target="_blank">最新活动</a><span>注册会员享福利</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li> <h3><a href="https://www.yjjmt.com/" target="_blank"> <i class="icon-time"></i> <span>本站现阶段免费升级永久会员</span><em>立即升级</em></a> </h3> </li> <li> <h3><a href="https://www.yjjmt.com/" target="_blank"> <i class="icon-time"></i> <span>注册升级会员得免费广告位</span><em>免费注册</em></a> </h3> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 复制结束 --><!-- 将下方代码复制粘贴到你需要的地方 链接换成自己的 复制开始 --> <div class="ads-box"> <div class="home-first"> <div class="container hide_sm"> <div class="row ron"> <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="https://www.yjjmt.com/" target="_blank">会员服务</a><span>会员专属贴心服务</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-dingyue"></use> </svg><span>升级会员</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-xiaoxi"></use> </svg><span>消息订单</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-zhinan"></use> </svg><span>热门标签</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <svg class="kuai" aria-hidden="true"> <use xlink:href="#icon-tougaofabu"></use> </svg><span>投稿发文</span></a></li> </ul> </div> </div> </div> </div> <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="https://www.yjjmt.com/" target="_blank">广告服务</a><span>精品免费广告位</span> </h3> <div class="hf-widget-content"> <div class="no-scroll hf-tags"> <a class="style_orange" href="https://www.yjjmt.com/" target="_blank"><span>域名出售</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>特价服务器</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> <a class="" href="https://www.yjjmt.com/" target="_blank"><span>来这看看</span></a> </div> </div> </div> </div> <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://www.yjjmt.com/" target="_blank">快捷导航</a><span>精品站长资源教程</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-moban"></i><span>网页模板</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-yuanma"></i><span>精品源码</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-jiaocheng"></i><span>站长教程</span></a></li> <li><a href="https://www.yjjmt.com/" target="_blank"> <i class="hhicon iconfont icon-moban"></i><span>免费主题</span></a></li> </ul> </div> </div> </div> </div> <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://www.yjjmt.com/" target="_blank">最新活动</a><span>注册会员享福利</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li> <h3><a href="https://www.yjjmt.com/" target="_blank"> <i class="icon-time"></i> <span>本站现阶段免费升级永久会员</span><em>立即升级</em></a> </h3> </li> <li> <h3><a href="https://www.yjjmt.com/" target="_blank"> <i class="icon-time"></i> <span>注册升级会员得免费广告位</span><em>免费注册</em></a> </h3> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 复制结束 -->
好了本次教程到此结束，喜欢的朋友们记得分享，点赞，收藏。
© 版权声明
THE END
暂无评论内容