快来领养一只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部分

打开你的主题的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代码的网页最重要的部分显示不出来了~~虽然可以直接用现成的,但。。。

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

您也可能喜欢:

快来领养一只WP博客萌宠吧~》上有19个想法

  1. Pingback引用通告: Hermit播放器测试+沙耶加萌+要好好学习了 – 澄澈之空

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据