经典WordPress自定义域使用技巧分享

经典WordPress自定义域使用技巧分享。WordPress之所以如此的流行与受人追捧,其中一个重要因素,应该少不了WordPress“自定义域”这个强大的功能吧,自定义域功能用的巧妙,个人认为完全可以把一个博客彻底的改头换面!

利用Wordpress自定义域给文章进行SEO优化

WordPress竟然没有使用Meta描述标签作为预设值。当然,对于seo来说,现在的meta标签已经没有以前那么重要了,然而,尽管如此,它们依然可以提高您的博客在搜索引擎中的排名。

那么,我们又是如何使用自定义字段来创建单篇文章的meta描述的呢?打开文件 header.php。复制下面的代码到 <head> 和 </head>标签内:

<meta name="description" content="
<?php if ( (is_home()) || (is_front_page()) ) {
    echo ('Your main description goes here');
} elseif(is_category()) {
    echo category_description();
} elseif(is_tag()) {
    echo '-tag archive page for this blog' . single_tag_title();
} elseif(is_month()) {
    echo 'archive page for this blog' . the_time('F, Y');
} else {
    echo get_post_meta($post->ID, "Metadescription", true);
}?>">

为了生成meta描述,这里采用的是WordPress 中广泛采用的条件标签来决定哪些用户会访问这个页面。目录页,标签页,存档页及首页,使用的都是静态 meta 描述语。编辑3,7,9行来定义您自己的页面。这样,在文章中,代码会寻找自定义字段 Metadescription,并将其中的值作为 meta 描述语。

利用Wordpress自定义域实现标题跳转外部链接

wordpress正常情况点击文章标题都是打开本身页面的,那如果我们想实现点击文章标题跳转到外部网站呢?用Wordpress自定义域就可以很轻松的解决。上次壹品集曾经给大家分享过一种方法,不过今天这个方法更加巧妙一些。

首先要做的是,打开主题文件functions.php,粘贴下面的代码到里面:

function print_post_title() {
	global $post;
	$thePostID = $post->ID;
	$post_id = get_post($thePostID);
	$title = $post_id->post_title;
	$perm  = get_permalink($post_id);
	$post_keys = array(); $post_val  = array();
	$post_keys = get_post_custom_keys($thePostID);

	if (!empty($post_keys)) {
  	  foreach ($post_keys as $pkey) {
    	    if ($pkey=='url1' || $pkey=='title_url' || $pkey=='url_title') {
      	      $post_val = get_post_custom_values($pkey);
    	    }
  	  }
  	  if (empty($post_val)) {
    	    $link = $perm;
  	  } else {
    	    $link = $post_val[0];
  	  }
	} else {
  	  $link = $perm;
	}
	echo '<h2><a href="'.$link.'" rel="bookmark" title="'.$title.'">'.$title.'</a></h2>';
}

保存之后,再打开index.php文件,找到如下输出部份的标准代码:

<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>

替换为如下这一句:

<?php print_post_title() ?>

好了,当你要将文章标题指向博客之外的文章时,只要创建自定义字段url1或title_url或url_title ,再输入外部URL地址作为值就可以了。完成以上操作后,当你发表一篇文章时,系统会查找字段url1或title_url或url_title的值,如果找到,那么就会直接链接到外部站点而不是本博客文章;如果没有找到自定义字段值,就会简单地显示链接本身。

利用Wordpress自定义域给博客文章添加额外的CSS样式

某些文章有时可能需要加上一些额外的CSS 样式。当然了,你可以选择在WordPress编辑器的html 模式下进行编辑,加入内置CSS样式到文章中。但是,尽管内置样式是有效的,可这并不是最简单的处理方法。如果使用自定义字段的话,我们可以很容易地为某篇文章添加新的CSS类,并自动加载它们到博客的header 中。

方法如下:打开header.php文件 ,然后添加如下的代码到HTML标签<head>和</head>之间:

<?php if (is_single()) {
    $css = get_post_meta($post->ID, 'css', true);
    if (!empty($css)) { ?>
        <style type="text/css">
        <?php echo $css; ?>
        <style>
    <?php }
} ?>

在你撰写文章时自定义一个字段CSS,再为它赋予样式代码作为值即可。

利用Wordpress自定义域重新定义<title>标签

