下面直接上代码吧（把下面的代码写入主题目录下的functions.php中）

function spam_protection_math(){
//获取两个随机数, 范围5~15
$num1=rand(5,15);
$num2=rand(5,15);
//最终网页中的具体内容
echo"<fieldset id='math'>"
."$num1 + $num2 = <input type='text' name='sum' id='sum' value='' tabindex='9'>"
."<input type='hidden' name='num1' value='$num1'>"
."<input type='hidden' name='num2' value='$num2'>"
."</fieldset>";
}

function spam_protection_pre($commentdata){
$sum=$_POST['sum'];//用户提交的计算结果
switch($sum){
//得到正确的计算结果则直接跳出
case $_POST['num1']+$_POST['num2']:break;
//未填写结果时的错误讯息
case null:wp_die('Error: please fill the math spam protection field.');break;
//计算错误时的错误讯息
default:wp_die('Error: in case of a wrong answer.');
}
return $commentdata;
}

if($comment_data['comment_type']==''){
    add_filter('preprocess_comment','spam_protection_pre');
}

最后, 在你的评论模板comments.php定位到你想放置算术验证码的地方, 并插入<?php spam_protection_math();?>这一句便ok. 你可以在style.css中使用#math与#sum这两个选择器来自定义其显示样式.

不过有一点需要提示一下的是，因为目前很多wordpress博客都采用了Willin Kan的ajax提交评论的话，那么上面的代码你就需要再处理一下了，把上面代码中的wp_die改为err即可。

如果你希望在自己登陆时不受算术验证码制约, 那么可以采用下面的代码（也是本人正在使用的代码）:

//算术验证码
function spam_protection_math(){
  //获取两个随机数, 范围0~9
  $num1=rand(0,9);
  $num2=rand(0,9);
  echo"<div class='row'>"
      ."<label for='math' class='small'>验证码(必填)：</label>"
    ."$num1 + $num2 = <input type='text' name='sum' class='math_textfield' value='' tabindex='1'>"
    ."<input type='hidden' name='num1' value='$num1'>"
    ."<input type='hidden' name='num2' value='$num2'>"
    ."<label for='math' class='small'> 请输入两数之和</label>"
    ."</div>";
}
function spam_protection_pre($commentdata){
  $sum=$_POST['sum'];//用户提交的计算结果
  switch($sum){
    //得到正确的计算结果则直接跳出
    case $_POST['num1']+$_POST['num2']:break;
    //未填写结果时的错误讯息
    case null:err('错误: 请填写算术结果.');break;
    //计算错误时的错误讯息
    default:err('错误: 哎呀，你算错了哦，重试一下吧！');
  }
  return $commentdata;
}
if(!is_user_logged_in() && $comment_data['comment_type']==''){
  add_filter('preprocess_comment','spam_protection_pre');
}

其实认真的朋友仔细一看应该能发现，其实上面代码的重点就是把最后那段换成了

if(!is_user_logged_in() && $comment_data['comment_type']==''){
    add_filter('preprocess_comment','spam_protection_pre');
}

而已，然后在评论模板comments.php中的内容也应替换为<?php if(!is_user_logged_in())spam_protection_math();?>即可。

资料来源:http://phoetry.me/archives/add-math-spam-protection-to-your-theme.html

» 转载请注明来源:【壹品下载】 » 《WordPress评论添加算术验证码功能（防止垃圾留言的利器）》

» 本文链接地址:http://dl.epinv.com/post/309.html

» 订阅本站:http://feed.feedsky.com/wepinv

应用Div CSS网页布局，经常性地会使用到float，很多例如版式错位等情况都有可能是浮动在作怪，清除浮动是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

下面看今天的教程，此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

一、使用空标签清除浮动

我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<div>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<div class=”clr”></div>
</div>

二、使用overflow属性，清除CSS浮动

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

三、使用after伪对象清除浮动

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

上面提到的三种CSS清除浮动的方法各有利弊，使用时应择优选择，比较之下第二种CSS清除浮动的方法可能比较优化。

资料来源：http://king.violinmm.com/?p=597

» 转载请注明来源:【壹品下载】 » 《实用的CSS清除浮动的3种方法》

