WordPress添加个性化的博客宠物的方法

在很多的网站上都看见过这种效果，于是自己也想试试。看见我网站上的小宠物了吗，就是这种效果。
不多说，方法如下：
工具：
下载地址：http://yunpan.cn/cFUmZB8WWthty 访问密码 8c20
里面包含了jQury库，一个js文件和两张图片，图片你任选一种就可以，不过注意代码中图片的扩展名要修改一下
步骤：
一、HTML:
在主题的footer.php 文件下（一般是前）加入以下代码：

1 2 3 4

<div id= "spig" class = "spig" >      <div id= "message" >加载中……</div>      <div id= "mumu" class = "mumu" ></div> </div>

二、CSS:
将下载得到的spig.png或者spig.gif(任选其一)放在主题的images文件夹里（应该都有吧？），当然所有代码都可以自定义路径，后面不 再累赘。然后在主题的style.css 文件下加入以下代码：（当然你可以自己修改，下面的代码都是我自己修改过的）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

/* pets shenjieblog.com*/ .spig {      display: block;      width: 150px;      height: 190px;      position: absolute;      top: -200px;      left: 160px;      z-index: 9999; }   #message {      color: #191919;      border: 1px solid #c4c4c4;      background: #ddd;      -moz-border-radius: 5px;      -webkit-border-radius: 5px;      border-radius: 5px;      min-height: 1em;      padding: 5px;      top: -30px;      position: absolute;      text-align: center;      width: auto !important;      z-index: 10000;      -moz-box-shadow: 0 0 15px #eeeeee;      -webkit-box-shadow: 0 0 15px #eeeeee;      border-color: #eeeeee;      box-shadow: 0 0 15px #eeeeee;      outline: none;      font-size:15px;      font-weight:bold;      font-family: "Galdeano" , "Hiragino Sans GB" , "Microsoft YaHei" ,Trebuchet, "Trebuchet MS" ,Tahoma, "Lucida Grande" , "Lucida Sans Unicode" ,Verdana,sans-serif; }   .mumu {      width: 150px;      height: 190px;      cursor: move;      background: url(images/spig.gif) no-repeat; /*如果用的图片扩展名是png，那么你要修改一下这里*/ }

懂css 代码的话可以修改一下message这个id，使得更加适合你的主题，也避免id冲突的可能性。
三、加载jQuery库：
可以自己去官网下载，也可以用我压缩包里面的。然后在header.php或者footer.php中引入jQuery库即可。

1	<script type= "text/javascript" src= "（这里引号里面填写你jQuery库的绝对路径，自己修改）js/jquery-2.1.4.min.js" ></script>

四、JS：
在添加js文件前，需要对spig.js文件进行修改，打开该文件，用编辑器的”替换”工具将www.shenjieblog.com替换为你的网址，不过可以的话最好自己来手动替换，然后最好更改一些文字，比如我的名字。
接着,同样是在主题的footer.php 文件下（一般是前），加入以下代码：

1 2 3 4 5

<script type= "text/javascript" src= "<?php bloginfo('template_directory'); ?>/js/spig.js" ></script> <script type= "text/javascript" > <?php if (is_home()) echo 'var isindex=true;var title="";' ; else echo 'var isindex=false;var title="' ,  get_the_title(), '";' ; ?> <?php if ((( $display_name = wp_get_current_user()->display_name) != null)) echo 'var visitor="' , $display_name , '";' ; else if (isset( $_COOKIE [ 'comment_author_' .COOKIEHASH])) echo 'var visitor="' , $_COOKIE [ 'comment_author_' .COOKIEHASH], '";' ; else echo 'var visitor="游客";' ; echo "\n" ; ?> </script>

上面代码的spig.js 路径是在主题目录的js目录下，你可以自定义路径。
PS：其实原来的js代码中还提供了播报天气的功能，不过因为播报天气的那个网站现在访问不了的关系，所以我已经把那么功能的代码注释掉了。但是我在郑子 帅的博客上面看见还是有播报天气的功能，不过对我来说可能并不需要这个，所以也就没有折腾了！还有就是js文件中有些功能有时候没有效果，是因为js文件 中的id的名字可能和你的主题的id不一样，如果功能没有效果的话需要手动修改成你主题对应的id即可。

搞定！