当前位置:楚狂人博客 > wordpress > 正文

作者:楚狂人

我本楚狂人,凤歌笑孔丘。

wordpress主题修改技巧给博客首页添加四格广告位

使用wordpress建站程序搭建博客的朋友或多或少都会喜欢自己动手修修改改,让自己的网站更美观、更实用。楚狂人也不例外,今天偶然在蜗牛789博客上看到一个通过修改代码给博客首页添加四格广告位的方法,感觉很不错,于是在自己的网站上测试了一下,效果不错,所以把修改方法也转载过来了,有喜欢的朋友可以自己试下。

一、修改效果:

wordpress主题修改技巧给博客首页添加四格广告位

二、修改方法:

1、修改网站CSS代码:

/* 首页4格css 2018-8-28 */
.eboxx {
overflow: hidden;
font-size: 12px;
text-align: center;
background-color: #fff;
margin-bottom: 10px;
}
.eboxx h4 {
font-size: 14px;
color: #444;
margin: 10px 0;
}
.eboxx-i {
position: relative;
float: left;
width: 25%;
padding: 18px;
background-color: #fff;
color: #777;
}
.eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 {
border-right: 2px solid #eee;
}
.eboxx-i:hover {background-color: #FAFDFF;
 border-color: #dd911f;
 position: relative;
 z-index: 2;}
.eboxx-i p {height: 36px;overflow: hidden;color: #bbb;}
@media (max-width: 1024px) {
.eboxx .btn-default {display: none;}
.eboxx h4 {height: 20px;overflow: hidden;}
}
@media (max-width: 860px) {
.eboxx .eboxx-100 {display: none;}
.eboxx-i {width: 25%;}
.eboxx-04 {border-right: none;}
}
@media (max-width: 640px) {
.eboxx-i {width: 50%;}
.eboxx-01 {border-bottom: 2px solid #eee;}
.eboxx-02 {border-right: none;border-bottom: 2px solid #eee;}
}
@media (max-width: 480px) {
.eboxx-i {padding: 10px 15px 15px;}
.eboxx h4 {margin-bottom: 0;}
.eboxx-i p {margin: 5px 0}
}

2、首页添加html代码:

 <div class="asb asb-indexd asb-indexd-01"><div class="container">
 <ul class="eboxx">
 <li class="eboxx-i eboxx-01"><img src='http://www.chukuangren.com/wp-content/uploads/2018/08/hot.gif' />
<h4><font color="c35bff"><strong> 阿里云主机礼包</strong></font></h4>
 <h4><font color="c35bff"><strong> 高达1000元优惠券 </strong></font></h4>
 <p>建站首选阿里云主机,领取超值优惠券礼包</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=0a5rig7f">点击查看</a>
 </li>
 <li class="eboxx-i eboxx-02"><img src='http://www.chukuangren.com/wp-content/uploads/2018/08/hot.gif' />
<h4><font color="ff5e52"><strong> 区块链空投糖果 </strong></font></h4>
 <h4><font color="ff5e52"><strong>网上赚钱新选择</strong></font></h4>
 <p>免费领空投糖果,最新网上赚钱方法</p>
 <a class="btn btn-sm btn-danger" target="_blank" href="http://www.chukuangren.com/airdrop-candy">点击查看</a>
 </li>
 <li class="eboxx-i eboxx-03"><img src='http://www.chukuangren.com/wp-content/uploads/2018/08/hot.gif' />
 <h4><font color="c35bff"><strong> 超值购物优惠券 </strong></font></h4>
 <h4><font color="c35bff"><strong> 天猫50%优惠值得买吗? </strong></font></h4>
 <p>淘宝、天猫省钱你还讲价吗?不如一件领取优惠券~</p>
 <a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="http//www.lequan.wang">点击查看</a>
 </li>
 <li class="eboxx-i eboxx-04"><img src='http://www.chukuangren.com/wp-content/uploads/2018/08/hot.gif' />
 <h4><font color="ff5e52"><strong> 支付宝红包真的吗 </strong></font></h4>
 <h4><font color="ff5e52"><strong>天天免费领红包</strong></font></h4>
 <p>支付宝首页搜索“5981405”,马上领红包!</p>
 <a class="btn btn-sm btn-danger" target="_blank" rel="nofollow" href="http://www.chukuangren.com/zhifubaohongbao-shiyong.html">点击查看</a>
 </li>
 </ul>
</div></div>

美中不足的是,每次修改时都需要在index.php文章中修改内容,如果有对wordpress建站技巧比较熟悉的朋友,不妨把这个功能添加到后台里面,应该很受欢迎,如果这个高手是你,记得通知我哦~

未经允许不得转载:

作者:楚狂人, 转载或复制请以 超链接形式 并注明出处 楚狂人博客
原文地址:《wordpress主题修改技巧给博客首页添加四格广告位》 发布于2018-08-28

分享到:
赞(5) 打赏

评论 9

3 + 2 =
  1. #5

    这个很有用,改天又要折腾折腾了

    刘少技术博客5个月前 (04-04)回复
  2. #4

    学习了

    vultr vps7个月前 (02-03)回复
  3. #3

    我又来了,这次是在外观自定义里加入的css 才能看到效果,之后这个四格广告位会与右侧侧边栏重叠,往下移即重叠,有什么方法把他固定在文章模块区域吗?像你首页那样,无论怎么拖动浏览器边框大小,都始终固定在文章模块那里,

    e7个月前 (01-19)回复
    • 抱歉啊,没遇到类似情况,我对css也是略知一二,建议找比较专业的朋友咨询下

      楚狂人7个月前 (01-20)回复
  4. #2

    css没有效果,还是没调用出来。。明明加在了main.css里面

    e7个月前 (01-18)回复
    • 不同的主题调用的CSS文件不一样的啊,要根据主题修改

      楚狂人7个月前 (01-19)回复
  5. #1

    那个css文件啊

    男网友7个月前 (01-12)回复
    • 一般是默认的css文件,部分主题可能有单独的css,注意查看主题说明

      楚狂人7个月前 (01-14)回复
wordpress主题修改技巧给博客首页添加四格广告位

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阿里云8月爆款活动

云服务器全场2折起,活动期间,用户通过本活动页面购买指定云产品,可享受相应的优惠折扣同一用户限购1单。

了解一下

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册