wordpress默认主题并没有对标签<title>做过优化。许多博主都是通过使用插件All in One SEO Pack来实现<title>的优化的,但是我们仍然可以通过自定义字段来解决此问题。

打开header.php文件,找到<title>标签,并将其替换为下面的代码:

<title>
<?php if (is_home () ) {
    bloginfo('name');
} elseif ( is_category() ) {
    single_cat_title(); echo ' - ' ; bloginfo('name');
} elseif (is_single() ) {
    $customField = get_post_custom_values("title");
    if (isset($customField[0])) {
        echo $customField[0];
    } else {
        single_post_title();
    }
} elseif (is_page() ) {
    bloginfo('name'); echo ': '; single_post_title();
} else {
    wp_title('',true);
} ?>
</title>

之后,在你想自定义title标签时,只要创建一个自定义字段title,为它赋值就OK了。

这段代码使用不同模板标签分别为首页, 分页, 目录页及博客文章各生成一个自定义的<title> 。如果当前页面是一篇博客文章,代码会寻找自定义字段title。如果找到了,就会显示自定义字段中的值,反之,显示标准的single_post_title() 生成的标题。

利用Wordpress自定义域禁止搜索引擎索引博客文章

如果我们平时写作一些博客文章只是想给特定的读者阅读,而并不希望被搜索引擎抓取,可以通过自定义字段来实现。 首先,获取你不想被搜索引擎索引的文章的ID号。下面我们以ID为17的为例。

打开主题header.php文件,粘贴下面的代码到标签 <head>和</head>之间:

<?php $cf = get_post_meta($post->ID, 'noindex', true);
    if (!empty($cf)) {
    echo '<meta name="robots" content="noindex"/>';
}
?>

在这个例子中,使用了get_post_meta()的方法来检索自定义字段noindex,如果它的值设置为17,那么将添加noindex(不索引)的标记 。

利用Wordpress自定义域设定文章显示时间期限

你有时候发表一篇文章,可能需要在某个时间里停止显示它?这听起来似乎有些难度,但是Wordpress的自定义域却可以做到这一点。我们可以这样做,编辑当前主题中的loop循环,使用下面的代码替换原来的loop:

<?php
if (have_posts()) :
     while (have_posts()) : the_post(); ?>
         $expirationtime = get_post_custom_values('expiration');
         if (is_array($expirationtime)) {
             $expirestring = implode($expirationtime);
         }

         $secondsbetween = strtotime($expirestring)-time();
         if ( $secondsbetween > 0 ) {
             // For example...
             the_title();
             the_excerpt();
         }
     endwhile;
endif;
?>

创建一篇文章在一个预定的时间或日期之后过期,您所需要做的仅仅是自定义一个字段。指定一个关键字expiration作为日期及时间标识,其格式必须为 mm/dd/yyyy 00:00:00。过了这个时间,这篇文章就不再显示了。这段代码很简单, WordPress循环会自动查询是否存在自定义字段expiration,如果存在,则对比自定义时间与当前的时间。

利用Wordpress自定义域设置文章在首页的显示方式

我们可以让文章在首页显示为全文,或仅显示摘要,通过自定义域就能够做到这一点。在主题的index.php文件中找到loop循环,然后用下面的代码来替换:

