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

⚠️ 初墨博客上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。 无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
38 条回复 A文章作者 M管理员
  1. 学些学习,我来康康

  2. 学习一下

  3. 很好,学习学习,mark一下

  4. 正需要

  5. 学习一下

  6. 学习学习,mark一下

  7. 感谢分享

  8. 回复支持一下哈哈

  9. 学习学习。

  10. 学习一下

  11. 感谢楼主分享

  12. 很好,学习学习,mark一下

  13. 学习学习

  14. 学些学习

  15. 太漂亮了哈哈哈

  16. 学习

  17. 我就喜欢这个,嘿嘿

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