網生@誌 | zEUS.'Blog » Wordpress研究 http://zeuscn.net Not Only Wordpress Template, But Also My Life... Tue, 03 Jan 2012 13:20:32 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Windows2003 IIS6.0 下 WordPress 和 DiscuzX2 的伪静态实现方法 http://zeuscn.net/archives/2011/08/09/windows2003-iis6-wordpress-and-discuz-static-permalink.html http://zeuscn.net/archives/2011/08/09/windows2003-iis6-wordpress-and-discuz-static-permalink.html#comments Tue, 09 Aug 2011 12:47:24 +0000 zEUS. http://zeuscn.net/?p=1041 本文介绍的伪静态方法经过我亲自试验在 Winodows 2003 6.0 下100%可用，具体效果可以参考本站：http://zeuscn.net 和论坛：http://bbs.zeuscn.net，实现伪静态的方法主要是利用了 IIS 的一个组件：ISAPI_REWRITE

is a powerful regular-expressions-based URL rewriter for IIS. It is compatible with Apache mod_rewrite making it possible to move configurations from Apache to IIS and vice versa just by copying .htaccess files (please see this compatibility chart). It is used for search engine optimization, to proxy another server’s content, stop hotlinking or strengthen server security.

和 实现 IIS 下伪静态的步骤简单的来说只有2个：
1、安装 ISAPI_REWRITE 组件；
2、导入规则。

分别下载：ISAPI_REWRITE for WordPress，ISAPI_REWRITE for Discuz
解压缩之后将他们上传到你的 Windows 服务器上，默认是直接放在C盘跟目录，不过放在其他目录下也没问题，比如分别放在 WordPress 和 的根目录也可以。

接下来是第一步，安装 ISAPI_REWRITE 组件：
在IIS中右击站点→“属性”→“ISAPI筛选器”→“添加”，在弹出的对话框中指定 ISAPI_Rewrite.dll 的位置并输入筛选器名称，如下图：

ISAPI 组件安装

ISAPI 组件安装

设完之后重启一下 IIS（有时候也不需要重启，不知道为何 -_-），检查一下站点属性页的“ISAPI筛选器”选项卡，如果是下图这个样子，说明 ISAPI_Rewrite.dll 加载成功：

ISAPI 安装成功

ISAPI 安装成功

第二部导入规则，Wordpress 和 Discuz 的伪静态规则 httpd.ini 我已经打包在上面2个下载文件里了，这2个规则也不是我自己写的，全部都是在网上找到的，经过我的测试可以正常使用。大家只需要把 httpd.ini 分别移动到2个程序的根目录下即可生效。

So easy ，Windows 主机下的 WordPress 和 Discuz 就都支持了伪静态功能，最后大家要做的就是分别进入他们的后台简单设置成自己需要的形式即可。

我使用的是 Windows 的 VPS，可以直接登录主机进行安装，如果你使用的只是 Windows 虚拟主机请联系你的 IDC 提供商帮助你进行以上的操作。

日志评论

本文地址：http://zeuscn.net/archives/2011/08/09/windows2003-iis6-wordpress-and-discuz-static-permalink.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2011/08/09/windows2003-iis6-wordpress-and-discuz-static-permalink.html/feed 102 国内免费高速图床——SAE 免费搭建 WordPress http://zeuscn.net/archives/2011/08/05/sae-wordpress.html http://zeuscn.net/archives/2011/08/05/sae-wordpress.html#comments Fri, 05 Aug 2011 05:53:56 +0000 zEUS. http://zeuscn.net/?p=1019 SAE——Sina App Engine 现在提供免费搭建 WordPress 站点，却不支持绑定顶级域名，跟国内其他的博客提供商相比 并没有什么优势。但是考虑到 隶属于新浪，走的又是开放平台的路线，所以 的服务有几点可以肯定，稳定、快速、支持图片外联。所以对于服务器放在国外，或者服务器空间有限的朋友来说，在 SAE 建个 当图床还是相当靠谱的。当然了，对于开网店的朋友来说，这也是个很不错的选择。

点击 这里，进入注册页面。

SAE 注册 01

SAE 注册 01

SAE 的帐号可以跟新浪微博关联，如果有新浪微博的朋友可以直接连接，然后完成申请表格。申请过程中需要验证手机号码，目的可能是要减少无效申请，整个过程非常简单。

注册完登录之后，在“应用”页面的“应用商店”标签的最下面可以找到“WordPress for sae ( 移植应用 )”

SAE 注册 02

SAE 注册 02

点击立即安装，弹出窗口会提示让使用者给这个新应用填写一个子域名，然后点击“安装到以上位置”，之后的操作也非常简单，最后就坐等 SAE 自动将 WordPress 安装完成。

SAE 注册 03

SAE 注册 03

安装完成即会转到一个“安装成功”的提示框，但经过我多次测试，大家可以无视这个提示框，直接在浏览器中输入刚才填写的子域名，例如上图中的 zeuscn.sinaapp.com 即会跳转到大家熟悉的 WordPress 安装界面。输入管理员名称、密码和邮箱之后，免费快速的 WordPress 就建立完成了。

接下来的事情就不用多说了，登录后台、新建日志、上传图片、获取连接、引用到自己的博客或者网店。

最后测试一张外联效果：

大黄蜂

大黄蜂

日志评论