<?php if (have_posts()) :
    while (have_posts()) : the_post();
         $customField = get_post_custom_values("full");
       	 if (isset($customField[0])) {
              //Custom field is set, display a full post
              the_title();
              the_content();
         } else {
              // No custom field set, let's display an excerpt
              the_title();
              the_excerpt();
    endwhile;
endif;
?>

这段代码默认将文章显示为摘要,如果要将文章显示为全文的形式,就在自定义域中设定一个字段full,然后给它赋予一个任意值,文章就会在首页以全文形式显示出来。

利用Wordpress自定义域显示心情以及当前收听的歌曲

利用自定义域可以让Wordpress用户来设置显示他们在撰写博客时的心情及正在收听的音乐。打开主题文件single.php (或者index.php文件 ), 将下面的代码粘贴到您想要显示心情和音乐的任意一个loop循环中:

$customField = get_post_custom_values("mood");
if (isset($customField[0])) {
    echo "Mood: ".$customField[0];
}

在写文章时,在自定义域设定一个字段mood,将它的值设置为你的心情. 这跟在首页的文章摘要旁显示缩略图的方法没有多大区别。

用自定义函数轻松获取或打印自定义字段值

获得任何自定义字段值的方法其实也很简单。将下面的代码粘贴到主题文件functions.php中(如果你的主题没有这个文件,那么创建一个!)。

function get_custom_field_value($szKey, $bPrint = false) {
	global $post;
	$szValue = get_post_meta($post->ID, $szKey, true);
	if ( $bPrint == false ) return $szValue; else echo $szValue;
}

然后使用下面的代码来调用:

<?php if ( function_exists('get_custom_field_value') ){
        get_custom_field_value('featured_image', true);
} ?>

代码分析:首先,我们使用PHP函数 function_exists()来判断是否存在get_custom_field_value,如果存在,我们就可以使用。第一个参数是自定义字段名称 (这里是featured_image),第二个参数是允许您直接输出的值 (true), 或者写成false以作其它更深一层的PHP之用。

利用Wordpress自定义域根据需要为博客文章添加Digg按钮

要使你的文章从Digg.com获得更多点击量的最好的方法是将“Digg this”按钮添加到您的每一篇文章中,这样读者就可以协助您成功发布这篇文章。

我们还是利用自定义字段来完成,只要按照以下步骤即可实现:

1). 打开主题中的single.php文件,将下面的代码粘贴到你想要显示“Digg this”按钮的地方:

<?php $cf = get_post_meta($post->ID, 'digg', true);
  if (!emptyempty($cf)) {
  echo 'http://digg.com/tools/diggthis.js" type="text/javascript">'} ?>

2). 保存了文件single.php后,你就可以创建自定义字段digg了,然后给它赋予一个任意的值。如果赋值,按钮就会显示在文章中了。代码运行后如果找到自定义字段digg,则显示“Digg this” 按钮。Digg本身提供了用户用以显示“Digg this” 按钮的JavaScript。

通过自定义字段显示文章缩略图

首先用图像处理工具Photoshop或Gimp制作一张要默认显示的image,格式大小以本例中的200×200像素为例,然后将其命名为default.gif,并上传到主题的images目录下。

打开index.php文件,在里面你想要显示缩略图的地方粘贴以下代码:

<?php $postimageurl = get_post_meta($post->ID, 'post-img', true);
if ($postimageurl) {
?>
      <a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="200" height="200" /></a>
<?php } else { ?>
      <a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/images/wprecipes.gif" alt="Screenshot" width="200" height="200" /></a>
<?php } ?>

保存文件. 之后,在你撰写文章时自定义一个字段为post-img,并为它赋予一个图片url作为值,文章发表时就会显示缩略图了。

利用Wordpress自定义域给某篇文章添加js或者CSS

如果我们要给博客文章单独加载JS、CSS,那么将下面这段代码复制到你主题根目录下的functions.php 文件中:

function head_JS_CSS(){
if (is_single() || is_page()) {
global $post;
$head_JS_CSS = get_post_meta($post->ID, 'head_JS_CSS', true);
echo $head_JS_CSS;
}
}
add_action("wp_head","head_JS_CSS");

写作文章时,在WordPress自定义区域处创建自定义字段为:head_JS_CSS,为它赋予你想要的Javascript或CSS代码作为值即可。

利用Wordpress自定义域给加密的文章添加密码提示信息

将以下代码粘贴到主题的functions.php文件中:

function password_hint( $c ){
global $post, $user_ID, $user_identity;
if ( empty($post->post_password) )
return $c;
if ( isset($_COOKIE['wp-postpass_'.COOKIEHASH]) && stripslashes($_COOKIE['wp-postpass_'.COOKIEHASH]) == $post->post_password )
return $c;
//替换
if($hint = get_post_meta($post->ID, 'password_hint', true)){
$url = get_option('siteurl').'/wp-pass.php';
if($hint)
$hint = '密码提示:'.$hint;
else
$hint = "请输入您的密码";
if($user_ID)
$hint .= sprintf('欢迎进入,您的密码是:', $user_identity, $post->post_password);
$out = <<<END
<form method="post" action="$url">
<p>这是一篇受密码保护的文章,请输入密码后再继续阅读:</p>
<div>
<label>$hint<br/>
<input type="password" name="post_password"/></label>
<input type="submit" value="Submit" name="Submit"/>
</div>
</form>
END;
return $out;
}else{
return $c;
}
}
add_filter('the_content', 'password_hint');

