WordPress添加个性化的博客宠物的方法
在很多的网站上都看见过这种效果,于是自己也想试试。看见我网站上的小宠物了吗,就是这种效果。
不多说,方法如下:
工具:
下载地址:http://yunpan.cn/cFUmZB8WWthty 访问密码 8c20
里面包含了jQury库,一个js文件和两张图片,图片你任选一种就可以,不过注意代码中图片的扩展名要修改一下
步骤:
一、HTML:
在主题的footer.php 文件下(一般是前)加入以下代码:
1
2
3
4
<div id= "spig" class = "spig" >
<div id= "message" >加载中……</div>
<div id= "mumu" class = "mumu" ></div>
</div>
二、CSS:
将下载得到的spig.png或者spig.gif(任选其一)放在主题的images文件夹里(应该都有吧?),当然所有代码都可以自定义路径,后面不 再累赘。然后在主题的style.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
36
37
38
39
40
41
.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;
font-size:15px;
font-weight:bold;
font-family: "Galdeano" , "Hiragino Sans GB" , "Microsoft YaHei" ,Trebuchet, "Trebuchet MS" ,Tahoma, "Lucida Grande" , "Lucida Sans Unicode" ,Verdana,sans-serif;
}
.mumu {
width: 150px;
height: 190px;
cursor: move;
background: url(images/spig.gif) no-repeat;
}
懂css 代码的话可以修改一下message这个id,使得更加适合你的主题,也避免id冲突的可能性。
三、加载jQuery库:
可以自己去官网下载,也可以用我压缩包里面的。然后在header.php或者footer.php中引入jQuery库即可。
1
<script type= "text/javascript" src= "(这里引号里面填写你jQuery库的绝对路径,自己修改)js/jquery-2.1.4.min.js" ></script>
四、JS:
在添加js文件前,需要对spig.js文件进行修改,打开该文件,用编辑器的”替换”工具将www.shenjieblog.com替换为你的网址,不过可以的话最好自己来手动替换,然后最好更改一些文字,比如我的名字。
接着,同样是在主题的footer.php 文件下(一般是前),加入以下代码:
1
2
3
4
5
<script type= "text/javascript" src= "<?php bloginfo('template_directory'); ?>/js/spig.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>
上面代码的spig.js 路径是在主题目录的js目录下,你可以自定义路径。
PS:其实原来的js代码中还提供了播报天气的功能,不过因为播报天气的那个网站现在访问不了的关系,所以我已经把那么功能的代码注释掉了。但是我在郑子 帅的博客上面看见还是有播报天气的功能,不过对我来说可能并不需要这个,所以也就没有折腾了!还有就是js文件中有些功能有时候没有效果,是因为js文件 中的id的名字可能和你的主题的id不一样,如果功能没有效果的话需要手动修改成你主题对应的id即可。
搞定!
转载于:https://www.cnblogs.com/shenjieblog/p/5061295.html
相关知识
WordPress 添加个性化的博客宠物(汉纸篇)
WordPress添加个性化的博客宠物的方法
给你的wordpress博客领养几只宠物 打发时间专用
WordPressPet:浮动小人WordPress博客萌物资源
宠物博客大全
个人博客资讯宠物护理知识分享网站模板下载
博客宠物最新资讯
宠物交易担保服务宠物展示交易平台WordPress模板(响应式手机站)
如何打造独一无二的个性化宠物网站?
Pet Rescue v1.3.8 – 宠物救援WordPress主题
网址: WordPress添加个性化的博客宠物的方法 https://www.mcbbbk.com/newsview101919.html
上一篇: 基于java的宠物交流网站/基于 |
下一篇: 汽车品牌书籍推荐(汽车行业必看的 |
推荐分享

- 1我的狗老公李淑敏33——如何 5096
- 2南京宠物粮食薄荷饼宠物食品包 4363
- 3家养水獭多少钱一只正常 3825
- 4豆柴犬为什么不建议养?可爱的 3668
- 5自制狗狗辅食:棉花面纱犬的美 3615
- 6狗交配为什么会锁住?从狗狗生 3601
- 7广州哪里卖宠物猫狗的选择性多 3535
- 8湖南隆飞尔动物药业有限公司宠 3477
- 9黄金蟒的价格 3396
- 10益和 MATCHWELL 狗 3352