本文地址：http://zeuscn.net/archives/2011/08/05/sae-wordpress.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2011/08/05/sae-wordpress.html/feed 1 如何控制 WordPress 文章标题的长度（顺带测试一下超长的标题输出） http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html#comments Mon, 30 Nov 2009 16:02:44 +0000 zEUS. http://zeuscn.net/?p=724 虽然大多数时候我们不需要去管 文章标题有多长，因为一般比较长的标题会自动分为两行显示。但是有时候我们为了控制模板的样式整洁，希望文章标题只显示成一行，比如 D&Z Theme Pro CP 主题首页幻灯片右侧的“最新的一篇日志”，这里我首先使用固定长度的摘要来控制文章长度，但是如果有时候文章标题过长而显示成两行的时候，文章摘要就会出现“溢出”。这个时候如果能让标题的长度固定为一行，就能让这里的样式看起来更整洁。在好友 Lee 的帮助下，我解决了这个问题。

其实解决这个问题很简单，只需要一句话就行了。在 WordPress 里，我们使用

<?php the_title(); ?>

来输出文章标题，与其相关的还有一个函数：

<?php get_the_title(); ?>

简单的说说两者的关系，get_the_title() 返回值是一个字符串（文章标题），而 the_title() 就是该字符串通过 echo 输出后的值。
实际上就是 WordPress 自己在输出文章标题时进行了简化，直接用

<?php the_title(); ?>

代替了

<?php echo get_the_title(); ?>

除此之外这里还需要用到另外一个函数：mb_strimwidth(string str, int start, int width, [string trimmarker], [string encoding]);

mb_strimwidth() truncates string str to specified width. It returns truncated string.

If trimmarker is set, trimmarker is appended to return value.

start is start position offset. Number of characters from the beginning of string. (First character is 0)

trimmarker is string that is added to the end of string when string is truncated.

encoding is . If it is omitted, internal encoding is used.

现在大部分的 服务器都支持了 MB 库（mbstring 库 全称是 Multi-Byte String 即各种语言都有自己的编码，他们的字节数是不一样的，目前php内部的编码只支持ISO-8859-*, EUC-JP, 其他的编码的语言是没办法在 php 程序上正确显示的。解决的方法就是通过 php 的 mbstring 函数库来解决），所以我们可以放心的使用这个用于控制字符串长度的函数：

<?php echo mb_strimwidth(get_the_title(), 0, 38, '...'); ?>

那么我们只需要用上面这个函数替换 WordPress 原有的

<?php the_title(); ?>

即可，这里我输出了字符串的第0位到第38位，根据主题的不同可以自行设置该数值，另外多余长度部分使用“…”代替。

控制 WordPress 文章标题长度

控制 WordPress 文章标题长度

其实我在控制文章摘要的时候也是使用的这个函数，比如我在 D&Z Theme Pro CP 主题的首页里使用的就是

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 470,"......"); ?>

来输出470个字符长度的摘要，并过滤了 HTML 标记。

虽然这是个很简单的方法，但我相信它对主题制作者而言还是相当实用的 :-)

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/12/01/wordpress-title-width-defined.html/feed 27 给博客首页增加了一个 Ajax 效果 http://zeuscn.net/archives/2009/11/08/ajax-load-for-dztheme-pro.html http://zeuscn.net/archives/2009/11/08/ajax-load-for-dztheme-pro.html#comments Sun, 08 Nov 2009 06:43:39 +0000 zEUS. http://zeuscn.net/?p=713 这是一个利用 Ajax 载入页面的特效，在博客首页的文章栏顶部我增加了5个标签按钮，除了第一个“最新文章”外，其余4个分别指向4个分类——“ 研究”、“ 主题”、“ 插件”和“My Life”，点击相应的按钮后，首页文章栏就会在不刷新页面的情况下输出该分类下的文章列表。

这个效果的好处就不用说了，它利用有限的网页空间输出了更多的内容，而且这不是简单的类似侧栏顶部的 TAB 栏切换。侧栏的顶部的 TAB 栏实际上是一次性输出了4个栏目，但是只显示其中一个栏目，其余3个被 display:none 。而这个 Ajax 效果是在点击了标签栏之后才载入页面，也就是说在读者不需要的情况下，页面不会一次载入过多的内容，从而提高了页面载入速度。

这种效果在 WordPress 的 主题里并不是很常见，但是一旦加入了这种效果，想必一定能给主题添色不少～ 于是我花了2天的时间终于把这个特效搞定了… 这里要特别感谢下 Jinwen 的一篇指导性的文章！具体的原理和添加方法这里我就暂不作介绍了，有兴趣的朋友可以直接去 Jinwen 那边看介绍。

这个基于 Ajax 的 特效加入到 D&Z Pro CP 主题之后很好的解决了展示“分类内容”不足的缺陷，我也会把这个效果正式加入到该主题中，并连同一些其它内容的升级于本月底免费发放给 D&Z Theme Pro CP 付费主题用户们。

基于 Ajax 的 jQuery 页面载入

基于 Ajax 的 jQuery 页面载入

另外在 Which is The Next Theme ? 一文中发起了一个投票，最终 魔兽风格的主题“后程发力”，超过了之前一直排列榜首的 Blue-s ：
{democracy:9}
那么本月我也会把主题制作的中心放在 WLK 这款主题上了，希望能在本月底之前发布这款免费主题 :-)

WLK 魔兽风格主题

WLK 魔兽风格主题

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/11/08/ajax-load-for-dztheme-pro.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/11/08/ajax-load-for-dztheme-pro.html/feed 26 无插件实现 WordPress Lightbox 特效 http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html#comments Sat, 31 Oct 2009 16:14:42 +0000 zEUS. http://zeuscn.net/?p=658 上一篇日志介绍了让 WordPress 原生相册功能实现基于 jQuery 的 lightbox 特效，技巧是利用了 lightbox 的一个调用方法，依照同样的方法我们也可以让 原生的图片功能也能获得 lightbox 特效，也就是说在文章中插入一张图片的情况下也能实现点击放大浏览这种特效。

其原理也很简单，我们在直接利用 WordPress 文章编辑后台插入“上传、相册或媒体里已经存在的图片”：