写作文章时自定义一个字段为password_hint,赋予其一个任意值作为密码提示信息,如:某某人的生日是几号?

一个自定义字段赋予多个值的使用方法

将下面的代码复制到主题目录的functions.php文件中:

function article_source() {
global $post;
$article_source = get_post_meta($post->ID, article_source,false);
if($article_source) {
foreach ($article_source as $article_sources){
$fullValue = explode ("|", $article_sources);
$name = $fullValue[0];
$address = $fullValue[1];
}
echo '译文来源:<a href="'.$address.'" target="_blank">'.$name.'</a>,';
}
else {
echo '本站原创';
}
}

在撰写文章时,如果是译文,则为其添加一个名称为 article_source 的自定义字域,并赋予其两个值,格式为“网站名|文章地址”。原创的文章则不添加这个自定义域。

WordPress图片相关日志(免插件版)

免插件实现WordPress图片相关文章。要实现WordPress图片相关文章,首先的的开启wordpress自带的缩略图功能。

1.开启 WordPress隐藏的缩略图功能(WordPress 2.9版本以后才支持),在 funtions.php 中加入以下代码:

if(function_exists(‘add_theme_support’)){ //确保 WordPress 2.9 且支持缩略图的函数
add_theme_support();
add_theme_support(‘post-thumbnails’, array(‘post’));
}

这时在编辑日志时,可以看到右栏的下方多了一个模块,“文章缩略图”,这里就可以上传、设置、编辑缩略图。

2.接下来就是把缩略图和相关日志结合起来。完整WordPress图片相关日志免插件版代码如下:

function wp_get_related_posts()
{
global $wpdb, $post,$table_prefix;
$limit = 6; //显示几条相关文章
if(!$post->ID){return;}
$now = current_time(‘mysql’, 1);
$tags = wp_get_post_tags($post->ID);
$taglist = "’" . $tags[0]->term_id. "’";
$tagcount = count($tags);
if ($tagcount > 1) {
for ($i = 1; $i < $tagcount; $i++) {
$taglist = $taglist . ", ‘" . $tags[$i]->term_id . "’";
}
}
$limitclause = "LIMIT $limit";
$q = "SELECT p.ID, p.post_title, p.post_date,  p.comment_count, count(t_r.object_id) as cnt FROM $wpdb->term_taxonomy t_t, $wpdb->term_relationships t_r, $wpdb->posts p WHERE t_t.taxonomy =’post_tag’ AND t_t.term_taxonomy_id = t_r.term_taxonomy_id AND t_r.object_id  = p.ID AND (t_t.term_id IN ($taglist)) AND p.ID != $post->ID AND p.post_status = ‘publish’ AND p.post_date_gmt < ‘$now’ GROUP BY t_r.object_id ORDER BY cnt DESC, p.post_date_gmt DESC $limitclause;";
$related_posts = $wpdb->get_results($q);
$output = "";
if (!$related_posts)
{
$output .= ‘<li>无相关日志</li>’;
}
foreach ($related_posts as $related_post )
{
if ( has_post_thumbnail($related_post->ID) ) {
$related_thumb = get_the_post_thumbnail($related_post->ID,array(50,50),array(‘class’=>’relatedimg’));
} else {
$related_thumb = ‘<img class="relatedimg" src="http://wange.im/images/adforsale.gif" />’;//无缩略图时显示默认图片
}
$dateformat = get_option(‘date_format’);
$output .= ‘<li>’.$related_thumb;
$output .= ‘<a href="’.get_permalink($related_post->ID).’" title="’.wptexturize($related_post->post_title).’ (‘.mysql2date($dateformat, $related_post->post_date).’)">’.wptexturize($related_post->post_title).'</a> (‘. $related_post->comment_count .’)’;
$output .= ‘</li>’;
}
$output = ‘<div><h3>相关日志</h3><ul>’ . $output . ‘</ul></div>’;
return $output;
}
function wp_related_posts_attach($content)
{
if (is_single()||is_feed())
{
$output = wp_get_related_posts();
$content = $content . $output;
}
return $content;
}
add_filter(‘the_content’, ‘wp_related_posts_attach’,100);

