WordPress 添加个性化的博客宠物(汉纸篇)

9,972
WordPress 添加个性化的博客宠物(汉纸篇)
  • 5.00 / 5 5
5.00分(1票)
WordPress 添加个性化的博客宠物(汉纸篇)

之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客,因此今天带来个适合男同胞博客的博客宠物。其实都是来自死亡笔记的Q 版人物图片。接下来也附上添加到WordPress 主题的教程。

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

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

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

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

一、CSS

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

1
2
3
4
/* 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.png) no-repeat;}

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

二、加载jQuery库

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

三、HTML

在主题的footer.php 文件下(一般是</body>前)加入以下代码:

1
2
3
4
<div id="spig" class="spig">
    <div id="message">加载中……</div>
    <div id="mumu" class="mumu"></div>
</div>

四、JS

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

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

1
2
3
4
5
<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冲突?);如果再不行,留言请教~

喵~本文目前有13条留言,欢迎发表评论!

  1. 传说中的沙发
    :

    您好,在bae的基础上建了wordpress,按照您的步骤没成功,请教一下!多谢!

    [回复]
    • 哪个步骤出问题了呢?

      [回复]
      • :

        您好,没想到您回复的如此之快,抱歉。都是按照您的步骤来的,不知道哪里除了问题。

        [回复]
        • ❓ 那我怎么知道啊。。。

          [回复]
          • :

            🙄 大神要不在bae上试一下,说不定就问题重现了。 😮

            [回复]
            • 我试过啦,wp.devework.com。话说你按哪个教程的?是这个吗:http://devework.com/baidu-bae-install-wordpress.html

              [回复]
              • :

                不是您的教程不过大同小异。安装没有问题。我的意思是,能不能麻烦您测试一下bae上的动态宠物是否有特殊的有别于本篇教程的地方。多谢。

                [回复]
                • 这个与能否是否运行在bae 是没有关系的

                  [回复]
                  • :

                    我也是这么觉得的。。所以才希望您操作一下,发现我发现不了的问题,给我指导建议的。

                    [回复]
                    • 不要。

                      [回复]
                      • :

                        那好,谢谢您,我在自己找找原因。多谢

                        [回复]
                        • 在写这篇文章的时候我已经做个测试了,当然是没问题的。你叫我在bae重新测试,不如将你的bae上地址告诉我还更好,说不定可以帮你看看。。。

                          [回复]
                          • :

                            已经回复您的邮箱。多谢。

                            [回复]

打破沉默,我来发表评论鸟~