wordpress « 枫林无线

15 3 月 2014

wp评论邮件通知代码+漂亮的评论样式

<?php
// 评论回应邮件通知
function comment_mail_notify($comment_id) {
$admin_notify = ‘1’; // admin 要不要收回复通知 ( ‘1’=要 ; ‘0’=不要 )
$admin_email = get_bloginfo (‘admin_email’); // $admin_email 可改为你指定的 e-mail.
$comment = get_comment($comment_id);
$comment_author_email = trim($comment->comment_author_email);
$parent_id = $comment->comment_parent ? $comment->comment_parent : ”;
global $wpdb;
if ($wpdb->query(“Describe {$wpdb->comments} comment_mail_notify”) == ”)
$wpdb->query(“ALTER TABLE {$wpdb->comments} ADD COLUMN comment_mail_notify TINYINT NOT NULL DEFAULT 0;”);
if (($comment_author_email != $admin_email && isset($_POST[‘comment_mail_notify’])) || ($comment_author_email == $admin_email && $admin_notify == ‘1’))
$wpdb->query(“UPDATE {$wpdb->comments} SET comment_mail_notify=’1′ WHERE comment_ID=’$comment_id'”);
$notify = $parent_id ? get_comment($parent_id)->comment_mail_notify : ‘0’;
$spam_confirmed = $comment->comment_approved;
if ($parent_id != ” && $spam_confirmed != ‘spam’ && $notify == ‘1’) {
$wp_email = ‘no-reply@’ . preg_replace(‘#^www.#’, ”, strtolower($_SERVER[‘SERVER_NAME’])); // e-mail 发出点, no-reply 可改为可用的 e-mail.
$to = trim(get_comment($parent_id)->comment_author_email);
$subject = ‘您在 [‘ . get_option(“blogname”) . ‘] 的留言有了新回复’;
$message = ‘
<div style=”background:#fff;zoom:1;position:relative;z-index:1;margin:50px auto;”><table width=”556″cellspacing=”0″cellpadding=”0″border=”0″align=”center”style=”margin: 0 auto; font: normal 12px/1 微软雅黑,Tahoma,Helvetica,Arial,sans-serif; background: #fff; line-height: 20px;”><tbody><tr><td height=”115″background=”http://aapple-code.qiniudn.com/header.jpg”><div style=”padding: 0 30px 40px;”><h2 style=”color:#fff;font-size:14px;font-weight:normal;padding:0;”><span style=”color: #ED5224″>> </span>您在 <a style=”text-decoration:none;color: #ED5224;”href=”‘ . get_option(‘home’) . ‘”title=”‘ . get_option(‘blogname’) . ‘”target=”_blank”>’ . get_option(‘blogname’) . ‘</a> 中的留言有回复啦！</h2></div></td></tr><tr><td valign=”top”background=”http://aapple-code.qiniudn.com/body.jpg”style=”padding: 0 25px;”><table width=”100%”><tbody><tr><td><div style=”font-size:12px;color:#777;padding:0px 6px 1px;”>’ . trim(get_comment($parent_id)->comment_author) . ‘ 您曾在本站文章「 ’
. get_the_title($comment->comment_post_ID) . ‘ 」中发表留言：</p><p style=”color: #777;border: 1px solid #DDD;padding: 5px 8px 5px 8px;background-color: #FCFCFC;border-radius: 3px 3px 3px 3px;font-size: 12px;line-height: 22px;font-family: Consolas,Courier,minispace,Lucida Console;”>’ . nl2br(get_comment($parent_id)->comment_content) . ‘</p><p>「’ . trim($comment->comment_author) . ‘」 給您的回复如下:</p><p style=”color: #777;border: 1px solid #DDD;padding: 5px 8px 5px 8px;background-color: #FCFCFC;border-radius: 3px 3px 3px 3px;font-size: 12px;line-height: 22px;font-family: Consolas,Courier,minispace,Lucida Console;”>’ . nl2br($comment->comment_content) . ‘</p><p>您可以点击「 <a style=”text-decoration:none; color:#12addb”href=”‘ . htmlspecialchars(get_comment_link($parent_id)) . ‘”title=”单击查看回复的完整內容”target=”_blank”> 查看回复的完整內容</a>」，欢迎再次光临 「<a style=”text-decoration:none; color:#12addb”href=”‘ . get_option(‘home’) . ‘”title=”‘ . get_option(‘blogname’) . ‘”target=”_blank”>’ . get_option(‘blogname’) . ‘</a>」 ！</p></div></td></tr></tbody></table></td></tr><tr><td height=”15″background=”http://aapple-code.qiniudn.com/footer.jpg”></td></tr></tbody></table></div>’;
$from = “From: “” . get_option(‘blogname’) . “” <$wp_email>”;
$headers = “$fromnContent-Type: text/html; charset=” . get_option(‘blog_charset’) . “n”;
wp_mail( $to, $subject, $message, $headers );
//echo ‘mail to ‘, $to, ‘<br/> ‘ , $subject, $message; // for testing
}
}
add_action(‘comment_post’, ‘comment_mail_notify’);
// 自动勾选
function add_checkbox() {
echo ‘<input type=”checkbox” name=”comment_mail_notify” id=”comment_mail_notify” value=”comment_mail_notify” checked=”checked” style=”margin-left:0px;” /><label for=”comment_mail_notify”>有人回复时邮件通知我</label>’;
}
add_action(‘comment_form’, ‘add_checkbox’);
?>

这是豆腐的评论邮件样式.

使用方法：在主题的function.php中添加~（如果已经有这个类函数~请删除掉~）

这个样式超漂亮~如果谁有兴趣，去豆腐博客里评论下，他回复你~就可以看到啦~~~

21 Comments

14 3 月 2014

定时自动备份WordPress数据库的N种方法

1.WordPress Database Backup

这货是一个WordPress插件，插件下载地址：http://wordpress.org/plugins/wp-db-backup/，也可以直接在wp后台搜索WP-DB-Backup 安装

界面还算简单，可以立即备份或者定时备份，可以将备份定时发到邮箱，但是据说有时候这货会漏备份，博主在使用这款插件，有几天确实是没有备份。。。。

2.WP-DBManager

这货也是WordPress插件，但是功能不仅限于备份，它可以管理数据库、优化、修复、清空、甚至是执行sql语句，功能强大

2.5中文版下载： http://pan.baidu.com/s/1gdDVrTx

2.65英文版下载：http://wordpress.org/plugins/wp-dbmanager/

3.WP2PCS

这也是WordPress插件。。。。但是可以备份网站文件+数据库到百度网盘，还可以把网站附件放到百度网盘~2TB这下不愁用不完了哈哈

官方项目地址：http://wp2pcs.duapp.com/

插件下载地址：http://wordpress.org/plugins/wp2pcs/

4.BACKWPUP

也是WP插件。。。。可以备份网站文件+数据库，可以将备份文件存储到本地文件夹、远程FTP、Amazon S3、RackSpaceClous以及通过电子邮件发送

插件下载地址：http://wordpress.org/plugins/backwpup/

5.多备份

这次终于不是插件了，多备份已经有很多博客介绍了，可以绑定百度盘等常用网盘，并且自己也提供512MB空间用于备份存储

可以通过FTP备份、通过php插件打包+连接MySQl备份、通过远程直接访问数据库备份

虽然网站看着有点不靠谱，但是备份了的文件是AES加密的，安全性值得信赖，做个备用的备份也好

官网地址：http://www.dbfen.com

6.小结

本站目前使用了七牛云存储存放附件，所以网站文件几乎是不需要备份了，不过博主偶尔还是会备份下的~

博主目前使用WordPress Database Backup每日备份并发送到邮箱并且同时使用多备份远程备份数据库到百度网盘，另外。。博主的主机商有每日两组离岸自动备份以及SAN离机备份，怎么样~

最后补上一句：数据无价，谨慎对待！

转自：http://www.geekzu.me/archives/auto-backup-wordpress.html

No Comment

12 12 月 2013

wordpress “添加媒体”“文本”按钮不能用

将wordpress站点备份到本地调试主题，却发现个问题，编辑文章的时候“添加媒体”按钮、“文本”按钮都点击没反应了。

以为主题或者数据库有问题，清空数据库，重装wordpress，更换主题，更换浏览器，各种方法都试了一遍，问题依旧，折腾一个大下午了，抓头抓哪都没用，浏览器在百度和谷歌间切换着，终于让我试到了个可行的方法，叫WordPress可视化编辑器不能正常显示，是这样说的：

在博客目录下找到wp-config.php这个文件，在文件最后加上

define('CONCATENATE_SCRIPTS', false );

试了一下方法可行，后来在官网找到了说明：

Disable Javascript Concatenation

To result in a faster administration area, all Javascript files are concatenated into one URL. If Javascript is failing to work in your administration area, you can try disabling this feature:
define(‘CONCATENATE_SCRIPTS’, false);

后来看看英文终于想出了为什么，其实wordpress为了提高效率要求你所有的js要集中到一起，我检查了下主题，果然有js分开放的，于是更改路径集中存放，问题迎刃而解。

9 Comments

25 8 月 2013

人体造型时钟hone clock设置、博客侧栏宠物代码

介绍

枫林博客的右侧的flash人体造型时钟，就是是著名的hone clock。

一开始是日本的一位博主提供的swf，访问原作者

后来因为效果很好，被许多人拿来用啦。

他提供了两种，背景透明和背景黑白的。

演示如下：


背景透明バージョン白とか薄い背景におすすめ	背景白バージョン黒とか濃い背景におすすめ

使用方法：

在html或者worpress小工具的文本中插入

1.js的用法(推荐使用)

<script charset=”Shift_JIS” src=”//js调用地址”></script>

js 下载地址：

背景透明

背景黑白

调用说明：js可以放在自己博客里，调用地址就行，

js是可以修改的，里面的最前面就是swf的地址，我默认设置的是日本原作者的，如果有同学嫌加载慢，自己下载sw文件（在下文有哟），然后修改地址。

以下文中调用说明同上。

2.embed的用法、单object用法、双object用法

embed的用法

<embed id=”forfunex” src=”//swf调用地址”
width=”400″
height=”300″
align=”middle”
quality=”high”
bgcolor=”#f0fff8″
menu=”false”<!–添加后,ff下才正常–>
play=”true”
loop=”false”
FlashVars=””
allowScriptAccess=”sameDomain”
type=”application/x-shockwave-flash”
pluginspage=”http://www.adobe.com/go/getflashplayer”>
</embed>

单object：这种方法的名字叫做 Flash satay，最早是2002年由 Drew McLellan 发表在 A List Apart 上，后来又经过了几次完善：

<object type=”application/x-shockwave-flash” data=”c.swf?path=movie.swf”
width=”400″ height=”300″>
<param name=”movie” value=”c.swf?path=movie.swf” />
<img src=”//swf调用地址” width=”200″ height=”100″ alt=”” />
</object>

双object用法

<object id=”exercises” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”214″ height=”144″>
<param name=”movie” value=”//swf调用地址” />
<param name=”wmode” value=”window” />
<param name=”flashvars” value=””/>
<!–[if !IE]><!–>
<object id=”exercisesEx” type=”application/x-shockwave-flash”
data=”${contextPath}/flex/photo.swf” width=”214″ height=”144″>
<param name=”flashvars” value=””/>
<!–<![endif]–>
<!–[if gte IE 6]>
<![endif]–>
<!–[if !IE]><!–>
<!–<![endif]–>
<a href=”http://www.adobe.com/go/getflashplayer”>
<img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=”Get Adobe Flash player” />
</a>
<!–[if !IE]><!–>
</object>
<!–<![endif]–>
</object>

swf下载地址：

透明swf

黑白swf

3.去掉swf超链接

原作者设置了版权性的超链接，是不是很碍眼，没事，书带草已经做了修改

效果如枫林博客右侧所示

书带草修改去掉超级链接的透明swf

[reply] 点击下载[/reply]

4不喜欢这个风格的可以添加：

<span id=”aa”>当前时间</span><script>setInterval(“aa.innerHTML=new Date().toLocaleString()+’ 星期’+’日一二三四五六’.charAt(new Date().getDay());”,1000);</script>

5.博客侧栏宠物代码

在别的博客看到侧栏有个可爱的小老鼠，有的是游来游去金鱼，有的是蜘蛛。其实就是flash动画，点击标志就可以进入作者博客。那里还有更多的样式，比如小游戏，时钟，企鹅什么的，想要的去看看吧。

地址，点击想要的样式，复制“embed code for wordpress.com”栏下的代码，添加到博客侧栏的“文本”小工具中即可。

演示：

4 Comments

19 8 月 2013

wordpress评论链接重定向

链接重定向

最近在不断一点点加工现在的主题。所以会不断写wordpress的一些常见小功能。

wp主题总是会有很多为了打广告和增加外链的评论者，虽然有ask的过滤，但是还是不够完美。

于是书带草就决定把所有的评论里的链接都重定向，加上自己的域名在每个链接的最前面。这样就不会有不必要的权重流失了。

下面是代码：

打开我们的主题目录，找到functions.php，在适当位置加上下面的代码（这个适当位置够模糊，我是加在评论回复部分前面的）：

//comments link redirect 
add_filter('get_comment_author_link', 'add_redirect_comment_link', 5);
add_filter('comment_text', 'add_redirect_comment_link', 99);
function add_redirect_comment_link($text = ''){
    $text=str_replace('href="', 'href="'.get_option('home').'/?r=', $text);
    $text=str_replace("href='", "href='".get_option('home')."/?r=", $text);
    return $text;
}
add_action('init', 'redirect_comment_link');
function redirect_comment_link(){
    $redirect = $_GET['r'];
    if($redirect){
        if(strpos($_SERVER['HTTP_REFERER'],get_option('home')) !== false){
            header("Location: $redirect");
            exit;
        }
        else {
            header("Location: http://www.blogfeng.com/");
            exit;
        }
    }
}

这样修改后，刷新下页面，我们的评论者链接已经被重定向了。

[reply]功能代码直接下载[/reply]

放一首歌：

4 Comments

18 8 月 2013

WP Greet Box访客问候信息WordPress插件

WP Greet Box 是一款可以根据访客来源URL显示不同的访客问候信息的WordPress插件。

比如一个用户从Digg来到你的一个网页，可以显示一个信息，提示他Digg你的文章。如果是从Twitter来，那可以提示它分享这篇文章为一条Tweet或订阅你的Twitter，如果是从Google搜索关键词而来，则可以提示它订阅你的RSS Feed, 并显示一份匹配搜索关键词的相关文章列表。

这些问候信息都支持自定义，插件集成支持的来源URL涵盖了国外大多的热门书签服务、搜索引擎和社会化网站。具体可以查看插件介绍里的支持列表介绍。更重要的是，你还可以添加任何自己需要的来源URL和给该URL来的用户定义个性化的提示信息。比如，你可以定义从枫林博客到你的网站的用户”欢迎你，来自枫林博客的朋友……”

插件下载页面

点击直达

20 Comments

16 8 月 2013

通用无插件添加宠物（原创）

1.前言介绍

书带草最近看到伪春菜的插件比较火热，不仅wp,emlog,dz上也能看到。

我也放一款自己一直在用的添加宠物功能的无插件方法。比伪春菜功能要多要全。

宠物部分功能：（文字均可以自己修改，宠物图片可以自己修改）

1.鼠标hover，显示“努力加载。。”

2.显示天气预报

3.无动作状态碎碎念

4.无动作瞬间漂移

5.显示欢迎光临

6.右键显示订阅和首页

7.评论提示

8.可以鼠标自由拖动。

9.鼠标点击会隐身

10.鼠标焦点锁定文章标题，有提示信息

演示暂时不放啦~以前来过枫林博客的人肯定都见过。

下面告诉大家怎么修改。以wordpress为例，其他程序依据步骤一样可以成功。

2.添加css样式

/***宠物样式***/
.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:11px}
.mumu{width:150px;height:190px;cursor: pointer;background:url(“img/spig.png”) no-repeat}

#loading-comments{display:none;background:none!important;height:50px;text-align:center;font-size:18px!important;color:#fff!important;margin:30px 0px 0px 0px}
.commentnavgation{font-family:”Microsoft YaHei”,Trebuchet MS,Arial,Verdana,Tahoma,sans-serif;font-size:12px;margin-bottom:30px;margin-top:10px}
.commentnavgation a {color:#888888;}
.commentnavgation a:hover{color:#383838;}
.commentnavgation .page-numbers{background:#FFF;font-size:12px !important;text-decoration:none;border-radius:8px 2px 8px 2px;-webkit-border-radius:8px 2px 8px 2px;-moz-border-radius:8px 2px 8px 2px;-khtml-border-radius:8px 2px 8px 2px;margin:10px 2px;padding:2px 7px}
.commentnavgation span.current{background:rgb(114,114,114);color:#FFF;font-weight:700}
#comments a{color:#000000;text-decoration:none;border:0;-webkit-transition:color .3s linear;-o-transition:color .3s linear}
#comments .commentinfo a{color:#DD965E}
#comments a:hover{color:#E38383;text-decoration:none}
#comments{padding-top:40px;list-style:none}
#comments .comment{zoom:1;padding-bottom:13px}
#comments .comment:first-child{zoom:1}
#comments .comment:after{visibility:hidden;display:block;font-size:0;content:” “;clear:both;height:0}
#comments .comment > .info{float:left}
#comments .comment > .info .comment-reply-link{color:#FFF;display:block;text-align:center;padding-left:5px;-webkit-text-shadow:0px 1px 1px rgba(0,0,0,0.5);-moz-text-shadow:0px 1px 1px rgba(0,0,0,0.5);-o-text-shadow:0px 1px 1px rgba(0,0,0,0.5);text-shadow:0px 1px 1px rgba(0,0,0,0.5)}
#comments .comment > .info .comment-reply-link:hover{color:#ca1c39;-webkit-text-shadow:0px 1px 1px rgba(0,0,0,0);-moz-text-shadow:0px 1px 1px rgba(0,0,0,0);-o-text-shadow:0px 1px 1px rgba(0,0,0,0);text-shadow:0px 1px 1px rgba(0,0,0,0)}
#comments .comment > .info .avatarcontainer .avatar{width:55px;height:55px;overflow:hidden;-webkit-border-radius:22px 4px 22px 4px;-moz-border-radius:22px 4px 22px 4px;border-radius:22px 4px 22px 4px;box-shadow:1px 1px 2px rgba(0,0,0,0.35);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.35);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.35);margin-bottom:4px}
#comments .comment .content{position:relative;background:white;color:#5c5c5c;float:left;width:450px;padding:10px;margin-left:30px;font-size:11px;-webkit-border-radius:22px 5px 22px 5px;-moz-border-radius:22px 5px 22px 5px;border-radius:22px 5px 22px 5px;box-shadow:1px 1px 2px rgba(0,0,0,0.15);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.15)}
#comments .comment .content .meta{display:block;color:#909090;margin-top:-5px}
#comments .comment .content .meta .comment-reply-link:before{content:” – “;font-weight:bold}
#comments .comment.author{font-weight:bold}
#comments .comment .content:after,#comments .comment .content:before{content:””;position:absolute;z-index:1000;top:15px;left:1px;margin-left:-6px;border-top:6px solid transparent;border-left:0;border-right:6px solid white;border-bottom:6px solid transparent}
#comments .children{list-style:none}
#comments .children .comment > .info{float:right}
#comments .children .comment .content{margin-left:0px;margin-right:30px;float:right;width:415px}
#comments .children .comment .content:after,#comments .children .comment .content:before{content:””;position:absolute;z-index:1000;top:15px;left:auto;right:1px;margin-left:0px;margin-right:-6px;border-top:6px solid transparent;border-left:6px solid white;border-right:0;border-bottom:6px solid transparent}
#comments .children .comment #respond{margin-right:85px;clear:both}
#comments .children .comment #respond input{width:102px}
#comments .children .comment #respond textarea{width:393px}
.datet{font-family:”Georgia”,’Microsoft Yahei’;color:#181107;float:right}
#content p{word-break:break-all;color:#33383D}
#comments #respond{font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;margin-left:0px;float:right;margin-top:20px}
#comments #respond .info{margin-top:-4px}
#comments #respond .content{float:none;clear:both;margin:0px 0px 20px 0px}
#comments #respond .label{font-weight:normal;display:none}
#comments #respond textarea{width:475px}
#comments #respond input{width:131px}
#respond .content{margin-bottom:20px;background:white;padding:15px;margin-top:0px;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;font-size:13px;line-height:22px;color:#7a7a7a;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-border-radius:50px 10px;-moz-border-radius:50px 10px;border-radius:50px 10px;box-shadow:1px 1px 2px rgba(0,0,0,0.15);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.15)}
#respond label{display:block}
#respond .label{display:block;text-align:center;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;font-size:24px;-webkit-text-shadow:0px 1px 1px rgba(0,0,0,0.3);-moz-text-shadow:0px 1px 1px rgba(0,0,0,0.3);-o-text-shadow:0px 1px 1px rgba(0,0,0,0.3);text-shadow:0px 1px 1px rgba(0,0,0,0.3);padding-bottom:20px;color:white}
#respond input,#respond textarea{width:140px}
#respond textarea{margin-top:16px;width:500px;padding:10px;height:150px;resize:vertical}
#respond p{padding-bottom:0px}
#respond p.submit{padding-top:15px;padding-bottom:5px}
#respond p.submit input{width:90px}
#respond .details{padding-bottom:15px;zoom:1}
#respond .details:first-child{zoom:1}
#respond .details:after{visibility:hidden;font-size:0;content:” “;clear:both;height:0}
#respond .details p{padding-bottom:0px;float:left;margin-right:20px}
#respond .details p.last{margin-right:0px}
#respond p.message{margin:0px;float:none;clear:both;position:relative}
#respond p.message .placeholder{margin-top:16px;position:absolute;top:10px;left:10px}
#respond .reply,#respond .info{font-size:11px;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;padding-bottom:5px;padding-left:5px;margin-top:-5px;zoom:1}
#respond .reply:first-child,#respond .info:first-child{zoom:1}
#respond .reply:after,#respond .info:after{visibility:hidden;display:block;font-size:0;content:none;clear:both;height:0}
#respond .reply span.reply,#respond .info span.reply{float:right}
#respond .reply{margin:0px;float:right;padding:5px 5px 0px 0px}
.author{font-size:13px;line-height:80%;font-weight:normal;font-family:Arial,”Microsoft YaHei”,Georgia,sans-serif;color:#5F5F5F}
.author a{text-decoration:none;color:#CF0505}
label{padding-left:3px}
input[type=submit],.button{width:80px;background:#f4f4f4;font-size:12px}
input[type=submit]:hover,.button:hover{box-shadow:inset 0px 0px 0px rgba(0,0,0,0);-webkit-box-shadow:inset 0px 0px 0px rgba(0,0,0,0);-moz-box-shadow:inset 0px 0px 0px rgba(0,0,0,0);box-shadow:0px 1px 3px rgba(0,0,0,0.12);-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.12);-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.12)}
input,textarea{background:white;border:1px solid #d5d5d5;height:24px;line-height:24px;padding:0px 10px 0px 10px;margin:0px;font-family:”Trebuchet MS”,Helvetica,”Microsoft YaHei”,Georgia,sans-serif;font-size:11px;color:#7a7a7a;box-shadow:inset 0px 1px 3px rgba(0,0,0,0.12);-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.12);-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.12);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
input:focus,textarea:focus{color:black}
input.error,textarea.error{border-color:#ff8c8c}
input#s{width:89%}
textarea{height:150px}
#s{float:left;width:65px;-webkit-transition-duration:400ms;-webkit-transition-property:width,background;-webkit-transition-timing-function:ease;-moz-transition-duration:400ms;-moz-transition-property:width,background;-moz-transition-timing-function:ease;-o-transition-duration:400ms;-o-transition-property:width,background;-o-transition-timing-function:ease}
input#s{border-radius:9px 1px 9px 1px;background:url(img/search.png) no-repeat 5px 1px;font-size:12px;height:15px;line-height:1.2em;padding:4px 10px 3px 28px}
#s:focus{background-color:#f9f9f9;width:150px}
#searchform{float:right;width:80px;height:26px;margin-top:-15px;margin-right:10px;-webkit-transition-duration:400ms;-webkit-transition-property:width,background;-webkit-transition-timing-function:ease;-moz-transition-duration:400ms;-moz-transition-property:width,background;-moz-transition-timing-function:ease;-o-transition-duration:400ms;-o-transition-property:width,background;-o-transition-timing-function:ease}
#searchform:hover{width:150px;margin-right:10px}
#archivebox{float:left;clear:bone;margin-top:-15px;margin-left:30px}
#archivebox select{border-radius:9px 1px 9px 1px;background:#ffff;width:100px;border:1px solid #999;color:#666;font-size:12px;font-weight:200}
#pagenavi{font-family:”Microsoft JhengHei”;line-height:22px;margin-bottom:20px;padding-top:10px;padding-left:30px;text-decoration:none}
#pagenavi span.pagescout{float:left;display:block;width:120px;padding-left:35px;margin-right:35px;background:url(img/milestone.png) 0 0px no-repeat;color:white}
#pagenavi .page-numbers{margin:0 3px;padding:0 3px;text-decoration:none}
#pagenavi .current{background-color:white;border-radius:8px 0px 8px 0px;-moz-border-radius:8px 0px 8px 0px;padding:2px 3px;margin:0 2px;color:black}
#pagenavi .kong{color:white}
#shangxia{left:50%;position:fixed;top:80%;display:block;margin-left:317px}
#shang{background:url(“img/up.png”) no-repeat scroll 0 0 transparent;position:relative;cursor:pointer;height:75px;width:75px}
#shang:hover{opacity:0.69}
.box{opacity:1;background:#FFF;padding:23px 28px 30px 25px;line-height:22px;color:#4A4A4A;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;overflow:hidden;box-shadow:1px 1px 2px rgba(0,0,0,0.15);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.15);margin-bottom:25px;-webkit-border-radius:70px 10px 50px 2px;-moz-border-radius:70px 10px 50px 2px;border-radius:70px 10px 50px 2px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 3s ease-in-out;-o-transition:all 3s ease-in-out;transition:all 3s ease-in-out}
.box:hover{box-shadow:0 0 30px rgba(255,255,255,.6),inset 0 0 20px rgba(255,255,255,1)}
.lahuan{position:fixed;position:absolute;right:50%;margin-right:-360px;top:-20px;+top:0px;overflow:hidden;width:60px;height:290px}
.lahuan_zi{position:fixed;position:absolute;top:-190px;left:0;width:55px;height:290px;background:url(img/lahuan.png) no-repeat;cursor:pointer}
.my-archive li{font-size:12px;margin:0px;border-bottom:1px dashed #CCC;background:url(img/sidebarli.gif) no-repeat 0px 2px;padding:1px 0px 1px 0px}
#youyou{padding-bottom:20px}
#youyouh3 h3{margin:0 auto;font-size:17px;font-weight:500;clear:left;color:#000000;padding:24px 0px 10px 0px}
#youyou ul li a{color:#494949;font-size:13px;display:block;text-decoration:none;float:left;height:22px;overflow:hidden;width:100px;border:1px solid white;background:#F9F9F9;-moz-box-shadow:0 0 3px #AAA;-webkit-box-shadow:0 0 3px #AAA;box-shadow:0 0 3px #AAA;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;margin:4px 12px}
#youyou ul li a:hover{border-bottom:#FF5708 2px solid;color:#FF5708;font-weight:bold;height:21px}
#navbar{position:fixed;right:-89px;bottom:0px;background:url(img/navbar.png) no-repeat;width:113px;height:250px;cursor:pointer}
.navbarmenu{opacity:0.59;width:80px;height:190px;padding-top:25px;padding-left:26px;-webkit-transition-duration:2800ms;-webkit-transition-timing-function:ease;-moz-transition-duration:2800ms;-moz-transition-timing-function:ease;-o-transition-duration:2800ms;-o-transition-timing-function:ease}
.navbarmenu:hover{opacity:1}
.navbarmenu li{list-style:none;float:none !important;margin:1px;padding-left:5px}
.navbarmenu li a{font-size:12px;color:#ffffff;text-decoration:none;background:#5A5A5A;padding:0px 4px;margin:0 8px 8px 0;display:inline-block;-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1);border-radius:11px 2px 11px 2px;-webkit-border-radius:11px 2px 11px 2px;-moz-border-radius:11px 2px 11px 2px;-khtml-border-radius:11px 2px 11px 2px}
.navbarmenu li a:hover{font-size:12px;color:#5A5A5A;text-decoration:none;background:#ffffff;padding:0px 4px;margin:0 8px 8px 0;display:inline-block;-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1);border-radius:11px 2px 11px 2px;-webkit-border-radius:11px 2px 11px 2px;-moz-border-radius:11px 2px 11px 2px;-khtml-border-radius:11px 2px 11px 2px}
::-webkit-scrollbar-track-piece{background-color:#15212F;-webkit-border-radius:0}
::-webkit-scrollbar{width:15px;height:8px}
::-webkit-scrollbar-thumb{height:50px;background-color:#999;-webkit-border-radius:8px;outline:2px solid #15212F;outline-offset:-2px;border:2px solid #15212F}
::-webkit-scrollbar-thumb:hover{height:50px;background-color:#ffffff;-webkit-border-radius:8px}
::selection,*::-moz-selection{background:#466119;color:white;text-shadow:none}
#bg{position:fixed;left:0;top:0;overflow:hidden;z-index:0}
.error{background:url(img/error.png) 100% 4px no-repeat}
.valid{background:url(img/valid.png) 100% 4px no-repeat}
.widget_tabcontent_post{margin-bottom:15px;clear:both;overflow:hidden}
.widget_tabcontent_post .selected{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;background:#8A8A89;color:white}
.widget_tabcontent_post h4{color:#2A4102;height:24px;font-size:13px;text-align:center;margin-bottom:7px;font-weight:normal;border-bottom-color:#E9E9E9;border-bottom:1px dotted #CFCFCF;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;cursor:pointer}
.widget_tabcontent_post h4:hover{color:rgba(167,81,2,0.85);text-shadow:#F9D597 0px 0px 5px;-webkit-transition:color .3s linear;-o-transition:color .3s linear}
.widget_tabcontent h4 span,.widget_tabcontent_post h4 span{cursor:pointer;padding:3px 6px}
.widget_tabcontent_post .hide{display:none}
#ph_lay,#ph_zoom{top:0;left:0;width:100%;z-index:9999;display:none;text-shadow:none}
#ph_lay{position:fixed;height:100%;_height:expression(Math.max(documentElement.clientHeight,body.scrollHeight)+’px’);_position:absolute}
#ph_zoom{overflow-x:hidden;position:absolute}
#ph_zoom span{margin:0;padding:0 9px;float:right;color:inherit}
#ph_lay,#ph_cap,#ph_nav span{background:#000}
#ph_cap,#ph_nav{cursor:pointer;font-size:14px;line-height:21px;position:absolute}
#ph_nav #ph_prev,#ph_cap #ph_txt{float:left}
.zoomed{margin:0;padding:0;max-width:none;cursor:pointer;position:absolute}
.phzoom{position:relative;display:inline-block;max-width:100%;margin-left:auto;margin-right:auto}
.phzoom img{display:block}
.ph_hover{top:0;left:0;width:100%;height:100%;display:block;position:absolute;background:rgba(0,0,0,0.3) url(img/imghover.png) no-repeat 50% 50%}
.phzoom .loading{background:url(img/loading.gif) no-repeat 50% 50%}

.hover-comment .vcard { height:35px; width:35px; float:left; }
.hover-comment .louceng, .hover-comment .commentmetadata { display:none; }
.hover-comment { position:absolute; list-style:none; display: block; z-index:3; border: 5px #000 solid; background-color: white; max-width:600px; }
.hover-comment .commentmetcontent { padding:10px; margin-left:35px; border: none; }
.hover-comment .fn { display:none; }
.hover-comment .avatar { width:28px; height:28px; border: none; padding:5px 0 5px 5px; }
.hover-comment-left{ line-height: 0; position: absolute; left: -40px; border-width: 20px; border-style:dashed solid dashed dashed; border-color: transparent #000 transparent transparent; }
#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-top:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #2187e7;width:30px;height:30px;margin:0 auto;-moz-animation:spin .5s infinite linear;-webkit-animation:spin .5s infinite linear;position:fixed;left:20px;bottom:20px}
#circle1{background-color:rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-top:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #2187e7;width:10px;height:10px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinoff .5s infinite linear;-webkit-animation:spinoff .5s infinite linear}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}@-moz-keyframes spinoff{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(-360deg)}
}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}@-webkit-keyframes spinoff{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(-360deg)}
}

注意第7行”img/spig.png”

这是图片路径，如果wp的话放入主题文件夹中的img文件夹就好。其他程序请修改。

把以上样式添加到自己的主题样式中，wp直接修改主题文件的style.css，其他程序放入主题调用的主css。

css样式点击下载1

css样式点击下载2

3.添加js文件

防止一下伸手党，这里我只提供下载好了。

其中的文字与链接都可以修改。

[reply]pet.js点击下载1[/reply]

[reply]pet.js点击下载2[/reply]

4.在页面添加调用代码

wordpress可以选择在header 或者footer 中添加都可以。

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/pet.js”></script>

<script type=”text/javascript”>
var isindex = false;
var title = ”;
var visitor=”<?php if (!$user_ID) {if($_COOKIE[“comment_author_” . COOKIEHASH]!=””){echo $_COOKIE[“comment_author_” . COOKIEHASH]; } else { echo “”; } } else { echo “”; } ?>”;
</script>
<div id=”spig” class=”spig”>
<div id=”message”>加载中……</div>
<div id=”mumu” class=”mumu”></div>

注意第一行为调用的js路径，wp直接把js放到主题文件夹的js下面，如果是其他程序，请自行修改。

调用代码点击下载1

调用代码点击下载2