把上述代码放在functions.php 中,然后在有需要的地方调用即可。

利用timthumb实现WordPress全自动日志缩略图功能

利用timthumb.php实现WordPress全自动日志缩略图功能。timthumb.php这是一个专门为 WordPress 而开发的缩略图应用的项目。有点类似于插件,但是又和 WordPress 插件不同,因为它不是被上传于 plugins 文件夹下,而是需要上传到你的主题文件夹中。你可以在这里了解和下载最新版本的 timthumb.php,一般默认配置也就可以了,如果想进一步优化可以根据需要修改 timthumb.php 里前30行的参数

默认情况下timthumb.php是不支持外链图片的,需要修改一下timthumb.php的参数实现支持外链图片

define (‘ALLOW_EXTERNAL’, TRUE);

下面就是结合了 timthumb.php 和 WordPress 自带的缩略图功能,支持站外链接图片,自动缓存图片的可以全自动日志缩略图功能的代码。代码如下:

function post_thumbnail( $width = 100,$height = 80 ){
    global $post;
    if( has_post_thumbnail() ){ //有缩略图,则显示缩略图
        $timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),’full’);
        $post_timthumb = ‘<img src="’.get_bloginfo("template_url").’/timthumb.php?src=’.$timthumb_src[0].’&amp;h=’.$height.’&amp;w=’.$width.’&amp;zc=1" alt="’.$post->post_title.’" class="thumb" />’;
        echo $post_timthumb;
        } else{
    if ($postid<1)
    $postid = get_the_ID();
    $image = get_post_meta($postid, "image", TRUE); // 调用自定义域图片
    $post_timthumb = ‘<img src="’.get_bloginfo("template_url").’/timthumb.php?src=’.$image.’&amp;h=’.$height.’&amp;w=’.$width.’&amp;zc=1" alt="’.$post->post_title.’" class="thumb" />’;
    if ($image != null or $image != ”) {
        echo $post_timthumb;
        } else {
        $post_timthumb = ”;
        ob_start();
        ob_end_clean();
        $output = preg_match(‘/<img.+src=[\’"]([^\’"]+)[\’"].*>/i’, $post->post_content, $index_matches);    //获取日志中第一张图片
        $first_img_src = $index_matches [1];    //获取该图片 src
        if( !empty($first_img_src) ){    //如果日志中有图片
            $path_parts = pathinfo($first_img_src);    //获取图片 src 信息
            $first_img_name = $path_parts["basename"];    //获取图片名
            $first_img_pic = get_bloginfo(‘wpurl’). ‘/cache/’.$first_img_name;    //文件所在地址
            $first_img_file = ABSPATH. ‘cache/’.$first_img_name;    //保存地址
            $expired = 604800;    //过期时间
            if ( !is_file($first_img_file) || (time() – filemtime($first_img_file)) > $expired ){
                copy($first_img_src, $first_img_file);    //远程获取图片保存于本地
                $post_timthumb = ‘<img src="’.$first_img_src.’" alt="’.$post->post_title.’" class="thumb" />’;    //保存时用原图显示
            }
            $post_timthumb = ‘<img src="’.get_bloginfo("template_url").’/timthumb.php?src=’.$first_img_pic.’&amp;h=’.$height.’&amp;w=’.$width.’&amp;zc=1" alt="’.$post->post_title.’" class="thumb" />’;
        } else {    //如果日志中没有图片,则显示默认
            $post_timthumb = ‘<img src="’.get_bloginfo("template_url").’/images/default.gif" alt="’.$post->post_title.’" class="thumb" />’;
        }
        echo $post_timthumb;
    }
}}

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

<?php post_thumbnail( 100,100 ) ?>

这样调用即可,其中的 $width 和 $height 是必须的参数。上述代码意思是如果文章有wordpress自带缩略图,则调用自带缩略图,没有的话则调用自定义域“image”图片作为缩略图,再没有的话就自动截取文章第一张图做为缩略图,如果连图片都没有的话,那就显示一张默认图片。

代码来自http://wange.im/timthumb-for-wordpress.html