WP 文章编辑插入图片

WP 文章编辑插入图片

之后程序会自动在前台页面代码中插入一个叫做 “wp-caption” 的 class

自动生成 wp-caption

自动生成 wp-caption 这个class

那么和上一篇方法一样，先去官方网站下载一套 的 lightbox plugin ，解压压缩包之后分别在 js 目录和 目录下找到如下3个文件：
jquery.js
jquery.lightbox-0.5.min.js
jquery.lightbox-0.5.css
将以上三个文件通过 FTP 上传到你所使用的 wordpress 主题目录下，然后在 <head></head> 标签内插入以下代码即可：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
<?php if (is_single() or is_page()) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js"></script>
<script type="text/css" src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css"></script>
<script type="text/javascript">
$(function() {
     $('.gallery a').lightBox(); //给原生相册功能加入 lightbox 特效
     $('.wp-caption a').lightBox(); //给原生图片功能加入 lightbox 特效
});
</script>
<?php } ?>

当然了，由于其中加入了判断，这个效果也只会出现在“文章页”和“页面页”。以上是主题在不支持 jQuery 的时候所添加的代码，如果主题已经加载了 jQuery 库，则需要酌情增加相关的代码了。

总结一下，基于 jQuery 的 lightbox ，我们无需任何其它 WordPress 的插件，就可以让 WordPress 原生的图片功能和相册功能都具有 lightbox 图片点击放大的特效。而且这个是基于 jQuery 库的一种扩展，因而我们可以在主题里方便的同时应用多种 jQuery 特效～ 比如 D&Z Theme Pro CP 主题侧栏 TAB 栏的切换效果、整站的锚点滚动和文章栏侧栏“MyConverse – 每个人都应该有一双匡威”栏目下的图片效果。

最后上几张实例展示：

擎天柱 CG 图

擎天柱 CG 图

机器狗 CG 图

机器狗 CG 图

红蜘蛛 CG 图

红蜘蛛 CG 图

大力神 CG 图

大力神 CG 图


YUPOO ID : ff8001e3-9f0b-4487-8c02-d9e45f8d1045

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html/feed 91 无插件让 WordPress 原生相册支持 lightbox http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html#comments Sat, 31 Oct 2009 03:58:30 +0000 zEUS. http://zeuscn.net/?p=644 不提倡使用过多的 插件，因为很多插件都会在 head 标签内增加大量的 JS，无疑这会影响到页面载入的速度，因而我就想能整合到主题里的效果尽量整合进来“统一管理”，这样自己也好让 JS 出现在它们需要的地方，避免不必要的加载。这里简单介绍一下给主题加入 的 lightbox 特效后如何让它能够支持 WordPress 原生的图片相册功能。

我在上一篇日志里第一次使用了 WordPress 原生相册功能，给我感觉挺不错的——方便快捷，但是它的图片链接会重新打开图片，这着实不是很爽。另外，由于 D&Z Theme Pro CP 主题已经内嵌了 jQuery 的 lightbox 特效，于是我就想能否将两者结合起来，不试不知道，一试还真成功了 :-D 而且还只是仅仅只是在 header. 中加入了一句代码：

$('.gallery a').lightBox();

Pro CP 的用户只需在 header.php 文件中搜索一下“lightbox”这个关键词，然后将上面那句代码添加成如下形式即可：

$(function() {
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    $('.gallery a').lightBox();
});

这里简单解释一下：
jQuery lightbox 的官方介绍（http://leandrovieira.com/projects/jquery/lightbox/）中可以得知调用 lightbox 特效的方法有如下几种：

$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

当我们在 WordPress 中插入原生相册的时候，系统会自动在调用相册的源代码中加入 gallery 这个 class：
自动添加 gallery class

然后我根据 lightbox 的调用方法，将其中的

$('#gallery a').lightBox(); // 凡是带有 gallery ID 的对象都会启用 lightbox 特效

改为了

$('.gallery a').lightBox();// 凡是带有 gallery Class 的对象都会启用 lightbox 特效

即可，相当 Easy 吧～ 这样 D&Z Theme Pro CP 主题就能良好的支持 WordPress 原生相册的功能了！

那么在一个不支持 lightbox 的 wordpress 主题里我们要如何做呢？
先去官方网站下载一套 jQuery 的 lightbox plugin ，解压压缩包之后分别在 js 目录和 目录下找到如下3个文件：
jquery.js
jquery.lightbox-0.5.min.js
jquery.lightbox-0.5.css
将以上三个文件通过 FTP 上传到你所使用的 wordpress 主题目录下
打开主题的 header.php ，将如下代码加入到 <head></head> 标签内：

<script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>

然后再加入上文介绍的：

<script type="text/javascript">
$('#gallery a').lightBox();
$('.gallery a').lightBox();
</script>

就大功告成了～ 但是一般来说我们只会在文章页或者页面页调用相册功能，所以我们可以使用一个判断语句让它们只在这两类页面中加载：

<?php if (is_single() or is_archive or is_page()) { ?>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>
    <script type="text/javascript">
    $('#gallery a').lightBox();
    $('.gallery a').lightBox();
    </script>
<?php } ?>

That’s all~
使用以上方法我相信原生的 WordPress 相册就能满足大部分用户的需求了，用它来代替功能强大但略显臃肿的 NextGEN Gallery 相册插件基本没啥问题～

