第一次使用wordpress做博客,所以开始一直遇到很多问题,在做网站的过程中,站长突然发现一个博客宠物比较好,小站长于是给博客添加了一个非常不错的WordPress浮动小人,网站找了下
这个宠物作者是木木,网站:http://www.dao-gu.com,梅阳博客只是搬砖的o(╯□╰)o
已经打包,下载地址和更详细的说明访问:http://www.66at.com/582.html
下面说一下Wordpress的添加方法,因为此插件是针对Wordpress写的
使用方法:
1、下载提供的脚本文件和宠物用图
spig.js (下载9895) </br/>
jquery.min_.js (下载129) </br/>
spig.png (下载126) </br/>
(一个是spig.js文件,一个是jquery库加载的JS文件,一个是spig.png文件),宠物说的话和网站链接都在js文件里修改,如果没加载jquery库还需要加载一下。
2、WP后台编辑主题模板footer.php添加以下代码:(添加在</body>标记前面)(这js.css全部都有,里面的)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!--.浮动小人样式CSS--> <style> .spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;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:-45px;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:130px;height:170px;cursor: move;background:url(http://www.66at.com/wp-content/themes/meiyang/img/spig.png) no-repeat;} </style> <!--.浮动小人JS--> <script type="text/javascript" src="http://www.66at.com/wp-content/themes/meiyang/js/jquery.min.js"></script><!--.加载jquery库JS--> <script type="text/javascript" src="http://www.66at.com/wp-content/themes/meiyang/js/spig.js"></script><!--.引入浮动小人JS--> <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 vistor="',$display_name,'";'; else if(isset($_COOKIE['comment_author_'.COOKIEHASH])) echo 'var vistor="',$_COOKIE['comment_author_'.COOKIEHASH],'";'; else echo 'var vistor="童鞋";'; echo ""; ?> </script> <div id="spig" class="spig"> <div id="message">加载中……</div> <div id="mumu" class="mumu"></div> </div> <!--.end浮动小人--> |
3.注意事项:
①如果代码无效,请检查js冲突
②请把spig.js,jquery.min.js,spig.png改成你自己的目录
③自定义显示的消息,用jQuery选择器加上showMessage(‘信息’)即可,自行参考spig.js
为了博友访客访问网站的直观性和体验,我的宠物于2015.5.20号开始关闭显示。
转载请注明:六特网 » WordPress博客加入浮动宠物