再更新一份也不错的可以实现相同功能的代码

function dm_the_thumbnail() {
global $post;
$content = $post->post_content;
// $soImages = ‘~<img [^>]* />~’;
preg_match_all(‘/<img.*?(?: |\\t|\\r|\\n)?src=[\’"]?(.+?)[\’"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim’, $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
$m = substr_count($strResult[1][0], ‘timthumb.php’); //判断图片是否已经用timthumb显示
if ($n > 0){ // 如果文章内包含有图片,就用第一张图片做为缩略图
if ($m ==1 ) {
echo ‘<a href="’.get_permalink().’" title="阅读全文"><img class="alignleft" src="’.preg_replace("/&h.*zc=1/","",$strResult[1][0]).’&amp;h=140&amp;w=140&amp;zc=1" alt="缩略图" /></a>’;
} else { //如果没有timthumb则补充
echo ‘<a href="’.get_permalink().’" title="阅读全文"><img class="alignleft" src="’.get_bloginfo(‘template_url’).’/timthumb.php?src=’.$strResult[1][0].’&amp;h=140&amp;w=140&amp;zc=1" alt="缩略图" /></a>’;
}
}
else { // 如果文章内没有图片,则用默认的图片
echo ‘<a href="’.get_permalink().’" title="阅读全文"><img class="alignleft" src="’.get_bloginfo(‘template_url’).’/images/timthumb.gif" alt="缩略图" /></a>’;
}
}

代码来自http://www.zhanggang.net/y2011/39304.html

wordpress实现点击日志标题跳转到外部链接

wordpress实现点击文章标题跳转外部链接的方法,有时候出于某些目的的需要,需要在wordpress博客中实现点击文章标题不直接跳转转到文章页面,而跳转到外部链接的效果。不过WordPress 默认只能发布站内文章,即无法将日志标题重定向到外部链接。但天无绝人之路,好在WordPress 附带强大的自定义字段功能,稍加修改,即可方便实现wordpress文章标题的外链。

一般情况下,WordPress 模板中,输出文章标题链接的代码如下:

<h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

与此,如果为该语句增加判断是否有某个自定义字段,即可实现不同的链接指向。

<?php
$id = intval($post->ID);
$link_to = $wpdb->get_var("SELECT meta_value FROM wp_postmeta WHERE meta_key = 'linkto' and post_id = $id");
?>
<?php if ($link_to) : ?>
<h1 id="post-<?php the_ID(); ?>"><a href="<?php echo $link_to; ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<?php else : ?>
<h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>

从以上代码可见,程序首先检测相应 ID 所对应文章的自定义字段,如果为 “linkto” 的话,将固定连接输出为自定义字段值。撰写日志时,我们只要为该日志添加一个名为 “linkto” 的自定义字段,字段值为所需指向的外部链接地址即可实现点击wordpress文章标题的跳转到外部链接的效果。

jquery滑动门在wordpress的简单运用

jquery滑动门在wordpress的简单运用。代码来自网络,收集备忘。

首先上php代码。
<div ID="moreposts" class="radius">
		<div ID="tab">
			<div ID="tabContentA">
                  <ul><?php some_posts( $orderby = 'date', $plusmsg = 'post_date', 10 );?></ul>
			</div>
			<div ID="tabContentB">
                   <ul><?php some_posts( $orderby = 'comment_count', $plusmsg = 'commentcount', 10 );?></ul>
			</div>
			<div ID="tabContentC">
                   <ul><?php some_posts( $orderby = 'rand', $plusmsg = 'post_date', 10 );?></ul>
			</div>
		</div>
		<div ID="switcher">
			<ul>
				<li ID="switcherA">最新的</li>
				<li ID="switcherB">热评的</li>
				<li ID="switcherC">随机的</li>
			</ul>
			<img width="11" height="7" src="<?php bloginfo('template_url'); ?>/images/switcher.gif">
		</div>
	</div>

到这里很容易看出基本思路,三个列表的hover事件控制着三个内容div层的交替显示,再加点jquery自带的显示效果就行了。

然后是jquery代码
$(document).ready(function(){
$("li#switcherA").hover(function(){
	//停止图片动画
	$("#switcher img").stop(true,true);
		//animate执行css属性集的自行以动画
		//下面一句代码的意思就是将三角形图片移到父级元素left=54px处。
		$("#switcher img").animate({left:"54px"},250);
		//A内容层淡入
		$("#tabContentA").fadeIn("slow");
		//B内容层淡出
		$("#tabContentB").fadeOut("fast");
		//C内容层淡出
		$("#tabContentC").fadeOut("fast")
	});
	$("li#switcherB").hover(function(){
		$("#switcher img").stop(true,true);
		$("#switcher img").animate({left:"150px"},250);
		$("#tabContentA").fadeOut("fast");
		$("#tabContentB").fadeIn("slow");
		$("#tabContentC").fadeOut("fast")
	});
	$("li#switcherC").hover(function(){
		$("#switcher img").stop(true,true);
		$("#switcher img").animate({left:"246px"},250);
		$("#tabContentA").fadeOut("fast");
		$("#tabContentB").fadeOut("fast");
		$("#tabContentC").fadeIn("slow")
	});
});

无非就是用到了juery封装好的animate,stop,fadeIn,fadeOut四个函数来实现动画效果,代码加了注释,应该非常容易理解。

另外,在木木同学那里看到了精简版的js实现同样的效果,主要是用了jquery的index函数,个人觉得精简不代表有效率,index()进行搜索的过程当然是要耗时的,不过这种写法比较灵活。

$(document).ready(function(){
	$("#switcher li").hover(function () {
		var i=$('#switcher li').index(this),l=i*96+75;
		$("#switcher span").stop(true,true).animate({left:l},250);
		$("#tab").children().eq(i).fadeIn("slow").siblings().fadeOut("fast")
	});
});
最后是关键的CSS布局代码
/*滑动*/
#moreposts {
	width: 308px;
	height: 280px;
	float: right;
	border: 1px solid #C8C8C8;
	position: relative;
	color: #646464;
	margin-bottom:5px;
	background-color: #F6F6F6;
}
#tab{
	height:240px;
	padding-left:10px;
	padding-top:10px;
	padding-right:10px;
	padding-bottom:10px;
	overflow:hidden;
}
#tab div{
	height:260px;
	overflow:hidden;
}
#tab ul li{
	width:280px;
	line-height:18px;
	text-align:right;
	font:12px SimSun;
	margin-bottom:4px;
}
#tab ul li a{
	width:200px;
	height:18px;
	float:left;
	text-align:left;
	overflow:hidden;
}
#tabContentB,#tabContentC{
	/* 非首块内容区域默认不显示 */
	display:none;
}
#switcher ul{
	width:288px;
	position:absolute;
	border-top:1px solid #646464;
	bottom:2px;
	padding-top:11px;
	margin:0 10px;
	font-size:1.2em;
	display: block;
}
#switcher ul li{
	width:96px;
	line-height:17px;
	text-align:center;
	float:left;
	cursor:pointer;
}
#switcher img {
	position: absolute;
	bottom: 39px;
	left: 54px;
}
.radius{
	border-radius:5px;
}