看过以上介绍还不赶紧给自己的主题加上这么酷的效果？
007 006 009 004 003 005

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html/feed 12 优化 header.php 加速 WordPress http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html#comments Tue, 21 Jul 2009 20:26:38 +0000 zEUS. http://zeuscn.net/?p=602 以众多插件和主题而闻名，插件不仅给我们的博客提供了诸多强大的功能，而且还简便了操作美化了页面。但凡事都是具有两面性的，不少插件为了实现自己的功能都需要引用额外的 和 样式，这些内容全部都被自动加载到了页面的 head 标签内，从一定程度上影响到了页面加载的速度。而实际上大部分时候我们不需要这些额外的内容。比如我的博客首页（index.）、归档页（archive.）和搜索结果页（search.），都不会使用我已经启用的 Audio player 、Democracy 、WP-Syntax 、CoolCode 、Clean Archives Reloaded 这几个插件，而它们都会自动将一些额外的内容加入到 head 标签内，所以我只需要根据自己的需要，让这些插件只在文章页（single.php）和页面页（page.php）内加载即可。

WordPress 插件是根据下面这个函数进行加载的：

<?php wp_head(); ?>

我们可以在主题模板内的 header.php 文件中找到它，也就是说只要出现以上这个函数，插件就能自动将相关的内容加载到 head 标签内，如果没有这个函数，插件则不会加载这些内容。那么我只需要按照下面的写法就能按照我自己的需求在文章页（single.php）和页面页（page.php）内加载相关的插件功能了。

<?php if (is_single() or is_page()) { ?>
<?php wp_head(); ?>
<?php } ?>

通过一个简单的判断语句我们就能有效的减少博客首页的“请求数量”以提高首页的加载速度，下面是首页和文章页 head 标签加载情况的两张对比图：（点击放大）

优化 header.php 加速 WordPress 首页加载速度

优化 header.php 加速 WordPress 首页加载速度

基本上，效果很明显！

功能和速度就像鱼和熊掌一样难以兼得，对于博客/网站速度的优化还是蛮需要积累经验的。

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html/feed 95 09’夏季 WordPress 文化衫第一批团购结束 http://zeuscn.net/archives/2009/06/16/1st-trade-of-09-wordpress-tshirt.html http://zeuscn.net/archives/2009/06/16/1st-trade-of-09-wordpress-tshirt.html#comments Tue, 16 Jun 2009 12:24:17 +0000 zEUS. http://zeuscn.net/?p=590 补图：

Wordpress T恤

Wordpress T恤

Wordpress T恤

Wordpress T恤

Wordpress T恤

今天中午趁休息的时候去多福路将13件T恤取了回来，下午3点之前就把T恤都（申通）快递发出去了，其中有一位朋友的收货地址申通到不了，所以我明天用 EMS 发。申通承诺3天能收到货，所以我想订购了T恤的朋友应该能在周5就收到这款文化衫了！

对这批T恤的质量总的来说还算满意，虽然我觉得还是薄了一点，但我没有在汉正街找到比这个质量更好的空白T恤了… 另外T恤的质量得到了我老妈的认可，我想这样应该足够了。关于图案的印制，我觉得也还行，可能有些袖口印制的小写字母的域名看起来秀气了点（也许跟字体选用有点关系），不过问题不大。大写字体的效果则要好一些。另外T恤难免会存在一点线头之类的小毛病，但不影响T恤质量，希望大家见谅！毕竟除开快递费，T恤的售价仅35元… 自然不能跟动辄上百的T恤拼质量了…

由于这批T恤急于发货，所以我都只是简单的检查了一遍，如果万一存在质量问题，请速与我联系！

付款方式：我建了个淘宝商品，大家直接拍就行了，不用管上面的尺寸要求，我都是按照之前跟大家核对好的尺寸采购的T恤！淘宝链接如下：
http://item.taobao.com/auction/item_detail-0db1-db64aa86949175fec82b96befb58e55b.htm

实物图明天奉上！（刚刚给新T恤透了水，晾一下～）
Notice T恤的保养注意事项：

正常手洗即可，尽量不要用力搓图案表面，图案表面一般不易附着脏物；
尽量不用内含漂白剂的洗涤剂洗涤；
尽量不长时间浸泡T恤；
尽量不用洗衣机洗，用洗衣机洗是把图案翻到反面到洗；
洗涤完毕后，最好不要用洗衣机甩赶干，要自然凉干。

最后是关于 文化衫的第二批团购的问题：由于又有几位朋友对T恤表现出了兴趣，所以在决定是否有第二批团购计划之前我要先得到这次T恤的反馈信息，另外我还想尝试一下其它的配色，并且团购数量得在10件以上。
届时我会尽快的发布相关信息！敬请关注！:-D

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/06/16/1st-trade-of-09-wordpress-tshirt.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/06/16/1st-trade-of-09-wordpress-tshirt.html/feed 96 团购 WordPress T恤进展 http://zeuscn.net/archives/2009/06/14/09-wordpress-tshirt-more.html http://zeuscn.net/archives/2009/06/14/09-wordpress-tshirt-more.html#comments Sun, 14 Jun 2009 10:27:24 +0000 zEUS. http://zeuscn.net/?p=589 上次组织活动后通过调查的结果我决定第一批 文化衫采用白底黑色图案的的样式（胸前大图案，背后领口下方 WordPress ，左边袖口印域名）来印制，并群发了邮件询问了一下需求，到现在为止加上我自己一共有11位朋友报名团购。

原计划上周末去汉正街采购空白的T恤，不过由于下雨而没有去成。虽然今天武汉34度，但这个事情不能再拖下去了，所以就顶着太阳去“逛了逛”。顺着 Anna 同学告诉我的友谊南路旁的一个小巷子一直逛到多福路，沿途卖空白T恤的铺子不少，边走边看边问。总共问了将近十家，基本上就是一分钱一分货，T恤有几块钱的也有几十块钱的，价格差异导致了明显的质量差异，最终选中的是我见到的质量最好的220克的全棉T恤。

