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

/* pets shenjieblog.com*/

.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;/*如果用的图片扩展名是png,那么你要修改一下这里*/

}

懂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即可。

搞定!

时间: 2024-08-28 15:24:32

WordPress添加个性化的博客宠物的方法的相关文章

使用LAMP创建基于wordpress的个从博客网站

参考: http://blog.csdn.net/ck_boss/article/details/27866117 一.mysql配置 1.安装mysql yum install mysql-server CentOS中已经默认安装,此步骤忽略. 2.启动mysql service mysqld start 3.登录mysql [[email protected] share]# mysql -u -root -p Enter password: Welcome to the MySQL mon

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&

WordPress优化:为博客添加评论回复后邮件通知

顾名思义,就是当有人在我们的博客进行留言,然后我们管理员或者其他人给他的留言有了回复后,可以通过邮件通知他他在那篇文章的留言有了新的回复.这个功能虽然很小,但是却是非常人性化的,而且可以极大的提高用户体验. 添加这个效果很简单,只需要在我们使用的主题的functions.php中找一个独立的地方把下面这段代码复制上去就行了,代码如下: function ludou_comment_mail_notify($comment_id, $comment_status) {   // 评论必须经过审核才

使用LAMP+wordpress搭建并美化博客

准备篇 一个域名 可以去万网,新网,...,... 一个云空间(最好买香港主机,或者外国的,不用备案) 然后将域名添加解析到自己的云空间的ip地址即添加一条A记录 安装篇 下载wordpress安装包. 安装lamp: CentOS 6: httpd, php, mysql-server, php-mysql  service httpd  start  service  mysqld  start CentOS 7: httpd, php, php-mysql, mariadb-server

使用wordpress建立企业或博客网站新手教程

前言   wordpress个开源的,知名的,拥有无数的插件和主题的知名blog/CMS php程序.全球数百万的网站通过wordpress建立或修改. 现在非常多的企业网站使用wordpress来建立和管理自己的企业网站或者博客网站.所以对于新手来说,如何建立自己的博客.网站呢? 1. 域名 对于一个网站来说,域名就是一个入口,一个身份证编号.就像我们都知道的百度,域名是baidu.com,所以,你也需要拥有自己的域名. 域名一般在60元左右1年,价格还是比较便宜的. 注册好你的域名后,将域名

【8】添加新建/编辑博客逻辑

分支:edit_blogs url.py添加对应新增的功能: 1 #!/usr/bin/env python 2 # coding:utf-8 3 4 import tornado.web 5 import application 6 7 url = [(r"^/(favicon\.ico)", tornado.web.StaticFileHandler, 8 dict(path=application.settings['static_path']))] 9 10 url += [(

wordpress搭建自己的博客~

去官方网站下载wordpress,并解压缩.下载链接:https://cn.wordpress.org/ wordpress是一款开源的PHP框架,搭建个人博客网站最实用的选择之一,甚至你都不需要懂PHP你就可以搭建自己的个人网站.提供强大的后台文章管理和插件及主题管理,几乎可以满足个人网站所有需求.甚至,找个好的网站模板,你就相当于成功了一大半. 解压完了之后,将wordpress文件夹内部(注意不是wordpress这个文件夹,而是其内容)的全部内容传输到服务器端的alidata/www/p

JFinal Web开发学习(九)后台添加前台显示博客

效果: 发博客: 显示博客: 后台:使用hui-admin,文章编辑器是百度开源的ueditor 前台:使用layui前端框架 1.写控制器BlogController controller包中 package cn.pangpython.controller; import com.jfinal.core.Controller; import cn.pangpython.model.Blog; import cn.pangpython.utils.DateUtils; /** * @autho

如何在博客中添加背景音乐(博客园必须获得脚本权限)

博客播放器代码大全!! ◆◆◆◆◆MTV代码<embed src="MTV的地址" width="305" height="250" type="video/x-msvideo" autostart="true" loop="false" align="left"> ◆◆◆◆◆背景音乐代码(写在日记标题里)1.显示播放器代码:<embed src=h