» 本文链接地址:http://dl.epinv.com/post/308.html

» 订阅本站:http://feed.feedsky.com/wepinv

网上搜索了很多相关文章的代码，大部分都是抄来抄去，基本上都是一个妈生的，唯一看这带相关日志代码还比较顺眼，搜集起来备忘一下。

wordpress相关文章核心代码

<?php
$post_tags=wp_get_post_tags($post->ID); //如果存在tag标签，列出tag相关文章
$pos=1;
if($post_tags) {
foreach($post_tags as $tag) $tag_list[] .= $tag->term_id;
$args = array(
'tag__in' => $tag_list,
'category__not_in' => array(NULL), // 不包括的分类ID,可以把NULL换成分类ID
'post__not_in' => array($post->ID),
'showposts' => 0, // 显示相关文章数量
'caller_get_posts' => 1,
'orderby' => 'rand'
);
query_posts($args);
if(have_posts()):while (have_posts()&&$pos<=10) : the_post(); update_post_caches($posts); ?>
<li><span class="title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php if(get_the_title())the_title();else the_time('Y-m-d'); ?></a></span> <span class="meta"><?php the_time('Y-m-d') ?> <?php the_category('/','') ?></span></li>
<?php $pos++;endwhile;wp_reset_query();endif; ?>
<?php } //end of rand by tags ?>
<?php if($pos<=10): //如果tag相关文章少于10篇，那么继续以分类作为相关因素列出相关文章
$cats = wp_get_post_categories($post->ID);
if($cats){
$cat = get_category( $cats[0] );
$first_cat = $cat->cat_ID;
$args = array(
'category__in' => array($first_cat),
'post__not_in' => array($post->ID),
'showposts' => 0,
'caller_get_posts' => 1,
'orderby' => 'rand'
);
query_posts($args);
if(have_posts()): while (have_posts()&&$pos<=10) : the_post(); update_post_caches($posts); ?>
<li><span class="title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute();?>"><?php if(get_the_title())the_title();else the_time('Y-m-d'); ?></a></span> <span class="meta"><?php the_time('Y-m-d');if($options['tags']):the_tags('', '/', '');endif; ?></span></li>
<?php $pos++;endwhile;wp_reset_query();endif; ?>
<?php } endif; //end of rand by category ?>
<?php if($pos<=10){ //如果上面两种相关都还不够10篇文章，再随机挑几篇凑成10篇 ?>
<?php query_posts('showposts=10&orderby=rand');while(have_posts()&&$pos<=10):the_post(); ?>
<li><span class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if(get_the_title())the_title();else the_time('Y-m-d') ?></a></span> <span class="meta">[ <?php the_category('/',''); ?>]</span></li>
<?php $pos++;endwhile;wp_reset_query();?>
<?php } ?>

wordpress相关文章思路讲解

1、相关性：标签（tag）相关+分类（category）相关。

我们采用这种相关方法，因为无法做到向搜索引擎一样检索全文确定相关性，我们只能通过标签、分类来进行判断。而在一般情况下，博客文章相关性也是靠这两者，有些相关文章虽然靠这两者不能被放出，但我们放出的肯定都是相关文章。

2、标签相关文章详解：

我们先用$post_tags=wp_get_post_tags($post->ID);获取文章的标签列表（数组），再通过foreach($post_tags as $tag) $tag_list[] .= $tag->term_id;获取这些标签的ID，并将这些ID组成数组$tag_list。使用函数query_posts();查询这些标签ID下的文章，通过while()显示出来。

3、分类相关文章详解

我们通过获取当前文章所在的分类，将这些分类中的文章挑选一些出来呈现给读者。其原理和上文标签相关文章一样。

4、文章数量的控制

为了让不同的页面在格式上很整齐，我们规定这些相关文章是随机排列的，不是按某项属性顺序或倒序排列，我们使用了'orderby' => 'rand'。

同时为了让文章列表显得完整，我们希望每篇文章后的这些相关文章列表都输出10条。我们的思路是：用一个计数参数，其初始值为0，每显示一篇文章就增加1（$pos++）。当$pos>=10时就不再输出文章。

