最近又间歇性的开始自己折磨自己地捣鼓Wordpress博客的代码啊、插件啊什么的~生为一个颜控外貌党,我在Wordpress所做的一切都是为了自己的博客变得美貌_(:з」∠)_
这种感觉真是——欲仙欲死,欲罢不能
(其实是间歇性自虐症,没药救了_(:з」∠)_)
10月底一直在找博客卖萌插件,于是一直在跟代码搏斗,尝试了好几个。
一个是捣鼓笔记博主的《博客页面浮动交互小人宠物》,也就是我BO上的“求包养!”
(( ̄_ ̄|||) ,点击链接过去才发现博主换博客不用wordpress了文件下载都没了,于是我下面传一个吧OTL 2012年12月24日20:09:41)
一个是Wordpress的weichuncai插件,也就是我BO上的团子君“求投喂!”(我把求投喂关闭了,删减版的求投喂可以去论坛围观,但是兼容有点小问题)
说起研究代码以及怎么安装的过程真是一脸血!!!我真是蠢爆了!!!以及牛X的插件制作者大大们,大哭/(ㄒoㄒ)/~~ 发布页面的教程还是不够明白啊,尤其是捣鼓笔记大大!!真是ε = = (づ′_`)づ 下载了文件包都不知道怎么去安装啊嗷嗷~~
幸好后来在自己的主号上尝试了一下,又在小号上尝试了一下,这才熟练起来(囧)于是,把捣鼓笔记大大的博客宠物怎么安装的过程也写一遍吧!!
下面开始↓↓↓
如何安装博客卖萌的求包养!!!!!!!!
1.首先把在捣鼓笔记BO主那边下载到的博客宠物.rar解压缩,把里面的spig.js文件和spig.png文件,上传到你所只用的Wordpress主题所在的目录下的文件夹内,具体传到哪个文件夹里也没啥太大的要求,只不过要记住了,要获取到这两个文件的URL地址,准备好,备用。
点击去下载:
(百度网盘,一般都有效的啦,但是我不保证它永久有效OTL)
2.然后,进入你的Wordpress后台仪表盘,外观→编辑→style.css
然后把下面的这串代码复制粘贴,添加到你的CSS表中,记得修改那个图片的URL地址
- /* 博客宠物 */
- .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;}
- .mumu{width:150px;height:190px;cursor: move;background:url(这里放置你步骤1里获取的spig.png的URL地址) no-repeat;}
3.选择你的footer.php,在里面添加以下代码:(其实加在header.php里好像也可以,但是我看了一下我大号和小号,好像footer里的代码比header里的少~~我实在是太白痴了,我怕代码加在原本就复杂的文件里面,自己以后想删除,会搞混掉,于是,还是把剩下的代码全部加在footer里面了)
首先把下面这串代码加到/body 前面去
- <div id="spig" class="spig">
- <div id="message">加载中……</div>
- <div id="mumu" class="mumu"></div>
- </div>
然后CTRL+F 搜一下http://ajax.googleapis.com/ajax/libs/jquery/ 看看你的博客是不是已经加载过jquery库了。(我的博客好像原先加过了,那个主题里自动就有的)
如果加载过了,就没事了,如果没加载过,就把下面的这串代码加在/body 前。
- <div id="spig" class="spig">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script></div>
然后再在后面加上下面这串代码:
- <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>
再在后面加上下面这些:
- <script type="text/javascript" src="你在步骤1里记下的js的URL地址"></script>
4.2013年11月7日10:24:14修改:
我footer.php里的内容为:
- <div id="spig" class="spig">
- <div id="message">加载中……</div>
- <div id="mumu" class="mumu"></div>
- </div>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.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>
- <script type="text/javascript" src="spig.js链接"></script>
- <script type="text/javascript">
- var vistor = "Bpig";
- var title= "";
- var isindex = true;
- </script>
- <script type="text/javascript" src="spig.js"></script>
- <style type="text/css">
- .spig {
- display:block;
- width:150px;
- height:200px;
- position:absolute;
- top: -200px;
- left: 200px;
- 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:150px;
- height:190px;
- cursor: move;
- background-image:url("图片链接");
- }
- </style>
不过,( ̄_ ̄|||) ,目测,代码跟步骤3里面的大概有重复,但是也不太影响~~~
以上这样,我卖萌的求包养就好啦!其他的,只要进入js里面去修改里面的< (  ̄^ ̄)(θ(θ☆( >_< 卖萌的提示文字就可以了!!!
weichuncai插件就换一篇博文讲吧,这篇太长了已经太长了!!!
o(*≧▽≦)ツ 哈哈哈哈,上面这张图是《水浒后传》里的吴京饰演的西门金哥的小时候,大概在前两集,是小曹骏演的,你们瞧这姿势,多像经典的路边“求包养”啊!!!
话说我的BO也养着个啊,比你这个漂亮啊,loli一枚啊,很可耐的啊,不用插件的啊,纯代码的啊我的博http://sunyu.me
我原本也是跟你一样的代码的博客宠物,不过前段时间有人说有点烦人,于是我把代码的删掉了,改开启了插件的这个伪春菜!
你的这个也不错啊,可以拖动走,这个问题很重要,不然挡住字会很蛋疼
还可以隐藏,烦了的时候隐藏就可以了~
嗯 ,我再去研究研究,把我那个加个隐藏功能
不过你这卖萌求包养有点烦人,人家看你文章好好的老是跑过来挡视线 ==!
其实还有一个“伪春菜”的wordpress插件也不错,也很有互动性,但是那个插件开起来,我总是会忍不住去改台词,换其他东西去投喂它!插件开启停用倒是方便的。(不过博客开着两个卖萌插件比较烦,因为的懒得去删加过的这个求包养的代码,汗,所以我就把伪春菜也停了,说不定现在可以关闭求包养,直接开启求投喂的伪春菜来玩玩)
感觉好复杂啊
博主真会鼓捣