T恤种类选好了，但是T恤的大小是个问题… 我试穿了不同牌子但是同一型号（L）的T恤，结果大小不一… 我选中的这种质量最好的T恤我需要穿 XL 的型号，我身高170CM 出头，肩膀较宽。我估计175 CM 以上的同学要穿 XXL 的，接近180 CM 稍胖一点的同学估计得穿 XXXL 的。

由于T恤大小的问题我并没有立刻采购并印制T恤，由于T恤的唯一性（印制自己的域名），所以我会再次给这10位朋友发邮件确认一下型号的大小，然后明天中午再去一趟多福路，正式采购、印制T恤，后天中午之前就能拿到印好的T恤，然后争取在后天（星期二）下午发货，这样我估计大家能在下周5（6月19号）就收到T恤了！所以要是现在还有朋友对这款文化衫有兴趣，请在明天中午之前联系我～ 并将以下信息通过邮件（zeus0517@gmail.com）发给我，谢谢！

姓名、性别、身高、T恤尺寸、邮编、地址、手机号、需要印制的域名

另外，关于左袖口印制的域名，为了保证和 WordPress LOGO 一致的字体，Timer 选用了类 WordPress 字体，和 WordPress 官方 LOGO 字体的相似度达到了95%以上。在对域名大小写没有特别要求的情况下，我们一律采用大写的形式（见下图），考虑到域名长度和袖口宽度，所以我们去掉了 “http://www.” 而只印主域名。如果您对域名字体大小写有什么额外的要求请尽快通知我，谢谢！

Link for Tee

Link for Tee


最后是大家最关心的T恤的价格——不会超过45元，并且包快递费，最终定价我会在明天晚上之前通过淘宝发布，届时报名团购T恤的朋友直接在淘宝上拍下T恤即可。
原创 WordPress T恤

原创 WordPress T恤


T恤到手后我会第一时间上照片 :-P 敬请期待！

题外话：
1、还在校的同学不妨去本地的服装批发市场进几件情侣T恤去校园里卖，利润很高… 不过貌似快要放假了…
2、从服装批发商的老板们的讨论中得知，今年女士短裤出货量非常大！就是那种很短的短裤～～ 恩… 后话就不多了，男生们就自己去联想吧 :-P

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/06/14/09-wordpress-tshirt-more.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/06/14/09-wordpress-tshirt-more.html/feed 26 剔除 D&Z Theme 主题“热评日志”列表中的页面 http://zeuscn.net/archives/2009/06/02/d-z-theme-post-type.html http://zeuscn.net/archives/2009/06/02/d-z-theme-post-type.html#comments Tue, 02 Jun 2009 05:58:31 +0000 zEUS. http://zeuscn.net/?p=581 这是一个困扰我很久的问题，D&Z 主题侧栏顶部 Tab 栏里的“热评日志”列表中排名前2位的文章是“给我留言”和“主题模板”，而实际上这两篇“文章”是开启了评论的 页面而非日志。所以从严格的意义上来讲，这种排列是有误的。于是我就琢磨如何在“热评日志”的统计中去掉“页面”，其实理论上办法是很简单的——“热评日志”是我从 WordPress 工具箱插件中提取出来的功能，它通过一条 SQL 查询语句就生成了该列表，那么我只需要在这个 SQL 语句中加入一个排除“页面”的条件就行了。不过由于对 WordPress 数据库表结构不熟悉，导致我一直未能解决该问题。

今天在查询 WordPress 官方文档的时候发现了：Database Description ，在 wp_posts 表里存在一个字段：post_type，从字面上理解这个字段肯定跟“日志”和“页面”的判断有关。于是我就查看了一下本地的 WordPress 数据库，果然在 wp_posts 表的 post_type 字段里有4个值：attachment、page、post 和 revision ，虽然不知道 attachment 和 revision 是干嘛的，但是有 page 和 post 就足够了！

那么，我们打开 D&Z Theme 主题文件里的 functions. 找到 // Get Top Commented Posts 这条注释，该注释下面的代码就是提供“热评日志”列表的，其中的 SQL 语句是：

1

SELECT  $tableposts.ID AS ID, post_title, post_name, COUNT($tablecomments.comment_post_ID) AS 'comment_total' FROM $tableposts LEFT JOIN $tablecomments ON $tableposts.ID = $tablecomments.comment_post_ID WHERE comment_approved = '1' AND post_date < '".date("Y-m-d H:i:s", (time() + ($time_difference * 3600)))."' AND post_status = 'publish' AND post_password = '' GROUP BY $tablecomments.comment_post_ID ORDER  BY comment_total DESC LIMIT $limit

写得还是有点小复杂的，不过没事，我们只要在 末尾处的

1

GROUP BY $tablecomments.comment_post_ID ORDER  BY comment_total DESC LIMIT $limit");

的前面加上（注意空格）

1

 AND post_type = 'post'

将 wp_posts 判断为 post 的条件就行了。

最后保存修改，下回到首页即可看到效果了～

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/06/02/d-z-theme-post-type.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/06/02/d-z-theme-post-type.html/feed 88 09夏季WordPress文化衫意见征集 http://zeuscn.net/archives/2009/06/01/about-09-wordpress-tshirt.html http://zeuscn.net/archives/2009/06/01/about-09-wordpress-tshirt.html#comments Mon, 01 Jun 2009 09:55:05 +0000 zEUS. http://zeuscn.net/?p=580 去年夏末就有自己搞 T恤的想法，可惜那时夏天基本过完了，所以就把这个想法留到了今年。

前不久跟 Timer 兄说了这个事情，我们俩（总是）一拍即合，他欣然接受了设计T恤的重任！最近他完成了设计稿，然后根据我的一些小小的建议略做了修改，现在方案基本定了下来。

