WordPress 添加个性化的博客宠物(汉纸篇)
之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客,因此今天带来个适合男同胞博客的博客宠物。其实都是来自死亡笔记的Q 版人物图片。接下来也附上添加到WordPress 主题的教程。
WordPress 添加个性化的博客汉纸相关文件
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.png) 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冲突?);如果再不行,留言请教~
- Android SlidingMenu 侧拉菜单的使用(详细配置)
- Rafy 框架 - 幽灵插件(假删除)
- 用粒子群优化算法求解旅行商问题
- 使用CNN(LSTM架构)进行序列预测基于TensorFlow
- 【独家】周志华教授gcForest(多粒度级联森林)算法预测股指期货涨跌
- 如何利用SOTER,1个版本内完成指纹支付开发?
- Rafy 框架 - 大批量导入实体
- Rafy 框架 - 执行SQL或存储过程
- 关于activitygroup过时,用frament替换操作
- Rafy 框架 - 为数据库生成注释
- CNN预测股票走势基于Tensorflow(思路+程序)
- 路径查找器AI
- android推荐使用dialogFrament而不是alertDialog
- 自定义圆角和园边的实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 搞它!!!linux服务器硬件及RAID 配置实战
- 认识XML
- 基于oracle的sql(结构化查询语言)指令
- oracle约束条件
- oracle常用函数介绍
- 搞它!!!Linux系统中查看进程和计划任务管理
- 搞它!!!深入了解linux文件系统底层原理及日志文件介绍
- 搞它!!!Linux系统MBR分区和GPT分区的区别
- oracle补充
- 搞它!!!Linux系统LVM原理及磁盘配额(PV、VG、LV、PE的关系,手把手教你,嘴对嘴的传达)
- 搞它!!!linux网络服务基本设置命令合集
- 搞它!!!Linux系统上DHCP服务器的配置(理论加实验,分分钟搞定!!!)
- 搞它!!!Linux——引导、排障及修复
- 排障集锦:九九八十一难之第一难!linux发现交换文件无法打开文件!
- 排障集锦:九九八十一难之第三难!搭建DNS错误:Host xxxx not found: 2(SERVFAIL)