Wordpress - HHTjim'S 部落格

为wordpress添加google+按钮

作者：matrix 发布时间：2013-09-10 分类：Wordpress 兼容并蓄

google+已挂～

为WordPress添加google+按钮实现很简单。

在需要显示的地方添加其中第4行代码：

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">  
    {lang: 'zh-CN'}  
    </script>  
    <g:plusone size="small"></g:plusone>

说明：第1-3行是调用google+的js

第4行是显示google+按钮，size="small"是最小的。除了small以外还有medium、inline、tall尺寸。

除了使用默认的当前所在页面+1还可以指定+1的URL：

<g:plusone href="<?php the_permalink() ?>"></g:plusone>

更可以自定义：http://www.google.com/webmasters/+1/button/index.html

参考：http://www.isongxia.com/google-1.html

修改Blockquote让引用文段模块更漂亮

作者：matrix 发布时间：2013-09-05 分类：Wordpress 兼容并蓄

更换主题-七彩之家BLUE2.0以及后续的修改提过修改css中Blockquote样式来让引用样式更beautiful。

样式一：

代码：

blockquote{    
background: #d9e9ff;    
padding: 10px 15px 10px 15px;    
margin: 1em 3em 1em 3em;    
font-size:.8em;    
border-style:dotted dotted dotted solid;    
border-width:1px 1px 1px 5px;    
border-color:#5bbcdd;    
line-height:200%;    
}

样式二：阅读剩余部分 »

wordpress中提取文章内第一张图片作为缩略图

作者：matrix 发布时间：2013-09-04 分类：Wordpress 兼容并蓄

网上有很多类似的代码，大多都来自知更鸟的HotNews。略有不同，这里还是记录一下。

一.模板函数中添加：

<?php //取文章内first_image  
function catch_first_image() {  
global $post,$posts;  
$first_img = '';  
ob_start();  
ob_end_clean();  
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',$post->post_content,$matches);  
$first_img = $matches [1] [0];  
if(emptyempty($first_img)){  
$random = mt_rand(1,10);  
echo get_bloginfo ( 'stylesheet_directory');  
echo '/images/random/'.$random.'.jpg';//若没有则输出/images/random/内图片  
}  
return $first_img;  
}  

?>

二.主题目录内新建includes文件夹，thumbnail.php丢入：阅读剩余部分 »

完善lazyload懒加载图片渐显特效

作者：matrix 发布时间：2013-09-03 分类：Wordpress 兼容并蓄

图片时载入的渐显特效JQuery 中有提到lazyload，可以加速WordPress站点的页面载入速度。只是以前的有些偏移这里稍微更新一下。

官网：http://www.appelsiini.net/projects/jeditable

github：https://github.com/tuupola/jquery_jeditable

多图demo：http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

预加载图片和lazyload v1.8.5下载：

http://www.400gb.com/file/29074139

http://pan.baidu.com/share/link?shareid=2497435386&uk=3238236832

步骤：

1.header中加载JQ库这里使用1.7.2版本的没问题。若已经加载JQ库不必重复加载。

2.紧接着加载压缩包里的jquery.lazyload.min.js。依然还是主题的header中。（示例，放入主题目录内的/js/文件夹）

3.再添加js代码，还是紧接着放置。

<script type="text/javascript" charset="utf-8">  
jQuery(document).ready(  
function($){  
$("img").lazyload({  

     effect      : "fadeIn" //加载图片使用的效果(淡入)  

});  
});  
  </script>

说明：第4行的img为需要预加载的地方。这里是所有img标签。

4.还再主题的header.php中添加

<?PHP ob_start();?>

说明：使用ob_start()函数自动在缓冲区处理需要最终加载的图片标签格式

5.在主题footer.php适当位置处添加php代码.可以是</body>之前，也可以是最后一行。

 <?php  

//图片延缓加载相关处理，替换src为data-original，并添加占位符  
$echo = ob_get_contents(); //获取缓冲区内容  
ob_clean(); //清楚缓冲区内容，不输出到页面  
$placeholder = "grey.gif"; //占位符图片  
$preg = "/<img (.*)src(.*) \/>/i"; //匹配图片正则  
$replaced = '<img \\1src="'.$placeholder.'" data-original\\2 />';  
print preg_replace($preg, $replaced, $echo); //重新写入的缓冲区  
ob_end_flush(); //将缓冲区输入到页面，并关闭缓存区  
?>

