分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress添加一个底部漂浮栏
  • +
  • 13
  • WordPress添加一个底部漂浮栏

  • 添加功能代码
  • 添加CSS代码
  • WordPress添加一个底部漂浮栏-BanYuner

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但是如果你的内容不是广告的话,那么我想也不会有人觉得反感了。

    那么今天推荐一个添加这个功能的方法,希望对大家有用,通过这个代码的原理,我相信很多了应该都会利用这个代码做出更多的扩展功能吧。

    那么这个功能我个人方面没有想那么复杂,我的思路就通过两个DIV标签将有需要的内容写进去,如果你有更多的话,那么就是用更多的标签,之后通过CSS将最外围标签固定在屏幕底部,同时右上角添加一个按钮,控制整个DIV标签,实现点击添加display:none的功能,仅仅就是这么简单。

    下面我就简单的说说这个流程是一个上面样的流程,大家根据这个原理加以改变,会实现不错的功能。

    添加功能代码

    <div class="float_ad">
    <div class="ad_text">
    站点通告测试
    </div>
    </div>
    

    上面的代码添加到footer.php文件中的body结束标签之前即可。

    添加CSS代码

    添加CSS代码来实现固定,以及相关样式的标记,整体来说,CSS才是整个代码的关键:

    .float_ad {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: red;
    height: 100px;
    z-index: 1111;
    }
    

    上面的代码是根据自身情况来决定的,我这里仅仅是给大家一个参考,那么整个方面大概就是这么简单的了,如果你想要更加优化一点的话,可以尝试加上一个关闭标签,或者修改一下颜色,透明度什么的都是可以的,这里就不在赘述了,毕竟我还没有使用,如果使用上了,大家届时可以直接查看相关CSS,借(抄)鉴(袭)一下就好了。 WordPress添加一个底部漂浮栏-BanYuner

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    WordPress添加一个底部漂浮栏

    支付宝(点击图片切换)

    扫码,支持我

    WordPress添加一个底部漂浮栏

    微信(点击图片切换)

    扫码,手机看

    WordPress添加一个底部漂浮栏
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress 分类描述添加可视化编辑模式

      WordPress 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

      点击查看
    WordPress添加一个底部漂浮栏
    8 + 5 =
    1. 1楼
      我爱动感单车网
      最后评论时间:2016/12/12 10:40
      来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信
      具体效果怎么样,如果能够有个清晰、完整的截图就好了!
      我爱动感单车网 6个月前 (12-12)回复