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

从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>

最后只需要将css放到自定义代码中就可以了,对于其他模板,可以放到style.css中

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
WordPress插件主题修改

wordpress主题7b2文章页添加隐藏内容评论刷新后可见代码(美化版)

2019-9-25 19:00:52

主题修改

WordPress美化:RiPro6.3美化包子主题+模板无授权版免费分享

2020-4-9 16:58:21

34 条回复 A文章作者 M管理员
  1. 暴躁老哥

    学些学习,我来康康

  2. 否极泰来

    学习一下

  3. 寒晓

    很好,学习学习,mark一下

  4. MrPang

    正需要

  5. lkyun

    学习一下

  6. jiege

    学习学习,mark一下

  7. Mr.White

    感谢分享

  8. 王筅笙

    回复支持一下哈哈

  9. 邦桑。

    学习学习。

  10. 井底之蛙

    学习一下

  11. zz8532

    感谢楼主分享

  12. a苏小涵

    很好,学习学习,mark一下

  13. ๓﹏゛Onlyyou

    学习学习

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索