想留下点什么,以防今后忘记了。如果有什么那啥的可以联系我~~
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代码的网页最重要的部分显示不出来了~~虽然可以直接用现成的,但。。。
嗯,就是这样了,如果你有什么更好的修改方式什么的,请一定要告诉我!!!如果那啥那啥的,也可以告诉我,我会及时删除的~~~
站长还在不。。。。这个用vs怎么做。。完全不会做
哇,忍不住玩了半天的面码,都忘了进来干嘛的了
Pingback引用通告: Hermit播放器测试+沙耶加萌+要好好学习了 – 澄澈之空
哈哈,这个悬浮的面码好萌啊~
博主这博客和琉璃神社同款主题啊
这主题默认是白色的,然后我比较喜欢黑色,然后切换成黑色后,我去~~~简直一样~~~
大角虫
什么是大角虫?还有,你不去领养一只吗~~~
大触。呃领养不起,技术太高
问一下,wp主题都是好几个php,css,js文件同时工作的。。。Adobe Dreamweaver 每次只能打开一个,怎么同时弄呢?
不知道,没用过Dreamweaver,我的记忆中,这种所见即所得的编辑器还停留在编辑html的阶段。改过一部分WP主题代码,WP提供了好多的自定义函数(或者叫钩子什么的?),通过那些来直接调用其他php。我改的方法是在本地架个服务器,改完直接看结果。
不会架。。。求破。。。好吧我去百度。
如果你觉得“http://ezyun.lyun.me/”这个主题还行的话,我可以给你~~~
谢谢啦,我已经准备好主题了,就是需要小改
你可以把footer.php发给我,我可以给你弄个子主题~~
不难把,都是成段的代码加到末尾就行了,又不要自己改。图片才是最大难点~~找个面码的图找得我好累~~
先让我把主题搞好吧。。。。。。现在丑死了
这个面码够我玩一年
哈哈,那就不枉我找了那么久的图了。