站趣-分享建站的乐趣主题开发

高亮 WordPress 搜索结果 JQuery 篇

辐射鱼 — Sun, 12 Apr 2009 01:24:43 +0000

我曾在站趣-分享建站的乐趣提过如何高亮 WordPress 搜索关键词，可这个方法有一个缺陷，那就是只有当文章标题里有搜索关键词时才会高亮，换句话说，如果关键词出现在正文中，就并不会高亮显示。那么，有什么方法能在文章标题和正文高亮显示搜索关键词呢？当然有，那就是 JQuery。

首先，编辑主题 functions.php 文件，加入以下代码

function wps_set_query() {
  $query  = attribute_escape(get_search_query());
 
  if(strlen($query) > 0){
    echo '
      
    ';
  }
}
 
function wps_init_jquery() {
  wp_enqueue_script('jquery');
}
 
add_action('init', 'wps_init_jquery');
add_action('wp_print_scripts', 'wps_set_query');

编辑主题 header.php 文件，加入以下代码：

<style type="text/css" media="screen">
    .wps { background: #D3E18A; }
  style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, class){
      var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "\""+ class +"\">" + c + "";
      }));
    }
  });
  jQuery(document).ready(function($){
    $("#post-area").highlight(wps_query, 1, "wps");
  });

代码注释：
① 你可将 css 写入 style.css 中；
② 需将 post-area 修改为你所用主题的搜索结果所在 div；
③ 该段代码应放在标签之前。

如何，本篇 WordPress 教程不复杂吧？！

使用 get_avatar 为 WP 自定义 Gravatar 默认头像

辐射鱼 — Thu, 12 Mar 2009 15:09:45 +0000

在上一篇文章中我们谈到如何在 WordPress 中添加 Gravatar 默认头像，经雪深提醒，我翻了翻 codex，发现还可以用 get_avatar 函数指定默认 Gravatar 头像。
get_avatar 是 WordPress2.5 新增的一个函数，所以此方法只适用于 WordPress2.5 及以上版本，其基本用法如下：

1
2
3

 
   echo get_avatar( $id_or_email, $size = '96', $default = '' ); 
?>

id_or_email：必备参数，可以是一个 User ID（字符串），一个 email 地址，或是一个评论对象。Note:在绝大多数 WordPress 主题中，我们可以将 id_or_email 赋值为 $comment 或 get_comment_author_email()，用以显示评论者 Gravatar 头像，另外，我们也可以使用 get_the_author_id() 显示文章作者 Gravatar 头像。
size：可选参数，定义 Gravatar 头像大小，最大尺寸为512px，默认为96×96
default：可选参数，用以自定义 Gravatar 默认头像地址
如果您还在使用 WordPress2.5 以下版本，那么得做如下 hack：

   if (function_exists('get_avatar')) {
      echo get_avatar($email);
   } else {
      //alternate gravatar code for < 2.5
      $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=
         " . md5($email) . "&default=" . urlencode($default) . "&size=" . $size;
      echo "$grav_url'/>";
   }

好了，使用 get_avatar 函数为 WordPress 自定义 Gravatar 默认头像就介绍到这里。正所谓条条道路通罗马，您喜欢哪个方法呢？如果您有任何关于 WordPress 的小技巧，欢迎和站趣一起分享。

如何在 WordPress 中添加 Gravatar 默认头像

辐射鱼 — Wed, 11 Mar 2009 16:10:21 +0000

我们知道 WordPress 会自动匹配评论者/留言者的 email 并据此显示其 Gravatar 头像，但对于仍未使用 Gravatar 头像的评论者/留言者，便只显示丑丑的默认头像。你是不是和辐射鱼一样，早看这几个丑丑的默认头像不顺眼了呢？别担心，强大的 WordPress 已经为我们考虑到了这个问题，我们只需用 WordPress filter action 替换 avatar_defaults，即可新增一个图片作为默认头像，效果图如下：

add_filter() 过滤器函数使用释疑：
我们使用 WordPress 函数时，可以通过 add_filter() 过滤器钩子添加你的新过滤器。使用方法：

add_filter(’hook_name’, ‘your_filter’, [priority], [accepted_args]);