当然了这次的 WordPress 文化衫不仅仅是印给我们2个人穿的，我们希望跟广大 WordPress 爱好者们一起分享！但考虑到T恤的印制成本、设计成本、劳力成本，所以我们会收取一定的费用，具体的价格要等到我联系到合适的印制厂家之后才能决定。

下面是此次T恤的效果图，前胸图案的颜色采用了 WordPress 官方 的黑色和蓝色，T恤的颜色暂定为白色。这里希望能收集一下大家对T恤配色的建议，比如黑底白 、蓝底黑 等等。另外在T恤背面的领口下方会印制一个 WordPress 的官方 LOGO ，在左袖口印上自己博客的域名。T恤的面料肯定采用全棉的。

Wordpress, T-shirt, T恤

Wordpress, T-shirt, T恤

{democracy:7}

{democracy:8}

对这款 WordPress 文化衫有兴趣的朋友不妨先留个名“预订”一件，顺便留下你所能接受的价格～

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/06/01/about-09-wordpress-tshirt.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/06/01/about-09-wordpress-tshirt.html/feed 43 针对 WordPress 模板导航栏2级悬浮菜单的一个很好的解决方案 http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html#comments Thu, 18 Dec 2008 15:22:47 +0000 zEUS. http://zeuscn.net/?p=542 不知道你是否看的懂标题…

随着 越来越大众化，随着大家博客内容越来越丰富，我们对它的要求也是越来越高、越来越苛刻，很明显的一点就是很多人开始觉得 模板原始的导航菜单（只有1级）样式过于单调，输出的内容也有限，于是如何方便的输出2级导航栏就成为了一个大众化的需求。

之前，我针对 D&Z 已经有所尝试——《给 D&Z Theme 增加一个额外的悬浮菜单 》，其方法是基于小胖的《JavaScript下拉菜单》。此方法虽然可行，但存在一个弊端——2级导航菜单需要手动添加和更新！这样做的话增加了不少工作量，而且对于 WordPress 新手来说的话也有不小困难…

2级菜单

在这篇文章里，我将分享一个同样是使用 来生成2级导航菜单的方法，此方法弥补了上述的缺陷。原文详情见这里：
http://www.htmldog.com/articles/suckerfish/dropdowns/

小胖的方法之所以需要手动更新 WordPress 导航栏，是因为他的代码里给“父 li ”里写入了“onmouseover” 和 “onmouseout” 这2个行为：

1
2
3
4
5
6
7
8
9
10
11
12

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">父栏目1</a>   
   <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
      <li><a href="#">子菜单4</a></li>
   </ul>
</li>
<li><a href="#">父栏目2</a></li>
<li><a href="#">父栏目3</a></li>
<!-- etc. -->

然而 WordPress 输出页面导航链接的函数是：

1

<?php wp_list_pages('sort_column=menu_order&depth=1&exclude=&title_li=');?>

其表现出来的形式为：

1
2
3
4

<li><a href="#">父栏目1</a></li>
<li><a href="#">父栏目2</a></li>
<li><a href="#">父栏目3</a></li>
<li><a href="#">父栏目4</a></li>

也就是说这个函数输出的是一排带链接的 “li” ，因此我们就不可能把 “onmouseover” 和 “onmouseout” 这2个行为写入到函数中并让“父 li” 输出，如果要做2级导航菜单的话就需要把每个 “li” 都独立出来，这样就相当麻烦了…

不过 Suckerfish 的 Javascript 就解决了这个，它无需在“父 li” 中写入额外的内容，这样就能很好的运用到 WordPress 中来。那么 WordPress 模板导航栏部分的代码我们可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
 
<div class="nav">
    	<ul id="nav">
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="网站首页">网站首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=2&title_li=');?>
	</ul>
</div>

前半部分调用的就是 Javascript 代码，后半部分直接输出导航栏，注意到第19行中的“depth=2”，这个参数用于控制输出2层导航栏，也就是只会输出一层子菜单，改成3的话就会输出2层子菜单，以此类推。

针对上述代码，我们还需要相应的样式来控制子菜单的隐藏和显示（必须）：

1
2
3
4
5
6

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: auto;
}

其它的 样式，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#nav {
}
#nav ul {
}
#nav li {
}
#nav li a {
}
#nav li a:hover {
}
#nav li ul {
}
#nav li ul li {
}
#nav li ul li a {
}
#nav li ul li a:hover {
}

就需要根据主题的整体样式来决定了。

个人感觉，对于 WordPress 主题制作者而言，这是个不错的解决2级导航菜单的方案，对于有一定 HTML 和 CSS 基础的朋友来说，也能很方便的对模板导航栏进行改造。

希望这个方法能给大家带来便利 :smile:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html/feed 22 锚点冲突，导致博客评论分页失效 http://zeuscn.net/archives/2008/11/26/html-a.html http://zeuscn.net/archives/2008/11/26/html-a.html#comments Wed, 26 Nov 2008 07:33:25 +0000 zEUS. http://zeuscn.net/?p=533

HTML 中的链接，正确的说法应该称作“锚点”。它不仅让我们能指向文档，还能指向页面里的特定段落，更能当作“精准链接”的便利工具。

我们在编辑 HTML 页面时最常见的锚点有两种

1

<a href=""></a>

和

1

<a name=""></a>

前者用于链接，后者用于定位。

链接就不多说了，关于定位，我们用的最多的一个例子就是“返回顶部”：
一般我们在页面的顶部，例如 body 标签的下面加入一个锚点

1
2

<body>
<a name="top"></a>

然后在页脚的代码里面再加上

1

<a href="#top">返回页顶</a>

这样我们点击页脚里的“返回页顶”，那么整个页面就会直接从页脚跳到页面顶部。

感谢 Carrie 和 Jinwen 发现并告之本站的评论分页失效。