如果根据标签而列出的文章数已经超过十篇，那么不再执行下面的分类和随机相关，如果不到10篇，则继续执行；当执行完分类相关之后仍然还不到10篇，我们调用一些随机文章，直到满10篇为止。

资料来源：http://www.utubon.com/391

» 转载请注明来源:【壹品下载】 » 《wordpress相关文章代码强力版》

» 本文链接地址:http://dl.epinv.com/post/307.html

» 订阅本站:http://feed.feedsky.com/wepinv

如果你的网站需要缩略图功能，那么可以采用下面的代码

function post_thumbnail(){
	global $post;
	if( has_post_thumbnail() ){//Wordpress自带的 特色图片
		$timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
		$post_timthumb = '<img data-original="'.$timthumb_src[0].'" src="'.get_bloginfo("template_url").'/images/grey.gif" alt="'.$post->post_title.'" class="thumb" />';
	} else {
		$post_timthumb = '';
		ob_start();
		ob_end_clean();
		$output = preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$cnt = count($matches);//采用用$cnt数量来判断, 文章是否有图片
		if($cnt>0){
			$first_img_src = $matches [1];
			$post_timthumb = '<img data-original="'.$first_img_src.'" src="'.get_bloginfo("template_url").'/images/grey.gif" alt="'.$post->post_title.'" class="thumb" />';
		} else {
			$post_timthumb = '<img data-original="'.get_bloginfo("template_url").'/images/default_thumb.jpg" src="'.get_bloginfo("template_url").'/images/grey.gif" alt="'.$post->post_title.'" class="thumb" />';
		}
	}
	echo $post_timthumb;
}

把上述代码放在functions.php 里，然后再用

<?php post_thumbnail() ?>

这样调用即可显示缩略图，同时也完成了缩略图LazyLoad的后台处理，如果你希望你文章中的图片也需要自动LazyLoad处理，那么你还得需要把下面的代码放进functions.php 里

/*LazyLoad后台处理*/

function LazyLoad_img($c) {

    $s = array('/src="(.+?.(jpg|bmp|png|jepg|gif))"/i' => 'data-original="$1" src="'.get_bloginfo("template_url").'/img/grey.gif"');

    foreach($s as $p => $r){

        $c = preg_replace($p,$r,$c);

    }

    return $c;

}

add_filter( 'the_content', 'LazyLoad_img' );

剩下的就是安装LazyLoad的事了。把下面的代码放在header.php中（第一句为加载JQ，如果你的主题已经加载JQ，就不用重复加载了，第二句为加载Lazy Load插件，请注意把它修正为你自己的文件路径）：

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

$(function() {$("img").lazyload();});

</script>

经过如此设置，即可让LazyLoad完美实现实现图片延迟加载功能。

资料来源:http://mufeng.me/lazyload.html

» 转载请注明来源:【壹品下载】 » 《LazyLoad完美实现图片延迟加载方法2》

» 本文链接地址:http://dl.epinv.com/post/305.html

» 订阅本站:http://feed.feedsky.com/wepinv

当初的Lazy Load插件有一大硬伤，如果不修改后台图片src属性，其表面实现了图片的延迟加载，实际上图片还是被下载的客户机上，并没有打到减轻服务器压力的目的。（实际上，在不修改后台代码的情况下，Lazy Load插件新版本仍然没有解决这一问题）那究竟后台代码要怎么处理才能让Lazy Load真正实现图片延迟加载呢？

最简单的方法是，在后台生成的img标签的src属性值设为占位符地址，和图片的实际地址设置到data-original属性上。如下代码

<img src="img/grey.gif" data-original="img/image.jpg"
width="800" height="577"/>

其中img/grey.gif为占位符，img/image.jpg为实际地址。

这个方法固然可以，但一来太麻烦，每次在编辑器里面设置图片的时候都需要单独改img的源代码，其此，在后台的编辑器预览的时候无法看到图片（src地址不是为真实的地址）。下面就给大家分享一种利用ob_start()页面缓冲区实现后台图片自动处理成上面的格式。

以wordpress为例，可以在header.php中的最上面加入以下代码:

<?PHP ob_start();?>

然后在页面footer.php最后加入以下代码：

<?php

//图片延缓加载相关处理，替换src为data-original，并添加占位符

$echo = ob_get_contents(); //获取缓冲区内容

