WordPress 添加个性化的博客宠物（妹纸篇）

2013/07/28 WordPress, WP技巧原创 3 10,591

某日闲逛看到的某个博客上的一个博客宠物，准确来说不是宠物，人家可是萌妹纸啊！看看右侧这个图，就是这个萌妹纸了（后来用谷歌相似图片搜索才发现是死亡笔记的）。让我感到有点跌眼镜的是，那个博客主是个汉纸！看着喜欢，于是右键审查元素扒了代码。

看来下代码，发现代码是博客捣鼓笔记的博主木木的作品，不过这个博客现在已经挂了。给大家献上添加到这个萌妹纸到你的WordPress 主题的方法，但，建议汉纸慎用，下次再分享个适合汉纸的……

WordPress 添加个性化的博客妹纸相关文件

教程中要用到的文件有：一张图片、spig.js文件

下载地址：直链下载百度网盘华为网盘

WordPress 添加个性化的博客妹纸篇教程

一、CSS

将下载得到的spig.png放在主题的images文件夹里（应该都有吧？），当然所有代码都可以自定义路径，后面不再累赘。然后在主题的style.css 文件下加入以下代码：

/* pets devework.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;}
.mumu{width:150px;height:190px;cursor: move;background:url(images/spig.gif) no-repeat;}

懂css 代码的话可以修改一下message这个id，使得更加适合你的主题。

二、加载jQuery库

请确定你的主题有没有加载加载jQuery库，如果没有，请按照《为你的WordPress 选择最佳的第三方jQuery 库》与《WordPress中的jQuery库不起作用的相关问题》自行配置。

三、HTML

在主题的footer.php 文件下（一般是</body>前）加入以下代码：

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

四、JS

在添加js 文件前，需要对spig.js文件进行修改，打开该文件，用编辑器的"替换"工具将devework.com 为你的网址。

接着,同样是在主题的footer.php 文件下，接着第三步的代码下面，加入以下代码：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/spig2.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冲突？）；如果再不行，留言请教~