WordPress美化：柒比贰7b2,b2主题首页添加四格小工具，适用于其他模板

2020-4-9 15:06:38

初墨初墨博客博主

从RiPro美化包里移过来的首页四格小工具，感觉特别好看，稍微改了下分享出来给大家，当然，除了b2，其他主题同样适用，只不过b2用起来比较方便，因为它的模块化布局，所以只需在后台加一个广告位模块，修改代码就可以实现首页四格小工具了。

教程开始

因为工具里涉及到文字图标，所以需要调用文字图标得js代码，我调用的是Font Awesome中文网的cdn在线js，比较方便，将下面的代码放到主题设置里的自定义代码中就可以了

<link rel="stylesheet" href="//at.alicdn.com/t/font_1324673_0fwuxikv8155.css" type="text/css" media="all">

b2模板首先在模块管理里添加一个广告位，删除里面的代码，将下面的代码复制进去，其他模板一般要将代码添加到index.php合适的位置

<div class="section">
	<div class="home-first">
		<div class="sgcontainer hide_sm">
				<div class="col-1-4">
					<div class="hf-widget hf-widget-1 hf-widget-software">
						<h3 class="hf-widget-title">
							<i class="fa cscloud"></i>
							<a href="https://www.aliyun.com/sale-season/2020/procurement-new-members?userCode=uh4uhvkz" target="_blank">云产品</a>
							<span>云服务器等云产品推荐</span>
						</h3>
						<div class="hf-widget-content">
							<div class="scroll-h">
<ul>
<li>
<a href="https://www.aliyun.com/sale-season/2020/procurement-new-members?userCode=uh4uhvkz" rel="external nofollow" target="_blank">
<i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/ali.png)"></i>
<span>阿里云</span></a>
</li>
<li>
<a href="https://url.cn/5QqJQ8V" target="_blank">
<i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/txy.png)"></i>
<span>腾讯云</span></a>
</li>
<li>
<a href="https://url.cn/5QqJQ8V" target="_blank">
<i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/qyy.png)"></i>
<span>企业云</span></a>
</li>
<li>
<a href="https://url.cn/5T61RBd" target="_blank">
<i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/xgy.png)"></i>
<span>香港云</span></a>
</li>
</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-1-4 sxweb">
					<div class="hf-widget hf-widget-2">
						<h3 class="hf-widget-title">
							<i class="fa csremen"></i>
							<a href="#" target="_blank">看热门</a>
							<span>主题模板库精品推荐</span></h3>
						<div class="hf-widget-content">
							<div class="no-scroll hf-tags">
								<a class="style_orange" href="#" target="_blank">
									<span>RiPro美化</span></a>
								<a class="" href="#" target="_blank">
									<span>wordpress教程</span></a>
								<a class="" href="#" target="_blank">
									<span>源码</span></a>
								<a class="" href="#" target="_blank">
									<span>样机</span></a>
								<a class="" href="#" target="_blank">
									<span>配色神器</span></a>
								<a class="" href="#" target="_blank">
									<span>本站服务</span></a>
								<a class="" href="#" target="_blank">
									<span>服务器特惠</span></a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-1-4 sxweb">
					<div class="hf-widget hf-widget-1 hf-widget-hot-cats">
						<h3 class="hf-widget-title">
							<i class="fa csiconfontweixin"></i>
							<a href="#" target="_blank">热门专区</a>
							<span>推荐设计热点</span></h3>
						<div class="hf-widget-content">
							<div class="icon-b">
								<ul>
									<li>
										<a href="#" target="_blank">
											<i class="fa csqiandao"></i>
											<span>签到</span></a>
									</li>
									<li>
										<a href="#" target="_blank">
											<i class="fa cshuiyuan"></i>
											<span>领会员</span></a>
									</li>
									<li>
										<a href="#" target="_blank">
											<i class="fa cssucaiku"></i>
											<span>素材库</span></a>
									</li>
									<li>
										<a href="#" target="_blank">
											<i class="fa cschart"></i>
											<span>一只狗</span></a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-1-4 sxweb">
					<div class="hf-widget hf-widget-4">
						<h3 class="hf-widget-title">
							<i class="fa cshuodong-copy"></i>
							<a href="#" target="_blank">最新活动</a>
							<span>免费会员享福利</span>
						</h3>
						<div class="hf-widget-content">
							<div class="scroll-h">
								<ul>
									<li>
										<h3>
											<a href="#" target="_blank">
												<i class="icon-time"></i>
												<span>RiPro美化服务火热售卖中</span>
												<em>网站美化</em></a>
										</h3>
									</li>
									<li>
										<h3>
											<a href="#" target="_blank">
												<i class="icon-time"></i>
												<span>关于本站积分付费阅读获取内容说明</span>
												<em>积分说明</em></a>
										</h3>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
		</div>
	</div>
</div>