WordPress

wordpress 顶部下拉信息栏

LensNews

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

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

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

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

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

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

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

  1. <!--顶部下拉信息栏,php代码的意思是:如果是网站用户就隐藏其中的代码。-->   
  2. <?php global $user_IDif (!$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-top4px solid #000;   
  8.     opacity: 0.6;   
  9. }   
  10. .tog span,.togclose span {   
  11.     width40px;   
  12.     height40px;   
  13.     displayblock;   
  14.     positionabsolute;   
  15.     top: 0;   
  16.     rightright:0;   
  17. }   
  18. .tog span {   
  19.     backgroundurl(images/tog.png) no-repeat 0px 0px;   
  20. }   
  21. .togclose span {   
  22.     backgroundurl(images/tog.png) no-repeat -40px 0px;   
  23. }   
  24. .infomain{   
  25.     positionfixed;   
  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-aligncenter;   
  39. }   
  40. .info_con a{   
  41.     displayblock;   
  42.     height65px;   
  43.     width321px;   
  44.     margin: 0 auto;   
  45. }   
  46. .info_con a,.info_con p,.info_con img{   
  47.     margin-bottom20px;   
  48. }  

微信是个强大的东西,所以我们要让它与大家多见面,如果你喜欢请关注远方的雪山微信公众号,点击下面的分享按键中的倒数第二个按钮,扫描远方的雪山微信公众号,感谢。

(0)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 14 条评论,访客:8 条,博主:6 条

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

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

  • 艾因
    艾因 发布于:  回复

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

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

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

  • 艾因
    艾因 发布于:  回复

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

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

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

      • 艾因
        艾因 发布于:  回复

        谢谢。。。

  • 玉满斋
    玉满斋 发布于:  回复

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

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

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

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

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

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

    怎么没有显示呢?

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

      没有问题的啊,你用的什么浏览器?

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

        chrome,放上面没有

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

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