ob_clean(); //清楚缓冲区内容，不输出到页面

$placeholder = "img/grey.gif"; //占位符图片

$preg = "/<img (.*)src(.*) \/>/i"; //匹配图片正则

$replaced = '<img \\1src="'.$placeholder.'" data-original\\2 />';

print preg_replace($preg, $replaced, $echo); //重新写入的缓冲区

ob_end_flush(); //将缓冲区输入到页面，并关闭缓存区

?>

经过这样设置以后，所有的图片地址都被替换了。

然后前台调用的代码为（第一句为加载JQ，如果你的主题已经加载JQ，就不用重复加载了，第二句为加载Lazy Load插件，请注意把它修正为你自己的文件路径）：

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

$(function() {$("img").lazyload();});

</script>

经过如此设置，即可让LazyLoad完美实现实现图片延迟加载功能。

资料来源：http://www.rainleaves.com/html/1248.html

ps：经笔者测试，在大部分情况下，上面的页面缓冲代码是没有问题的，但是如果你的主题采用了timthumb自动缩略图功能，那么就会出现所有的缩略图失效的情况，究其原因可能是由于匹配图片正则那里的书写没有考虑到timthumb缩图这一情况，希望有高手能指点一下该如何处理？

» 转载请注明来源:【壹品下载】 » 《LazyLoad开启页面缓冲完美实现图片延迟加载》

» 本文链接地址:http://dl.epinv.com/post/304.html

» 订阅本站:http://feed.feedsky.com/wepinv

何谓访客足迹？通俗点的来讲就是把访客自己回复过文章展示出来（有点类似购物网站的浏览历史，不过此处是留言历史而已，并且这一系列文章也只有访客自己能看见，可以说是完善访客体验的一个表现），个人认为，这一功能非常有必要在技术型博客上加载，大家也许会遇到这样的情况，有时去某个技术牛人的博客上留言咨询点问题，但是当你过一段时间去再去看看博主是否已经回复时，却发现自己已经不记得是在哪篇文章中留言了。如果该网站加载了访客足迹功能，那要找回你的评论历史文章就很简单了。只要再在该网站评论一次，你的留言足迹就立即显示出来，非常方便。

下图是亿品元素博客的展示效果，本人是把该功能加载在评论框的下面，其实你可以把这一功能加在其他地方，如sidebar.php

下面是亿品元素上使用的wordpress实现访客足迹功能代码，效果如上图

<!-- 访客足迹-->
<?php
if($_COOKIE["comment_author_" . COOKIEHASH]!=""){
//1.如果COOKIE不为空，则输出您的足迹
global $wpdb;//2.读取数据库相关项
$sql = "SELECT DISTINCT ID, post_title,post_password,
comment_ID, comment_post_ID,comment_author,
comment_count,
comment_date_gmt,comment_approved, comment_author_email,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,25)
AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts
ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = ''
AND comment_author = '".$_COOKIE["comment_author_" . COOKIEHASH]."'
AND post_password = ''
GROUP BY comment_post_ID
ORDER BY comment_date_gmt
DESC LIMIT 10";//3.输出10篇文章
$comments = $wpdb->get_results($sql);
foreach ($comments as $comment) {
$output .= "\n<li><a href=\"" .get_permalink($comment->ID)."#comment-".$comment->comment_ID. "\" title=\"" . $comment->post_title ."(". $comment->comment_count."评论)\">" . $comment->post_title . "</a></li>";
}//4.输出最近评论过的文章
$output = '<div class="postList"><h3 style="border-bottom:1px solid #FF6600; color: #FF6600;">'. mb_substr(strip_tags($comment->comment_author),0,12).' 您最近留下的足迹：</h3><ul>'.$output.'</ul></div>';
$output = convert_smilies($output);
echo $output;
}
?>

» 转载请注明来源:【壹品下载】 » 《wordpress实现访客足迹功能》

» 本文链接地址:http://dl.epinv.com/post/302.html

» 订阅本站:http://feed.feedsky.com/wepinv

WordPress显示最新评论的文章列表实现代码：