hook_name：WordPress 提供的过滤器钩子，即你要 hack 的函数；
your_filter：你为 hook_name 定义的新函数名，它可以是一个 php 自带函数,一个 WordPress 核心函数,或是一个你的自定义函数；
priority：这是一个整型的可选参数，它用来指定为一个过滤器钩子应用过滤器的顺序，其默认值为10，一个拥有优先级为 1 的过滤器将会比拥有优先级为 2 的先被应用，数字越小，其优先级将越高；
accepted_args：这也是一个整型的可选参数，用以定义你的函数能接收多少个参数，默认值为 1。
下面，开始我们的小手术吧！！！
在主题 functions.php 文件中自定义 Gravatar 默认头像：

// add default gravatar
add_filter( 'avatar_defaults', 'newgravatar' );
 
function newgravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/boy.jpg';
    $avatar_defaults[$myavatar] = "eachSite";
    return $avatar_defaults;
}

使用方法：

复制以上代码到主题 functions.php 文件中
上传 boy.jpg 文件到 wp-content/themes/yourusingtheme/images/ 目录

update:经雪深提醒，新增使用 get_avatar 为 WP 自定义 Gravatar 默认头像
另外：使用 WordPress2.7 的同学，最好使用 add_filter() 为 WordPress 添加 Gravatar 默认头像！！！
怎么样，对这篇 WordPress 教程感兴趣吧？

WordPress CMS 主题技巧：显示 WordPress 分类图片

辐射鱼 — Wed, 18 Feb 2009 16:21:46 +0000

在看了上一篇 WordPress CMS 技巧：按照分类调用最新文章之后，你是不是觉得能为分类添加图片就更完美呢？
我们知道，WordPress 暂时还不支持为分类添加图片，但这难不倒我们众多的 WordPress 爱好者，我们稍微 DIY 一下 WordPress 主题，一个山寨 WordPress 分类图标就出来了。
思路：我们知道，get the category 可以获取 cat_ID（分类 ID）、cat_name（分类名）、category_nicename（分类缩略名）、category_description（分类描述）、category_parent（分类层级）以及 category_count 等信息，那么，我们就可以用 category_nicename 命名图片，然后匹配并输出。可能有点拗口，看下代码吧，很简单：

Posted in:
 foreach((get_the_category()) as $cat)
	{
	$catname =$cat->category_nicename;
	echo "\"/category/";
	echo $catname;
	echo "/\">";
	echo "\"/wp-content/cat-icons/";
	echo $catname;
	echo ".png\" alt=\"$catname category image\" border=\"0\" />\n";
	}
?>

代码很简单，就是查询日志所在分类及其缩略名，然后自动在 cat-icons 目录匹配 category_nicename.png，然后输出。当然，你可以更改.png为任何图片格式。
怎么样，很简单吧？！如果你有什么 idea，欢迎来站趣-分享建站的乐趣讨论。

WordPress CMS 技巧：按照分类调用最新文章

辐射鱼 — Mon, 16 Feb 2009 16:30:59 +0000

我们知道，许多 WordPress Magazine/News/CMS 主题最吸引人的地方就是在首页按分类摘要显示或列标题显示最新文章。今天，站趣-分享建站的乐趣和大家一起学习这个 WordPress CMS 技巧：按照分类调用最新文章。我们可以将其用在博客首页、404页面、甚至任意存档页面。
下面，我们将以 WordPress 默认主题为例，详细介绍如何按照分类调用最新文章。

首先，建立一个简单的分类存档页面模板

我们希望代码能被多次利用，所以我们选择页面模板这种方式，使其不但可以用在首页，还可以用在404页面或其他任意存档页面。下面，我们就一起来为 WordPress 默认主题添加一个名为 Category Archive 的页面模板。使用你最习惯的文本编辑器，如 Notepad++、UltraEdite 等等，复制以下代码并保存为 category-archive.php 或其他你喜欢的名字：


