WordPress添加个性化的博客宠物的方法

在很多的网站上都看见过这种效果，于是自己也想试试。看见我网站上的小宠物了吗，就是这种效果。
不多说，方法如下：
工具：
下载地址：http://yunpan.cn/cFUmZB8WWthty 访问密码 8c20
里面包含了jQury库，一个js文件和两张图片，图片你任选一种就可以，不过注意代码中图片的扩展名要修改一下
步骤：
一、HTML:
在主题的footer.php 文件下（一般是前）加入以下代码：

<div id="spig" class="spig">

<div id="message">加载中……</div>

<div id="mumu" class="mumu"></div>

</div>

二、CSS:
将下载得到的spig.png或者spig.gif(任选其一)放在主题的images文件夹里（应该都有吧？），当然所有代码都可以自定义路径，后面不再累赘。然后在主题的style.css 文件下加入以下代码：（当然你可以自己修改，下面的代码都是我自己修改过的）

/* 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 文件下（一般是前），加入以下代码：

<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添加个性化的博客宠物的方法相关推荐

30种“行之有效”的用WordPress在线博客赚钱的方法
Are you looking for the top ways to make money online that are NOT scams? WordPress is the largest p ...
阿里云上基于WordPress快速搭建个人博客
阿里云上基于WordPress快速搭建个人博客文章目录阿里云上基于WordPress快速搭建个人博客一.服务器环境: 二.环境部署: 1.重置实例密码 2.链接ECS服务器 3.安装Apache ...
hexo添加disqus_使用Disqus将传统评论添加到Tumblr博客
hexo添加disqus Would you like to add a traditional comment box to your Tumblr blog? Here's how you ca ...
二次元博客php,Mokore: Wordpress二次元简约个人博客主题by江程训
本项目已支援996ICU项目: 一个Wordpress二次元个人博客主题,简约而不简单,Made BY 江程训. 最近总感觉作为一个Wordpress老玩家(其实也不算多老,也就接触这个网站程序一年) ...
XAMPP+WordPress+花生壳搭建博客
XAMPP+WordPress+花生壳搭建博客写在前面 XAMPP WordPress 下载及安装配置花生壳建立映射设置外网访问撤回修改写在后面写在前面这是一篇记录,没有深入的探究, ...
添加马未都先生博客连接
今天不小心看到百家讲坛,马先生在讲关于收藏的知识,百家讲坛据说很火,三国孔子之类的,有一天居然看到了英国人张铁林,但是都没有仔细的看,原因是听了几分钟都感觉没有兴趣,于是转台了. 今天看到马先生讲收藏 ...
nginx+php7+mysql+wordpress搭建自己的博客网站
nginx+php7+mysql+wordpress搭建自己的博客网站安装php7 这是通过源码安装的,也可以通过apt-get install php7来安装 1. tar zxvf php-7. ...
新版CSDN中如何快速转载别人的CSDN博客，详细方法与步骤！！！
前言作为DSCN博客用户小萌新,有可能自己写的博客还不够好,或者当看到别人写的特别好的博客时,就想转载(有些人可能会问:不是可以收藏吗?当然可以收藏,但是有些人也会想转载下载,不可能一个一个字再敲吧 ...
Lemp + Wordpress 快速搭建个人博客
文章目录 MySql Nginx PHP phpMyAdmin phpMyAdmin 高级功能(可选) Wordpress 配置SSL证书(可选) 文件权限的注意事项推荐插件在开始前,可以先准备好 ...

WordPress添加个性化的博客宠物的方法

WordPress添加个性化的博客宠物的方法相关推荐

最新文章

热门文章