css要注意的地方狠多了:

  • 滑动区域的总宽度不能超过侧边栏宽度310,所以定义了moreposts的宽度为308,再加上边框1*2px,正好等于310px;
  • 三个内容层的高度一定要占满他们父层tab的高度,否则在动画切换的过程中,会出现两个层错乱的情况,道理很简单,如果内容层小于其外层容器,那么被隐藏的第二个内容层在渐渐显示(而且是移动的)的时候就会被看到,加上第一个内容层还没有退去,就会显得凌乱。
  • 最后就是下面的移动图片,自己好好计算一下相对位置就行了,img的bottom:39基本等于li的行高17+li的magin-bottom10+ul的bottom2+ul的padding-top: 11;

原文:http://www.loststop.com/archive/soft-and-internet/3457.html

实用WordPress的.htaccess技巧分享

把一些老的链接转到新的链接上——搜索引擎优化SEO

Redirect 301 /d/file.html http://www.htaccesselite.com/r/file.html

阻止目录浏览

# disable directory browsing
Options All -Indexes

重定向WordPress的RSS Feed链接地址到Feedburner地址:
除了修改WP的模板文件来定制其输出的RSS Feed链接地址外,还可以使用.htaccess文件来进行设置(替换yourrssfeedlink为自己的Feedburner地址)。

