快来领养一只WP博客萌宠吧~

想留下点什么，以防今后忘记了。如果有什么那啥的可以联系我~~

JS代码

这应该是最重要的部分了吧。

在你的主题目录新建一个文件夹“js”，并把下载得到的“spig.js”放到js文件夹里面。

你可以点击这里下载。这个是我网站用的，最好根据自己网站再修改一下（比如你的首页，订阅地址等），虽然不改也能用，但会有点违和感吧~~

CSS

你可以直接将下面的代码加入你的主题的“style.css”中，部分内容也需要根据你的主题和使用的宠物的图片进行修改。其中我为了不在手机显示（因为安卓手机感觉特别卡），加了一点额外的CSS代码，如果你不需要可以删掉。

/* pets devework.com */
.spig {display:block;width:156px;height:150px;position:absolute;top: 150px;left: 150px;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;}
.mumu{width:156px;height:150px;cursor: move;background:url(images/spig.png) no-repeat;}

/* 在宽度小于600的时候不显示 */
@media screen and (max-width:600px){

.spig {display:none;}
#message {display:none;}
.mumu {display:none;}

}
/* pets devework.com */

打开你的主题的footer.php文件，在“</body></html>”前添加如下代码

<!-- WP宠物 -->
<div id="spig" class="spig">
 <div id="message">加载中……</div>
 <div id="mumu" class="mumu"></div>
</div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/spig2.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>

<span class="hitokoto" id="hitokoto" style="display:none">Loading...</span>
 <div id="hjsbox" style="display:none">
 </div>
<script>
 //初始化一言
 setTimeout("getkoto()",1000);
 //加载一言
 var t;
 function getkoto(){
 var hjs = document.createElement('script');
 hjs.setAttribute('id', 'hjs');
 hjs.setAttribute('src', 'http://api.hitokoto.us/rand?uid=3221&encode=jsc&fun=echokoto');
 document.getElementById("hjsbox").appendChild(hjs);
 t=setTimeout("getkoto()",10000);
 }
 //输出一言
 function echokoto(result){
 var hc = eval(result);
 //$("#hitokoto").fadeTo(300,0);
 document.getElementById("hitokoto").innerHTML = hc.hitokoto;
 //$("#hitokoto").fadeTo(300,0.75);
 }
</script>
<!-- WP宠物 -->

其中第一段是必须的（应该把），后面那一段是用来加载一言的台词的，可以不用。

注：如果你用的是子主题，请把

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/spig2.js"></script>

改成

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/spig2.js"></script>

图片

你可以找一个你喜欢的动漫人物或者其他的，上传到你的主题的images文件夹里面。你需要根据你的图片大小和名称来调整下CSS。当然，你也可以把图片裁剪成156×150并命名为spig.png（gif也可以透明，不过个人不喜欢，画质不能接受~~）

最后

这个第一次是在http://devework.com/add-a-personalized-blog-pets-for-wordpress.html这篇文章里面看到的。然后跟着上面写的折腾了好久，终于换图片成功，换了个二次元的萌妹纸（也不知道出处哪）。

然后第二天，又无意间（真是要遇上了就。。。）在“萝莉社”看到了saber和教如何添加的文章http://myhloli.com/hitokoto.html，于是又折腾了好久把一言加了进去。并把外观换成了面码（才不会说我找图找了2小时呢），再对JS和CSS微调了一下（因为关于网页什么的完全不会）。其实“萝莉社”上面还有一个添加天气预报的，不过博主基友那篇API代码的网页最重要的部分显示不出来了~~虽然可以直接用现成的，但。。。

嗯，就是这样了，如果你有什么更好的修改方式什么的，请一定要告诉我！！！如果那啥那啥的，也可以告诉我，我会及时删除的~~~