预览图
前言
这个模块集成了便民服务、广告、快捷导航、最新活动,非常方便简约,有兴趣的可以跟随教程做一个,有能力的也可以自己修改一下,亲测好用!
教程
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>
2.添加小工具
- 进入后台,找到 外观—自定义
- 点击小工具
- 点击 {论坛}首页-顶部全部宽度
- 点击添加小工具 下滑找到 自定义html
- 点击展开刚添加的自定义html,将下方代码填入
- 或者根据自己的需求放到需要的位置也可以,然后自己改一下代码中的https://www.qingluntan.cn替换成自己的地址即可。
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.qingluntan.cn/"
target="_blank">会员服务</a><span>会员专属贴心服务</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><a href="https://www.qingluntan.cn/" target="_blank">
<svg class="kuai" aria-hidden="true">
<use xlink:href="#icon-dingyue"></use>
</svg><span>升级会员</span></a></li>
<li><a href="https://www.qingluntan.cn/" target="_blank">
<svg class="kuai" aria-hidden="true">
<use xlink:href="#icon-xiaoxi"></use>
</svg><span>消息订单</span></a></li>
<li><a href="https://www.qingluntan.cn/" target="_blank">
<svg class="kuai" aria-hidden="true">
<use xlink:href="#icon-zhinan"></use>
</svg><span>热门标签</span></a></li>
<li><a href="https://www.qingluntan.cn/" 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.qingluntan.cn/" target="_blank">广告服务</a><span>精品免费广告位</span>
</h3>
<div class="hf-widget-content">
<div class="no-scroll hf-tags">
<a class="style_orange" href="https://www.qingluntan.cn/" target="_blank"><span>域名出售</span></a>
<a class=""
href="https://www.qingluntan.cn/"
target="_blank"><span>特价服务器</span></a>
<a class="" href="https://www.qingluntan.cn/" target="_blank"><span>来这看看</span></a>
<a class="" href="https://www.qingluntan.cn/" target="_blank"><span>来这看看</span></a>
<a class="" href="https://www.qingluntan.cn/" target="_blank"><span>来这看看</span></a>
<a class="" href="https://www.qingluntan.cn/" target="_blank"><span>来这看看</span></a>
<a class="" href="https://www.qingluntan.cn/" target="_blank"><span>来这看看</span></a>
<a class="" href="https://www.qingluntan.cn/" 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.qingluntan.cn/" target="_blank">快捷导航</a><span>精品站长资源教程</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><a href="https://www.qingluntan.cn/" target="_blank">
<i class="hhicon iconfont icon-moban"></i><span>网页模板</span></a></li>
<li><a href="https://www.qingluntan.cn/" target="_blank">
<i class="hhicon iconfont icon-yuanma"></i><span>精品源码</span></a></li>
<li><a href="https://www.qingluntan.cn/" target="_blank">
<i class="hhicon iconfont icon-jiaocheng"></i><span>站长教程</span></a></li>
<li><a href="https://www.qingluntan.cn/" 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.qingluntan.cn/" target="_blank">最新活动</a><span>注册会员享福利</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li>
<h3><a href="https://www.qingluntan.cn/" target="_blank"> <i
class="icon-time"></i> <span>本站现阶段免费升级永久会员</span><em>立即升级</em></a>
</h3>
</li>
<li>
<h3><a href="https://www.qingluntan.cn/" target="_blank"> <i
class="icon-time"></i> <span>注册升级会员得免费广告位</span><em>免费注册</em></a>
</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
复制结束
-->
好了本次教程到此结束,喜欢的朋友们记得分享,点赞,收藏,
没有回复内容