主题
使用文档
首页小工具

页脚小工具

默认三栏页脚小工具

需要到主题选项--基本设置--侧边栏小工具中，勾选并启用“页脚小工具”，使用方法与其它侧边栏相同，进入后台--外观--小工具页面，可以添加任意小工具。 比如设置成我博客的样式：

页脚小工具-图片1

左侧是"导航菜单"小工具，需单独新建一个菜单，并在“导航菜单”小工具中调用这个新建的菜单，不能有二级菜单。

中间和右侧是增强文本小工具，可添加任意文字和HTML代码。

中间的三张图是将下面的代码添加到“增强文本”小工具中，修改其中图片和链接：

三张图

展开收缩
<div class="about-me-img">
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="我的微信">
			<p>我的微信</p>
		</div>
	</div>
 
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="微信公众号">
			<p>微信公众号</p>
		</div>
	</div>
	<div class="myimg">
		<div class="myqr">
			<a href="https://weibo.com/5596820771/" target="_blank">
				<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="官方微博">
				<p>官方微博</p>
			</a>
		</div>
	</div>
</div>

<style type="text/css">
.about-me-img .myimg {
	float: left;
	padding: 5px;
	width: 33.333333333333333333%;
}

.myqr img {
	text-align: center;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.myqr img {
	-webkit-transition: all .5s ease-out 0s;
	transition: all .5s ease-out 0s;
}

.myqr:hover img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.about-me-img p {
	text-align: center;
}
</style>

两张图

展开收缩
<div class="about-me-img">
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="我的微信">
			<p>我的微信</p>
		</div>
	</div>

	<div class="myimg">
		<div class="myqr">
			<a href="https://weibo.com/5596820771/" target="_blank">
				<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="官方微博">
				<p>官方微博</p>
			</a>
		</div>
	</div>

	<div class="myimg"></div>
</div>

<style type="text/css">
.about-me-img .myimg {
	float: left;
	padding: 5px;
	width: 33.333333333333333333%;
}

.myqr img {
	text-align: center;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.myqr img {
	-webkit-transition: all .5s ease-out 0s;
	transition: all .5s ease-out 0s;
}

.myqr:hover img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.about-me-img p {
	text-align: center;
}
</style>

一张图

展开收缩
<div class="about-me-img">
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="我的微信">
			<p>我的微信</p>
		</div>
	</div>

	<div class="myimg"></div>

	<div class="myimg"></div>
</div>

<style type="text/css">
.about-me-img .myimg {
	float: left;
	padding: 5px;
	width: 33.333333333333333333%;
}

.myqr img {
	text-align: center;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.myqr img {
	-webkit-transition: all .5s ease-out 0s;
	transition: all .5s ease-out 0s;
}

.myqr:hover img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.about-me-img p {
	text-align: center;
}
</style>

 

多栏页脚小工具

比如右侧四个单栏导航菜单小工具，右侧增强文本小工具

页脚小工具-图片2

进入主题选项 → 基本设置 → 侧边栏小工具 → 页脚小工具，选择6栏

分别新建四个菜单，不能有二级菜单。

进入WP后台 → 小工具，为页脚小工具添加四个导航菜单小工具，并在小工具CSS类中添加fwo用于导航菜单以单栏样式，并分别选择新建的四个菜单。（提示：添加fwt为两栏，默认为3栏）

右侧增强文本小工具CSS类中添加fwb用于占用两栏位置。

在增强文本小工具内容中添加类似的的代码：

<p>电话：198877866</p>
<p>qq：88888</p>
<p>邮箱：zmingcx@126.com</p>
<p>地址：中华人民共和国 八扇门26号</p>