说明：注意第6行中的grey.gif为：预加载的图片名称grey.gif，预加载的图片路径：WordPress程序根目录。当然这里也可以使用绝对路径。

压缩包内还有白色的white.gif和透明的transparent.gif都是预加载图片，可自定义跟换。

参考：http://dl.epinv.com/post/304.html

http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

http://www.oschina.net/code/snippet_111193_3306

http://www.173it.cn/view-5577-1.html

WordPress中添加评论Ctrl+Enter快捷回复

作者：matrix 发布时间：2013-09-01 分类：Wordpress 兼容并蓄

修改TC_NGRO主题时发现提交评论没有Ctrl+Enter快捷回复，而现在的主题一般都有此功能很实用。

在comments.php中找到类似代码

<p><textarea rows="5" cols="50" name="comment" class="textarea" id="comment"></textarea></p>  
<p><input type="submit" value="<?php _e('提交评论/Ctrl+Enter'); ?>" id="submit" class="submit" /><?php comment_id_fields(); ?> </p>

要确保<textarea中的name、id的值与下面的js代码中的第2行处的值（此处为comment）对应一致。

<input中的 type、id的值下面的js代码中的第12行处的值（此处为submit）对应一致。

在</form>下行处添加js代码:

<script type="text/javascript">  
document.getElementById("comment").onkeydown = function (moz_ev)  
{  
var ev = null;  
if (window.event){  
        ev = window.event;  
    }else{  
        ev = moz_ev;  
    }  
if (ev != null && ev.ctrlKey && ev.keyCode == 13)  
    {  
        document.getElementById("submit").click();  
    }  
}  
</script>

wordpress中文章内图片自动添加外边框

作者：matrix 发布时间：2013-08-29 分类：Wordpress 兼容并蓄

给文章中的图片自动添加外边框会带来不一样的效果，需要在主题style.css中添加代码。

样式一：

代码：阅读剩余部分 »

孤雨在线文件管理系统-站长web工具

作者：matrix 发布时间：2013-08-25 分类：Wordpress 兼容并蓄

之前的用的ftp在线解压-php程序的发现还不错的，CMSwaare。

孤雨在线文件管理系统-用了才说好~

v1.3 版本：

下载: http://pan.baidu.com/share/link?shareid=3379878310&uk=3238236832

城通网盘：http://www.400gb.com/file/28616141

百度网盘源：http://pan.baidu.com/share/link?shareid=3379878310&uk=3238236832

解压缩完全没压力，还支持全站文件备份，经测试么问题只是自杀功能不能实现，应该是函数限制的原因。

还有基本FTP功能、.支持本地上传或者网络远程上传文件、权限读取与修改功能、数据库备份（需要手动填入数据库信息）

使用说明：

处于安全考虑建议事先修改管理员用户及密码，打开ftp.php：

$txtcolor1 = "#000000";  
$txtcolor2 = "#003399";  
$filefolder = "./";  
$sitetitle = '孤雨在线文件管理系统';  
$user = 'admin';  
$pass = 'pass';  
$meurl = $_SERVER['php_SELF'];  
$me = end(explode('/',$meurl));

很好的站长web工具，值得拥有！

参考：哼哼猪

添加js抖动特效-鼠标悬停图片文字抖动

作者：matrix 发布时间：2013-08-13 分类：Wordpress 兼容并蓄

为WordPress添加js抖动特效效果不错！

在header.php添加代码：

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>  
<script type="text/javascript" src="/js/jquery.doudong.js"></script>  
<script type="text/javascript">  
//抖动特效  
$(document).ready(function(){  
    $('.logo,#bot_mainr').shake();  
});  
</script>

说明：

第1、2行的js文件时必须加载的，如果加载了JQ库就不用加载jquery-1.4.2.min.js文件。

第6行的.logo 和#mainr是设定的抖动标签和样式。

js下载：http://189.io/gLwunn

代码来自：http://www.17sucai.com/pins/505.html

HHTjim'S 部落格