# temp redirect wordpress content feeds to feedburner

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds2.feedburner.com/catswhocode [R=302,NC,L]
</IfModule>

去除WordPress分类链接中的“/category/”:
默认情况下,WordPress的分类链接显示的样式为:

http://eoinv.com/blog/category/tech

其实其中的category部分没有任何意义,如果想去掉它可以修改.htaccess文件(替换yourblog为自己的网址)。

RewriteRule ^category/(.+)$ http://www.yourblog.com/$1 [R=301,L]

使用浏览器缓存:
可以修改.htaccess文件让访问者使用浏览器缓存来优化其访问速度。

FileETag MTime Size

<ifmodule mod_expires.c>

  <filesmatch ".(jpg|gif|png|css|js)$">

       ExpiresActive on

       ExpiresDefault "access plus 1 year"

   </filesmatch>

</ifmodule>

压缩静态数据
可以修改.htaccess文件来压缩需要访问的数据(传输后在访问端解压),从而可以减少访问流量和载入时间。

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

重定向日期格式的WP Permalink链接地址为Postname格式:
如果你目前的Permalink地址为/%year%/%monthnum%/%day%/%postname%/ 的格式,那么我强烈推荐你直接使用/%postname%/ ,这样对搜索引擎要舒服得多。首先你需要在WordPress的后台设置输出的Permalinks格式为/%postname%/ 。然后修改.htaccess文件来重定向旧的链接,不然别人以前收藏你的网址都会转成404哦!(替换yourdomain为自己的网址)

RedirectMatch 301 /([0-9]+)/([0-9]+)/([0-9]+)/(.*)$ http://www.yourdomain.com/$4

阻止没有referrer来源链接的垃圾评论:

设置.htaccess文件可以阻止大多数无Refferrer来源的垃圾评论机器人Bot Spammer。其会查询访问你网站的来源链接,然后阻止其通过wp-comments-post.php来进行垃圾评论。

RewriteEngine On

RewriteCond %{REQUEST_METHOD} POST

RewriteCond %{REQUEST_URI} .wp-comments-post.php*

RewriteCond %{HTTP_REFERER} !.*yourblog.com.* [OR]

RewriteCond %{HTTP_USER_AGENT} ^$

RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

定制访问者跳转到维护页面:
当你进行网站升级,模板修改调试等操作时,最好让访问者临时跳转到一个声明的维护页面(和404错误页面不同),来通知网站暂时无法访问,而不是留下一片空白或者什么http bad错误。(替换maintenance.html为自己定制的维护页面网址,替换123.123.123.123为自己目前的IP地址,不然你自己访问也跳转哦)

RewriteEngine on

RewriteCond %{REQUEST_URI} !/maintenance.html$

RewriteCond %{REMOTE_ADDR} !^123.123.123.123

RewriteRule $ /maintenance.html [R=302,L]

设置你的WordPress图片和文件防盗链:
盗链是指其它网站直接使用你自己网站内的资源,从而浪费网站的流量和带宽,比如图片,上传的音乐,电影等文件。(替换mysite为自己的网址和/images/notlink.jpg为自己定制的防盗链声明图片)

RewriteEngine On

#Replace ?mysite.com/ with your blog url

RewriteCond %{HTTP_REFERER} !^http://(.+.)?mysite.com/ [NC]

RewriteCond %{HTTP_REFERER} !^$

#Replace /images/nohotlink.jpg with your "don’t hotlink" image url

RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

只允许自己的IP访问wp-admin:
如果你不是团队合作Blog,最好设置只有自己能够访问WP的后台。前提是你的IP不是像我一样动态的哦。(替换xx.xx.xx.xx为自己的IP地址)

AuthUserFile /dev/null

AuthGroupFile /dev/null

AuthName "Example Access Control"

AuthType Basic

<LIMIT GET>

order deny,allow

deny from all

allow from xx.xx.xx.xx

</LIMIT>

阻止指定IP的访问:
如果你想要阻止指定IP的访问,来防止其垃圾评论,那么你可以创建自己的Backlist黑名单。(替换xx.xx.xx.xx为指定的IP地址)

<Limit GET POST>

order allow,deny

deny from xx.xx.xx.xx

allow from all

</Limit>