共同成长888 / 软件应用 / 给WordPress博客添加浮动宠物

分享

   

给WordPress博客添加浮动宠物

2015-04-19  共同成长8...

给WordPress博客添加浮动宠物

这个宠物作者是木木,网站:http://www.dao-gu.com,王海达博客只是搬砖的o(╯□╰)o

已经打包,下载地址和更详细的说明访问:

下面说一下Wordpress的添加方法,因为此插件是针对Wordpress写的

使用方法:

1、下载提供的脚本文件(百度网盘下载,1:js文件,1:png文件),说的话和网站都在js文件里修改,如果没加载jquery库还需要加载一下。

2、WP后台编辑主题模板footer.php添加以下代码:

  1. <div id="spig" class="spig">
  2. <div id="message">加载中……</div>
  3. <div id="mumu" class="mumu"></div>
  4. </div>

3、编辑主题样式表添加如下样式,或者直接引用

  1. /* 博客宠物 */
  2. .spig {
  3. display:block;
  4. width:150px;
  5. height:190px;
  6. position:absolute;
  7. top: -200px;
  8. left: 160px;
  9. z-index:9999;
  10. }
  11. #message{
  12. color :#191919;
  13. border: 1px solid #c4c4c4;
  14. background:#ddd;
  15. -moz-border-radius:5px;
  16. -webkit-border-radius:5px;
  17. border-radius:5px;
  18. min-height:1em;
  19. padding:5px;
  20. top:-30px;
  21. position:absolute;
  22. text-align:center;
  23. width:auto !important;
  24. z-index:10000;
  25. -moz-box-shadow:0 0 15px #eeeeee;
  26. -webkit-box-shadow:0 0 15px #eeeeee;
  27. border-color:#eeeeee;
  28. box-shadow:0 0 15px #eeeeee;
  29. outline:none;
  30. }
  31. .mumu{
  32. width:150px;
  33. height:190px;
  34. cursor: move;
  35. background:url(spig.png) no-repeat;
  36. }

4、在主题文件header.php添加以下代码,如果原来已有jQuery的就不用再加了

  1. 没有就添加这个
  2. <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  1. <script type="text/javascript">
  2. <?php
  3. if(is_home()){
  4. echo 'var isindex=true;var title="";';
  5. }
  6. else{
  7. echo 'var isindex=false;var title="', get_the_title(),'";';
  8. }
  9. ?>
  10. <?php
  11. if((($display_name = wp_get_current_user()->display_name) != null)){
  12. echo 'var visitor="',$display_name,'";';
  13. }
  14. else if(isset($_COOKIE['comment_author_'.COOKIEHASH])){
  15. echo 'var visitor="',$_COOKIE['comment_author_'.COOKIEHASH],'";';
  16. }
  17. else{
  18. echo 'var visitor="游客";';echo "\n";
  19. }
  20. ?>
  21. </script>
  22. <script type="text/javascript" src="http://blog.wanghaida.com/static/spig/spig.js"></script>

5、注意事项:

①如果代码无效,请检查js冲突
②请把spig.js改成你自己的目录
③自定义显示的消息,用jQuery选择器加上showMessage('信息')即可,自行参考spig.js
④关于天气代码,我自己申请的中国天气网的插件http://uc.weather.com.cn/,如果你的显示不出来,请到http://t.xidie.com/申请

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>