<?php
/**
* 名称：WordPress显示最近评论的文章列表
* 作者：露兜
* 博客：http://www.ludou.org/
* 最后修改：2010年12月06日
*/
$pop = $wpdb->get_results("SELECT DISTINCT comment_post_ID
FROM $wpdb->comments
WHERE comment_approved = 1
AND comment_post_ID NOT IN
(
SELECT ID FROM $wpdb->posts
WHERE post_type != 'post'
OR post_status != 'publish'
OR post_password != ''
)
ORDER BY comment_date_gmt DESC
LIMIT 10"); ?>
<ul>
<?php foreach($pop as $post) : ?>
<li><a href="<?php echo get_permalink($post->comment_post_ID); ?>"><?php echo get_the_title($post->comment_post_ID); ?></a></li>
<?php endforeach; ?>
</ul>

将以上代码放到主题文件的sidebar.php、single.php等文件的适当位置，即可实现相应的效果。代码中的LIMIT 10为文章数量控制。

如果希望控制文章标题的长度，可以将代码中的：

<?php echo get_the_title($post->comment_post_ID); ?>

改成：

<?php echo mb_strimwidth(get_the_title($post->comment_post_ID),0,32,'..'); ?>

32就是标题的长度，可以自行修改！

如果还不尽兴，还希望显示显示留言的内容？完整代码如下

<?php
$pop = $wpdb->get_results("SELECT DISTINCT comment_post_ID, comment_content
FROM $wpdb->comments
WHERE comment_approved = 1
AND comment_post_ID NOT IN
(
SELECT ID FROM $wpdb->posts
WHERE post_type != 'post'
OR post_status != 'publish'
OR post_password != ''
)
ORDER BY comment_date_gmt DESC
LIMIT 10"); ?>
<ul>
<?php foreach($pop as $post) : ?>
<li>
<div class="new_comment_title">
<a href="<?php echo get_permalink($post->comment_post_ID); ?>"><?php echo get_the_title($post->comment_post_ID); ?></a>
</div>
<div class="new_comment_content">
<p><?php echo $post->comment_content; ?></p>
</div>
</li>
<?php endforeach; ?>
</ul>

具体的css样式大家自己可以定义！

资料来源：http://www.ludou.org/wordpress-post-list-orderby-comment-time.html

» 转载请注明来源:【壹品下载】 » 《WordPress显示最新评论的文章列表》

» 本文链接地址:http://dl.epinv.com/post/300.html

» 订阅本站:http://feed.feedsky.com/wepinv

其实Leverage browser caching设置设置的方法很简单，只要把下面代码写入.htaccess文件即可

#Expire Header
ExpiresActive on //开启缓存
ExpiresByType text/css "access 1 month"//css文件缓存1个月
ExpiresByType text/plain "access 2 days"//纯文本内容缓存2天
ExpiresByType text/html  "access 2 days"//html文件缓存2天
ExpiresByType application/javascript "access 1 month"//JS文件缓存1个月
ExpiresByType image/jpeg "access 1 month"//jpeg图片缓存1个月
ExpiresByType image/x-icon "access 1 month"//icon缓存1个月
ExpiresByType image/gif "access 1 month"//gif图片缓存一个月
ExpiresByType image/png "access 1 month"//png图片缓存一个月
ExpiresByType image/ico "access 1 month"//ico缓存1个月
ExpiresByType application/pdf "access 1 month"//pdf文件缓存一个月
ExpiresByType application/x-shockwave-flash "access 1 month"//flash缓存一个月
ExpiresDefault "access 1 month"// 默认（未提及的可缓存文件）缓存1个月

后边有注释，缓存的保存时间可以自己修改，但是不要改错了。保存重新上传后刷新网页，用Yslow测试可以看到，绝大部分内容都被缓存了。也就是说：读者第一次打开网页加载所有静态文件，以后再访问该页面，就不需要加载了。如果其他页面也使用相同的静态文件（比如js和css），那么访问其他页面也会很快（直接在浏览器的缓存里提取相应的静态内容）

资料来源：http://luckerme.com/archives/712.html

» 转载请注明来源:【壹品下载】 » 《浏览器端缓存:Leverage browser caching设置技巧》

» 本文链接地址:http://dl.epinv.com/post/298.html

» 订阅本站:http://feed.feedsky.com/wepinv