WordPress

wordpress 顶部下拉信息栏

萨龙龙萨龙龙 WordPress 11 年前
1.99W 14
LensNews

远方的雪山微信公众号前面写了《远方的雪山微信分享按钮》，在分享按钮中添加弹窗显示网站的微信公众号，是一种很好的展示网站与提高网站关注度的方式。

很多网站在页面顶部都会有一个信息栏，点击下拉框显示网站的一些信息，显示最多的是在线客户，联系方式等等。今天我们也来添加一个顶部信息栏，来展示网站的一些信息，最重要的是再次向朋友们展示我们的微信公众号。

做网站最头疼的莫过于浏览器兼容性的问题，对于大多数标准的web浏览器，高性能的浏览器是没有任何问题，而一些不标准，性能差的浏览器就得花时间。

IE，是解决浏览器兼容性的一大头，而随着IE版本的更新，大多数样式是兼容的。最可怕的是还有那么多人还用着IE6，鄙视，所以我们要推荐朋友们使用高性能、标准的web浏览器。

说了些费话，不过也是萨龙龙添加顶部下拉信息栏的初衷。本实例并不难，用jquery实现信息栏的张开与收缩动画，加上一些要简单的html代码，配上CSS样式，完成了。

对于网站的用户来说，如果默认显示WP工具栏，又显示信息栏，叠在一起，有点累，所以添加了一段php代码，用户登录后就隐藏这段html代码。

添加到头部文件中，或者也可以新建一个自定义的php文件，再用<?php include('custom_info.php'); ?>包括进来。

  1. <!--顶部下拉信息栏，php代码的意思是：如果是网站用户就隐藏其中的代码。-->   
  2. <?php global $user_ID; if (!$user_ID) : ?>   
  3. <div class="infomain">   
  4.   <div class="infobar">   
  5.     <div class="info_con"> <a href="#"><img src="logo链接地址"></a>   
  6.       <p>一片个人兴趣爱好的雪域，远方有我最向往的地方，雪山巍峨耸立在她的怀抱。</p>   
  7.       <img src="微信二维码链接地址">   
  8.       <p>推荐使用Opera、Chrome、Firefox、Safari等高性能浏览器！</p>   
  9.     </div>   
  10.   </div>   
  11.   <div class="tog" id="tog"> <span></span> </div>   
  12. </div>   
  13. <?php endif; ?>   
  14. <!--顶部下拉信息栏end-->  

添加下面的js到自定义js文件中，前提是主题要加载jquery.min.js或其它版本的jquery。“top:'457px'”为下拉的高度，“320”为下拉时的速度。

  1. //顶部下拉信息栏   
  2. $(function(){   
  3.             $('#tog').toggle(function(){   
  4.                 $(this).animate({top:'457px'},320).addClass("togclose").removeClass("tog").html('<span></span>');   
  5.                 $('.infobar').slideDown(320);   
  6.             },function(){   
  7.                 $(this).animate({top:'0px'},320).addClass("tog").removeClass("togclose").html('<span></span>');   
  8.                 $('.infobar').slideUp(320);   
  9.             })   
  10. })  

最后在主题样式文件中添加CSS：

  1. /*顶部信息栏*/  
  2. .tog,.togclose {   
  3.     width:100%;   
  4.     position:absolute;   
  5.     z-index:1000;   
  6.     cursor:pointer;   
  7.     border-top: 4px solid #000;   
  8.     opacity: 0.6;   
  9. }   
  10. .tog span,.togclose span {   
  11.     width: 40px;   
  12.     height: 40px;   
  13.     display: block;   
  14.     position: absolute;   
  15.     top: 0;   
  16.     rightright:0;   
  17. }   
  18. .tog span {   
  19.     background: url(images/tog.png) no-repeat 0px 0px;   
  20. }   
  21. .togclose span {   
  22.     background: url(images/tog.png) no-repeat -40px 0px;   
  23. }   
  24. .infomain{   
  25.     position: fixed;   
  26.     width: 100%;   
  27. }   
  28. .infobar {   
  29.     width:100%;   
  30.     position:absolute;   
  31.     z-index:999;   
  32.     display:none;   
  33.     background: #3275a8;   
  34. }   
  35. .info_con {   
  36.     color: #ddd;   
  37.     margin:20px 0;   
  38.     text-align: center;   
  39. }   
  40. .info_con a{   
  41.     display: block;   
  42.     height: 65px;   
  43.     width: 321px;   
  44.     margin: 0 auto;   
  45. }   
  46. .info_con a,.info_con p,.info_con img{   
  47.     margin-bottom: 20px;   
  48. }  
微信是个强大的东西，所以我们要让它与大家多见面，如果你喜欢请关注远方的雪山微信公众号，点击下面的分享按键中的倒数第二个按钮，扫描远方的雪山微信公众号，感谢。
赞(2)
赏

本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！

关键词：,
萨龙龙

萨龙龙

 文章：290 画廊：33 视频：37

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

相关文章

LensNews

热评文章

评论：

14 条评论，访客：0 条，博主：0 条
    • 萨龙龙
      萨龙龙发布于： 
      回复

      内容最好放在footer.php里面，文章中没有写到。

  2. 艾因
    艾因发布于： 
    回复

    能不能问你要一份简略的代码介绍?就是关于这一段的?现在的情况是,没有显示出来右边的展开(+)号(-)号/还有,我添加了logo和二维码之后蓝色部分向下超出了灰黑色的线…麻烦你了.

    • 萨龙龙
      萨龙龙发布于： 
      回复

      没有显示展开(+)号(-)号应该是CSS中图片的路径不对，下拉信息栏的高度可以在js代码中修改，你再试试。不行你加我QQ：66895271

  3. 艾因
    艾因发布于： 
    回复

    请问老师，这个自定义js是？我的主题目录下JS文件夹里就三个文件：1：jquery.min.js2：jquery.themes.js3：shortcodes.js应该修改谁？谢谢。

    • 萨龙龙
      萨龙龙发布于： 
      回复

      不敢当老师啊！把js代码添加到jquery.themes.js文件就可以。

      • 艾因
        艾因发布于： 
        回复

        谢谢。。。

  4. 玉满斋
    玉满斋发布于： 
    回复

    我用chrome也是没有显示，看来是浏览器的问题！

    • 萨龙龙
      萨龙龙发布于： 
      回复

      不是吧，我用IE9，360，opera，firefox，chrome浏览器都没有问题啊，是不是你们浏览器版本有点低了？

    • 美Win网
      美Win网发布于： 
      回复

      曹老板，没想到在这也能遇到你呀

  5. Wall·E
    Wall·E发布于： 
    回复

    怎么没有显示呢？

    • 萨龙龙
      萨龙龙发布于： 
      回复

      没有问题的啊，你用的什么浏览器？

      • Wall·E
        Wall·E发布于： 
        回复

        chrome，放上面没有

        • 萨龙龙
          萨龙龙发布于： 
          回复

          那我不知道是什么问题，我这边显示是正常的

发表回复