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

﹏ヽ暗。殇╰゛Y 2022-03-28 09:00 222阅读 0赞

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"spig"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"spig"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;div id=</code> 
      <code>"message"</code> 
      <code>&gt;加载中……&lt;/div&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;div id=</code> 
      <code>"mumu"</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"mumu"</code> 
      <code>&gt;&lt;/div&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>/* pets shenjieblog.com*/</code> 
     </div> 
     <div> 
      <code>.spig { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>display: block;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width: 150px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height: 190px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position: absolute;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top: -200px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left: 160px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>z-index: 9999;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#message { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>color: #191919;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border: 1px solid #c4c4c4;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background: #ddd;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-border-radius: 5px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-border-radius: 5px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: 5px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>min-height: 1em;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>padding: 5px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top: -30px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position: absolute;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>text-align: center;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width: auto !important;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>z-index: 10000;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-box-shadow: 0 0 15px #eeeeee;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-box-shadow: 0 0 15px #eeeeee;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-color: #eeeeee;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>box-shadow: 0 0 15px #eeeeee;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>outline: none;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>font-size:15px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>font-weight:bold;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>font-family:</code> 
      <code>"Galdeano"</code> 
      <code>,</code> 
      <code>"Hiragino Sans GB"</code> 
      <code>,</code> 
      <code>"Microsoft YaHei"</code> 
      <code>,Trebuchet,</code> 
      <code>"Trebuchet MS"</code> 
      <code>,Tahoma,</code> 
      <code>"Lucida Grande"</code> 
      <code>,</code> 
      <code>"Lucida Sans Unicode"</code> 
      <code>,Verdana,sans-serif;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>.mumu { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width: 150px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height: 190px;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>cursor: move;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background: url(images/spig.gif) no-repeat;</code> 
      <code>/*如果用的图片扩展名是png，那么你要修改一下这里*/</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>src=</code> 
      <code>"（这里引号里面填写你jQuery库的绝对路径，自己修改）js/jquery-2.1.4.min.js"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>src=</code> 
      <code>"&lt;?php bloginfo('template_directory'); ?&gt;/js/spig.js"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;?php </code> 
      <code>if</code> 
      <code>(is_home()) </code> 
      <code>echo</code> 
      <code>'var isindex=true;var title="";'</code> 
      <code>;</code> 
      <code>else</code> 
      <code>echo</code> 
      <code>'var isindex=false;var title="'</code> 
      <code>,&nbsp; get_the_title(),</code> 
      <code>'";'</code> 
      <code>; ?&gt;</code> 
     </div> 
     <div> 
      <code>&lt;?php </code> 
      <code>if</code> 
      <code>(((</code> 
      <code>$display_name</code> 
      <code>= wp_get_current_user()-&gt;display_name) != null)) </code> 
      <code>echo</code> 
      <code>'var visitor="'</code> 
      <code>,</code> 
      <code>$display_name</code> 
      <code>,</code> 
      <code>'";'</code> 
      <code>; </code> 
      <code>else</code> 
      <code>if</code> 
      <code>(isset(</code> 
      <code>$_COOKIE</code> 
      <code>[</code> 
      <code>'comment_author_'</code> 
      <code>.COOKIEHASH])) </code> 
      <code>echo</code> 
      <code>'var visitor="'</code> 
      <code>,</code> 
      <code>$_COOKIE</code> 
      <code>[</code> 
      <code>'comment_author_'</code> 
      <code>.COOKIEHASH],</code> 
      <code>'";'</code> 
      <code>;</code> 
      <code>else</code> 
      <code>echo</code> 
      <code>'var visitor="游客";'</code> 
      <code>;</code> 
      <code>echo</code> 
      <code>"\n"</code> 
      <code>; ?&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

搞定！

[http_yunpan.cn_cFUmZB8WWthty]: http://yunpan.cn/cFUmZB8WWthty#8c20