导致这个问题的是我前几日使用了一个可以使页面滚动的 Jquery JS ，这个 JS 自动给用于定位的锚点增加滚动效果，比如点击页面底部的“返回页顶”，页面就会自动的滚动到顶部（而非之前介绍过的一段代码）。

然而 WP Paged Comments 插件的翻页链接里也带有定位的锚点，比如

http://zeuscn.net/messageboard/?wpc=2#comments

末尾的 “#comments” ，所以当我点击分页链接的时候就出了问题，浏览器不知道到底是滚动呢？还是跳转到下一页呢？很明显两者之间有所冲突…

如何解决这个问题呢？我所做的就是取消了那个 Jquery JS 的调用… JS 功能可以少，但评论分页是必须的，我暂时还没有找到两全其美的办法，不知道大家有何高见？

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/11/26/html-a.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/11/26/html-a.html/feed 76 使用自定义字段给 WordPress 添加日志图片 http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html#comments Mon, 24 Nov 2008 14:13:04 +0000 zEUS. http://zeuscn.net/?p=531 自定义字段是 的一个很强大的功能，但对于普通的使用者来说用处并不大…
关于如何通过自定义字段给 WordPress 博客首页中的每篇日志添加图片的方法，网上有不少介绍。我在给 www.vcbb.net 做模板时就用到了这个效果，方法是从 jinwen 的博客中（1、2、3、4）学到的，不过 jinwen 介绍的方法我在使用过程中遇到了问题，然后就对代码进行了小小的修正和修改，最终达到了自己想要的效果：

在博客首页的每一篇日志中都会显示一篇和内容相关的图片，该图片是我事先准备好的，而非日志中的缩略图，这张图片在单篇日志的内容中可以不予显示。如果我没有为日志指定一张图片，那么自动会有一张默认的图片进行“填充”。效果如下图所示：

wordpress, 自定义字段

这里分享一下我的制作经验，以及基于 jinwen 的方法并由我略做修改后的代码。
在 index. 中找到如下或类似的代码

1

<div class="post" id="post-<?php the_ID(); ?>">

在它的后面紧接一段代码：

1

<?php $image = get_post_meta($post->ID, 'index_image', true); ?>

添加之后的效果如下：

1
2

<div class="post" id="post-<?php the_ID(); ?>">
<?php $image = get_post_meta($post->ID, 'index_image', true); ?>

这其中的 index_image 这个新的变量就是我们即将在日志中用到的图片自定义字段。
继续往下，找到

1

<?php the_excerpt(); ?>

或

1

<?php the_content(); ?>

前者是输出摘要，后者是输出全文，了解 WordPress 的朋友肯定都知道，这里就不多说了。

找到这行代码后，我直接在它的前面添加如下代码：

1
2
3
4
5

<?php if ( get_post_meta($post->ID, 'index_image', true) ) { ?>
<a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" title="<?php the_title(); ?>" /></a>
<?php } else {?>
<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/vc-default.png" title="<?php the_title(); ?>" /></a>
<?php } ?>

仔细看这段代码，这里我用了一个 if else 的条件判断语句：
第一行中，if 括号里面的条件 ‘index_image’ 如果为 true（真），也就是说，我在编辑文章时使用了这个自定义字段，那么就直接执行第二行代码：输出 index_image 这个值，index_image 的值是一张图片的绝对地址，所以我这里就直接输出了这张图片，并加上该篇日志的链接；
第三行的 else 的意思是除了第一行条件 true（真）之外（那就是假了）的话就执行第四行的代码；
第四行中我输出了一张位于主题文件夹的 images 目录下的默认的图片——vc-default.png ，同时也带上了文章的链接。

这样，必要的代码就添加完了，我们在编辑日志的时候，将页面的滚动条拉到位于页面下方的自定义字段一栏：

wordpress, 自定义字段

根据上图步骤
1、添加自定义字段名：index_image （添加过一次之后就直接能在下面的下拉菜单中选择了）；
2、添加放在首页文章里的图片绝对地址；
3、点击“添加自定义字段”的按钮。

这样，更新完日志之后就能在首页看到效果了～ 不过根据不同的博客主题，需要对这张图片进行不同的样式定义，比如 float:right 或 left ，亦或再给图片加个 border 等等，这就要看大家的想象力和喜好了。

另外在前文中提到的首页有可能是输出摘要，也有可能是全文输出，我个人的看法是：最好使用输出摘要——因为首页输出摘要时会省去文章中的图片，只保留文字内容，那么再配上这个自定义字段的图片，效果会更佳。

使用自定义字段给 WordPress 添加日志图片的方法就暂时介绍到这里，有兴趣的朋友不妨根据自己的主题模板也来折腾折腾这个效果～ 如有不清楚的地方，请在下面留言 :smile:
如果 能力强的话，完全可以根据这个功能把 WordPress 的首页，或者某个特殊页面做成“画廊”式的风格～ 以后有机会的话咱也要试试看 :cool:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/11/24/wordpress-custum-fields-pics.html/feed 27 给博客添加 Google 自定义搜索 http://zeuscn.net/archives/2008/09/18/google-custom-search-for-your-blog.html http://zeuscn.net/archives/2008/09/18/google-custom-search-for-your-blog.html#comments Thu, 18 Sep 2008 04:06:44 +0000 zEUS. http://zeuscn.net/?p=493 何为“”？

创建根据自己的需求量身定制的搜索引擎：包括一个网站、多个网站或特定网页；将搜索框和搜索结果放入您自己的网站；自定义颜色和品牌以搭配您现有的网页。

自定义搜索结果比博客默认的搜索结果要“更快，更准，更多”，无论是给读者还是管理员都提供了相当大的便利。