/*
Template Name: Category Archive
*/
?>
 
 get_header(); ?>
 

 
	 if (have_posts()) : while (have_posts()) : the_post(); ?>
	 the_ID(); ?>">
	 the_title(); ?>
		
			 the_content('Read the rest of this page »
'); ?>
 
			 wp_link_pages(array('before' => 'Pages: ', 'after' => '
', 'next_or_number' => 'number')); ?>
 
		
	
	 endwhile; endif; ?>
 
	
	
 

 
 get_sidebar(); ?>
 
 get_footer(); ?>

第二步，增加按分类查询代码

复制以下代码到、之间：

	
	
	$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id NOT IN (2,5,6)");
 
	$catCounter = 0;
 
	foreach ($catQuery as $category) {
 
		$catCounter++;
 
		$catStyle = '';
		if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';
 
		$catLink = get_category_link($category->term_id);
 
		echo '.$catStyle.'>.$catLink.'" title="'.$category->name.'">'.$category->name.'
';
			echo '';
 
			query_posts('cat='.$category->term_id.'&showposts=5');?>
 
			 while (have_posts()) : the_post(); ?>
				 the_permalink() ?>" rel="bookmark" title=" the_title(); ?>"> the_title(); ?>
			 endwhile; ?>
 
				 echo $catLink; ?>" title=" echo $category->name; ?>">More  echo $category->name; ?>
			
		
		 }	?>

代码解析：此段代码会从 WordPress 数据库中查询除分类 id 为2、5、6的所有分类，并列表显示其最新5篇文章。当然，我们稍微改动一下查询语句，使其只查询 id 为2、5、6的分类。

$catQuery = $wpdb->get_results("SELECT * FROM $wpdb->terms AS wterms INNER JOIN $wpdb->term_taxonomy AS wtaxonomy ON ( wterms.term_id = wtaxonomy.term_id ) WHERE wtaxonomy.taxonomy = 'category' AND wtaxonomy.parent = 0 AND wtaxonomy.count > 0 AND wterms.term_id IN (2,5,6)");

分列显示最新文章

1
2
3

$catCounter++;
$catStyle = '';
if (is_int($catCounter / 2)) $catStyle = ' class="catAlt"';

查询数据库

1
2
3

foreach ($catQuery as $category) {
	/* Code used to retrieve and display the latest posts */
}

显示分类标题

1	echo '.$catStyle.'> .get_category_link($category->term_id).'" title="'.$category->name.'">'.$category->name.' ';

列表显示最新5篇文章

query_posts('cat='.$category->term_id.'&showposts=5');?>
 
 while (have_posts()) : the_post(); ?>
	 the_permalink() ?>" rel="bookmark" title=" the_title(); ?>"> the_title(); ?>
 endwhile; ?>
	 echo $catLink; ?>" title=" echo $category->name; ?>">More  echo $category->name; ?>

CSS 样式

/* Latest posts by category styles */
 
.catArchive {
	width: 450px;
	overflow: hidden;
	margin: 20px 0 0 0;
	padding: 0;
	list-style-type: none;
}
 
.catArchive h3 {
	font: normal bold 18px sans-serif;
	border-bottom: 1px solid #666;
	margin: 0;
	padding: 0 0 3px 0;
	display: block;
}
 
.catArchive li {
	display: block;
	float: left;
	width: 210px;
	margin: 0 30px 30px 0;
}
 
.catArchive ul {
	margin: 0;
	padding: 0;
}
 
.catArchive li li {
	border-bottom: 1px solid #ddd;
	margin: 0;
	padding: 4px 0;
}
 
.catAlt {
	margin-right: 0 !important;
}

请根据自身实际情况修改宽度、分类标题、文章列表样式。

怎么样，按照本文一番修改，你的 WordPress 主题是不是也像一个 CMS 了呢？！
本文由辐射鱼翻译自：Latest Posts by Category Archive with WordPress
站趣译文：WordPress CMS 技巧：按照分类调用最新文章

自动获取 WordPress 缩略图增强应用

辐射鱼 — Wed, 14 Jan 2009 17:08:24 +0000

刚发布完自动获取 WordPress 缩略图这篇 WordPress 教程后，我发现原作者对其进行了增强，也许很多同学还没有来得及了解其原理，那么，我还是另开一篇博文讲解吧。
新代码可实现的功能

Hyperlinks

图片链接到文章地址

Thickbox

实现 Thickbox 图片缩放效果

图片分类

Code:
Download the post image code here
使用方法：

1
2
3

 the_image(size, class , link to post , link using thickbox, echo result); ?> 
//in the example video the single post page uses:
 the_image('medium','post-image',false,true); ?>

函数默认值：

Size — medium
Class — blank
link to post — false
link using thickbox — false
echo result — true

作者还制作了一段视频教程，大家可以看看：

自动获取 WordPress 缩略图

辐射鱼 — Wed, 14 Jan 2009 13:41:45 +0000

sofish 小盆友在他的博客中提到一直没有找到自动显示 WordPress 缩略图的方法，很多主题也只是通过利用 WordPress 中的自定义字段（custom field）功能来曲线救国。但是，这种方法相当不自动，每次都得复制一遍缩略图地址，不是我们鱼类思维。大家知道，每当我们利用 WordPress 后台上传图片时，WordPress 都会自动为我们创建一个缩略图，那么，我们是否可以自动获取这个缩略图呢？答案是肯定的。下面我们一起来看看这篇 WordPress 教程吧
首先，我们将以下代码复制到你主题的 functions.php 中

function the_image($size = 'medium' , $class = ''){
	global $post;
 
	//setup the attachment array
	$att_array = array(
		'post_parent' =&gt; $post-&gt;ID,
		'post_type' =&gt; 'attachment',
		'post_mime_type' =&gt; 'image',
		'order_by' =&gt; 'menu_order'
	);
 
	//get the post attachments
	$attachments = get_children($att_array);
 
	//make sure there are attachments
	if (is_array($attachments)){
		//loop through them
		foreach($attachments as $att){
			//find the one we want based on its characteristics
			if ( $att-&gt;menu_order == 0){
				$image_src_array = wp_get_attachment_image_src($att-&gt;ID, $size);
 
				//get url - 1 and 2 are the x and y dimensions
				$url = $image_src_array[0];
				$caption = $att-&gt;post_excerpt;
				$image_html = '';
 
				//combine the data
				$html = sprintf($image_html,$url,$caption,$class);
 
				//echo the result
				echo $html;
			}
		}
	}
 
}

以上代码会自动列出 WordPress 文章中的所有附件图片，并显示第一张图片的缩略图。
接下来，我们只需在 index.php 等文件中添加以下代码，获取 WordPress 缩略图

 the_image('thumbnail','post-thumb'); ?>

当然，我们也可以显示中等尺寸的缩略图

 the_image('medium','post-image'); ?>

当然，以上代码还有一点点效率问题，如果你有更好的 idea 只匹配第一张图片并显示其缩略图，请 share with us！！！
本文译自：Post image the easy peasy way
中文翻译：自动获取 WordPress 缩略图

WordPress2.7 嵌套评论

辐射鱼 — Mon, 29 Dec 2008 19:03:34 +0000

在如何使你的主题兼容 WordPress2.7 这篇文章中，我们谈到了 WordPress2.7 令人兴奋的嵌套评论功能，如果你的主题还不支持，那么我们通过本篇 WordPress 教程，一起来看看如何实现它吧！！！
WordPress2.7 使用了一个新函数–wp_list_comments，使用它，我们即可实现嵌套评论（Threading Comments）这个功能。那，我们开始改造 comments.php 文件吧：

首先，添加 comment-reply JavaScript，让嵌套评论（Threading comments）能够正常运行

打开 header.php 文件，在 wp_head() 函数之前添加如下函数：

 if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

WordPress2.7 全新的 comments loop 介绍

密码保护检查


  if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
      die ('Please do not load this page directly. Thanks!');
  if ( post_password_required() ) { ?>
      This post is password protected. Enter the password to view comments.
  
      return;
      }
?>

WordPress 2.7 的评论 Loop

 if ( have_comments() ) : ?>
	 comments_number('No Responses', 'One Response', '% Responses' );?> to “ the_title(); ?>”
 
	
	 wp_list_comments(); ?>
	
	
		 previous_comments_link() ?>
		 next_comments_link() ?>
	
  else : // this is displayed if there are no comments so far ?>
 
	 if ('open' == $post->comment_status) : ?>
		
 
	  else : // comments are closed ?>
		
		Comments are closed.
 
	 endif; ?>
 endif; ?>

CSS 样式

至于 CSS 样式，各有各的喜好，大家可以借鉴 eachBlue 和 Blueweed for WordPress2.7 这两款主题自行定义 children、depth、author。

提交嵌套评论（Threading Comments）

首先需要要把评论框 (Comment Form) 放入一个 ID 为 respond 的 DIV 中，然后找到类似以下代码：

<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

在其后面一行加入：

 comment_id_fields(); ?>

当然，假若评论者不想回复该评论了，可以加入以下代码，可以取消评论：

1
2
3


	 cancel_comment_reply_link(); ?>

经过以上改动，我们的主题就支持 WordPress2.7 的嵌套评论（Threading Comments）功能了，使用者只需在 WordPress 管理后台激活嵌套评论即可。下一篇文章我们将一起讨论 WordPress2.7 评论分页，敬请期待。
如果你还有什么疑问，请留言或加入站趣-分享建站的乐趣 QQ 群：8329980 交流

如何使你的主题兼容 WordPress2.7

辐射鱼 — Mon, 29 Dec 2008 09:52:20 +0000

WordPress2.7 正式版已经发布两周多了，可许多主题作者仍然没有升级主题，使其完全支持 WordPress2.7。你是否只能眼睁睁看着 WordPress2.7 的嵌套评论（Threading Comments）、评论分页（Paging Comments）、日志置顶（post sticky）等诱人的功能而望洋兴叹呢？
不要垂头丧气，站趣-分享建站的乐趣就来介绍几个 WordPress 教程，用于改进你心爱的主题，使其支持 WordPress2.7。

WordPress2.7 嵌套评论（Threading Comments）

WordPress2.7 最令人欣喜的功能莫过于嵌套评论（Threading Comments）这个功能了，站趣-分享建站的乐趣制作的 eachBlue 和 Blueweed for WprdPress2.7 这两个主题业已支持该功能，如果你的主题还不支持，强烈建议你下载试用，当然，你也可以和我一起，将主题彻底改造一下。效果图如下：

WordPress2.7 评论分页(Paging Comments)

WordPress 长长的评论页会将博客拖慢不少，WordPress2.7 之前，我们只有借助于插件才可以将评论分页，现在，我们可以使用 WordPress2.7 原生的评论分页(Paging Comments)了。

Post Classes

WordPress2.7 推出之前，我们通常使用以下代码定义 Post Classes：

 the_ID(); ?>" class="post">

但在 WordPress2.7 中，WordPress 开发团队增强了 Post Classes 的功能，主题作者可以通过 Post Classes 实现文章置顶等功能。使用方法：

 the_ID(); ?>"  post_class(); ?>>

我们甚至可以自定义 class 名称：

 the_ID(); ?>"  post_class(style); ?>>

style 可以是 post、category-slug、tag-slug、sticky(置顶)等值。

Logout Link

WordPress2.7 新增了 wp_logout_url 这个函数，我们可以在主题中使用它来注销登陆。使用方法：

 echo wp_logout_url(); ?>">Logout

Search form

WordPress2.7 对调用搜索函数也进行了改动，之前，我们都是使用以下代码调用搜索框：

 include (TEMPLATEPATH.'/searchform.php'); ?>

现在，我们可以使用更简洁的 get_search_form 函数调用 searchform.php 文件了，使用方法：

 get_search_form(); ?>

文章很长，但是，为了体验 WordPress2.7 的新功能，折腾一下是值得的，你说呢？如果你还有什么疑问，请留言。

在 WordPress 主题中安全的调用插件代码

辐射鱼 — Mon, 29 Dec 2008 04:58:54 +0000

WordPress 的迷人之处莫不在于其强大、方便的插件功能，很多 WordPress 主题作者，为了某些特殊功能，也会或多或少在主题中使用插件。也许是为了减少代码，很多主题制作者在调用 WordPress 插件代码的时候，使用了类似下面的代码：

1 2	Plugin Title plugin_template_tag_function(); ?>

如果主题使用这恰好启用了该插件，那么上面这段代码不会有任何问题，但是，如果主题使用没有启用该插件，或者压根儿就没有安装这个插件，那么，它将引起一些致命的 php 错误。
那么，我们怎样才能更安全的调用插件代码呢？请看以下代码：

 if ( function_exists(’plugin_template_tag_function’) ) : ?>
Plugin Title
 plugin_template_tag_function(); ?>
 endif; ?>

这段代码在工作之前，会先检查是否存在该插件，如果存在，则执行代码；如果不存在，则自动终止。这样，即使对方没有启用相应的插件，也不会引起 PHP 错误了。
如果您还在使用类似于第一段的代码调用 WordPress 插件，那赶紧更正吧！