便捷模块-小工具

宙斯

2年前更新

3960

预览图

前言

这个模块集成了便民服务、广告、快捷导航、最新活动，非常方便简约，有兴趣的可以跟随教程做一个，有能力的也可以自己修改一下，亲测好用！

教程

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

$R{E_RPUWWRS5TN}1[L`W4KG.png$

点击展开刚添加的自定义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>
<!--
复制结束
 -->

好了本次教程到此结束，喜欢的朋友们记得分享，点赞，收藏，