看猫猫用上了 Google 自定义搜索后我才想起来自己以前也搞过一个，不过不同的是之前我是让 Google 来托管搜索结果，而猫猫现在则是把搜索结果嵌入到了博客，恩，很好很强大，于是我自个儿就折腾了一下，将 Google 自定义搜索也嵌入到了博客里。具体效果您可以自行在搜索框内输入一个关键词（如：），然后回车，就能看到 Google 自定义搜索的结果了，也可以点击 这里 查看截图效果。

下面我就简单的介绍下如何为博客添加“Google 自定义搜索”功能。
访问：http://www.google.com/coop/cse/?hl=zh-CN
点击“创建自定义搜索引擎”的蓝色按钮，页面跳转之后根据页面上的要求填写各项基本信息，在最下方的“选择版本”中选择“标准版”：

Google 自定义搜索

点击“下一步”，页面跳转之后点击“完成”。然后回到 Google 自定义搜索首页，依次点击“管理您现有的搜索引擎”–“控制面板”

Google 自定义搜索

查看“基本信息”下的各个选项和“使用偏好”是否正确，点击“外观”后选择第一种无背景色的搜索框，该页面的下方可以设置“自定义搜索结果”的颜色样式，类似 Google 的广告设置，非常简单，设置成和博客相同的链接颜色即可，保存设置。
再点击“代码”，在“搜索结果托管选项”下选择“在您的网站上托管搜索结果：”–“iframe – 需要两个网页：一个网页提供搜索框，另一个提供结果”：

Google 自定义搜索

“指定搜索结果详情”选项需要填写搜索结果所在的网页地址（例如我的是 http://zeuscn.net/search）：

Google 自定义搜索

该页面的下方提供了“搜索框代码”和“搜索结果代码”，记下这2段代码，接下来修改博客模板文件。

WordPress 博客模板里一般都会包含一个 searchform. 的文件，该文件定义了博客的搜索框。我们打开这个文件，可以看到类似如下的代码：

1
2
3

<form method="get" class="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" value="站内搜索" name="s" class="s" onfocus="if (this.value == '站内搜索') {this.value = '';}" onblur="if (this.value == '') {this.value = '站内搜索';}"/>
<input type="submit" class="submit" value="GO" /></form>

和 Google 自定义搜索提供的“搜索框代码”进行比较：

1
2
3
4
5
6
7
8
9
10

<form action="http://zeuscn.net/search" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="012316757526287753200:595_iqfdr6q" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="搜索" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>

我将 Google 自定义搜索提供的“搜索框代码”中有，但是 searchform.php 中没有的代码添加到 searchform.php 中，然后另存为 google-searchform.php 文件，上传到主题目录下。修改后的代码如下：

1
2
3
4
5
6
7
8

<form method="get" class="searchform" action="http://zeuscn.net/search">
<input type="hidden" name="cx" value="012316757526287753200:595_iqfdr6q" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" value="站内搜索" name="q" class="s" onfocus="if (this.value == '站内搜索') {this.value = '';}" onblur="if (this.value == '') {this.value = '站内搜索';}"/>
<input type="submit" class="submit" name="sa" value="GO" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>

其中我去掉了 Google 提供的搜索框的样式 id=”cse-search-box” 好让搜索框的样式更符合主题的效果。不少主题的搜索框都位于页面的头部（header），那么我们打开 header.php 文件，找到如下代码：

1

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

将其修改为：

1

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

注：此搜索框的样式可能需要略微调整样式。

接下来需要做一个“搜索结果页”，先在本地打开主题文件夹中的 page.php，在文件顶部代码的前面添加：

1
2
3
4
5

<?php
/*
Template Name: Google自定义搜索结果
*/
?>

然后找到类似如下的代码：

1
2
3

<div class="entry">
<?php the_content('Continue reading &raquo;'); ?>
</div><!--/entry -->

使用 Google 自定义搜索提供的“搜索结果代码”将其替换掉。

1
2
3
4
5
6
7
8
9

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

修改完毕，文件另存为：search_temp.php （需要是 的编码），FTP 上传至主题目录下。

进入 WordPress 后台，撰写一个新页面，命名为“搜索结果”，缩略名（slug name）为：search，页面模板选择刚刚上传的 “Google自定义搜索结果”（search_temp.php），发布该页面。
此时你会发现这个页面出现在了博客导航菜栏里，一般来说我们不需要这个页面，所以就需要将其从导航栏中“隐藏”。进入 WordPress 后台，管理–页面，找到刚刚建立的“搜索结果”，将鼠标移动上去（不要点击），看浏览器状态栏的链接地址，地址的末尾有一个数字，此数字为该页面的 ID 号，例如我的是 491：

Google 自定义搜索

打开 header.php 文件，找到如下代码

1

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

将其修改为：

1

<?php wp_list_pages('sort_column=menu_order&depth=1&exclude=491&title_li=');?>

exclude 的值就是从 wp_list_pages() 函数中去除指定的页面 ID 号。保存后回到首页，导航栏里就找不到“搜索结果”这个链接了。

大功基本告成，Google 自定义搜索的搜索框和结果页全部都嵌入到了博客里，也许还需要根据博客模板的样式稍作修改。
现在你就可以直接进行搜索来看看效果了～ 以后凡是搜索的结果都会显示在 http://yourdomain/search 这个页面上，例如我的 http://zeuscn.net/search
Google 自定义搜索 还能把你的 Google Adsense 嵌入到搜索结果中去，有兴趣的朋友不妨自己研究一下～
Have fun :-)

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/09/18/google-custom-search-for-your-blog.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]>
Fatal error: Maximum execution time of 30 seconds exceeded in E:\zeuscn.net\wp-includes\feed-rss2.php on line 49

Fatal error: Maximum execution time of 30 seconds exceeded in E:\zeuscn.net\wp-includes\wp-db.php on line 502