Mar 13, 2007

Google AJAX Search 使用简介

无意中发现了Google提供了AJAX Search功能，可以适用于各大Blog（包括wordpress，blogspot，自制网页,等等），随即用Google大神搜索了一下。结果我发现网上有不少相关的文章，但是适合我的一个都没有，于是我自己动手把这个功能加到blog中，具体效果请试用左侧的搜索栏。本着共享的原则，将方法写在这儿，给大家一个 参考。

Google AJAX Search的功能非常强大，可以搜索网页、地图、新闻、书籍等等。但是我觉得对一个blog搜索来说，只要有本站搜索和网页搜索两项就足够了；另外，现在的blog多会采用两栏或者三栏的布局方式，因此，我也选择了将搜索栏和搜索结果分开显示的方法，合理的利用空间，如果你希望添加更多的内容，请参见Google AJAX Search documentation。

首先你要做的是去Google的网站申请一个Google AJAX Search API，点击左下角的确认框，并且输入你的blog地址后，你会得到一个长长的Key。

Tags:       
Post by SUN @ 12:23 am | 与时俱进 | Comment (1)
Mar 10, 2007

优化Wordpress-wp终极优化手册

本文已于2009年08月21日再次更新

更新：关于wp-cache的优化，请参见本站新作：
 优化WP-Cache：Wordprss优化手册(2)

Wordpress的功能非常强大，诸多的插件、花哨的界面，使得它的读取速度也大大降低。因此，如何优化以加快访问者的浏览速度便成了wper们思考的问题。我将诸多高手的方法进行了整理和总结，再结合自己优化的经验汇成此文，希望能对大家有所帮助。

To be, or not to be: that is the question：
这是我想讨论的第一个问题----就是有没有必要做优化。在我看来，绝大多数个人博客是不需要做优化的。花很多时间对一个日访问量不到100的博客做优化还不如花这点时间来好好充实自己的博客内容。
在准备自己的个人博客时最应该考虑的有2个问题。

  • 首先是选一个合适的Linux主机。
  • 其次尽可能使用最新版本的WordPress，新版本在后台有很大的改进，方便你自己使用、更新。

当你博客的访问量稳步上升后，优化才是你应该考虑的问题。

  1. 优化所有的图片（images）：
    图片其实是影响网页读取速度的关键，稍大一些的图片就可能达到100K；因此，在上传自己的图片之前，务必用Photoshop的"保存至网页"（save for web）功能，对图片进行优化。（例如，保存成GIF, PNG格式等等）


  2. 关闭一切不必要的插件(plugins)：
    在安装插件之前，首先问一下自己，你是否必须要此插件。尽可能的减少插件数量。


  3. 开启缓存(Cache)功能：
    • 首先你可以开启WordPress自带的缓存功能：
      打开WP根目录下的wp-config.php文件，在最后一行之前添加 define('ENABLE_CACHE',true);
      将WP-content目录下的cache目录属性改为777，以保证系统能够写入cache。
    • 如果您的blog日访问量在200以上，建议安装WP-Cache或者WP Super Cache插件，否则不推荐使用。我自己使用的是WP-Cache。
    • 让WP-Cache也用上Gzip：
      如果你安装了WP-Cache，一定知道WP-Cache要求必须关闭WP的内置GZip功能，但是我们可以在wp-cache-phase1.php中添加代码来实现Gzip压缩功能。 打开wp-cache-phase1.php，大概在35行左右找到如下代码：

      foreach ($meta->headers as $header) {
header($header);

      在此代码前添加下面的代码：

      if ( extension_loaded('zlib') ) ob_start('ob_gzhandler');

  4. 减少HTTP请求---合并JS和CSS文件:
    不少插件都有自己的JS文件，系统在读取这些文件时候会产生大量的http requests，产生的延迟约为0.2秒/个。因此将所有的JS和CSS文件合并，会减少很多HTTP请求，大大加快页面的读取速度。
    但是我不建议大家自己手动合并代码，这里我采用的是阅微堂的合并的方法 。
    具体是建立一个新的all.js.php文件，内容是：

    <?php
require_once('目录/wp-blog-header.php' ) ;
include ("/blog/a.js" ) ;
include ("/b.js" ) ;
?>

    其实就是将header.php里面的那些js文件都include到all.js.php，然后在header里面包含all.js.php文件即可：

    <script xsrc="all.js.php" type="text/javascript"/>

    另外还要做的一件事情是需要把原来那些js文件从head里面去掉。通常这些js文件都是通过 

    add_action('wp_head','fun' );

    这样的钩子添加到head里面的。在function函数的定义处去掉对应的代码，或者直接把这条语句删除即可。
    对CSS文件也可以用同样的处理方式。CSS文件一般都不多，这时候可以直接手动把它们都贴到一起。 另外js文件的载入位置也很重要，放在越后面越好，让浏览器先下载html代码。像Google Analytics的js代码最好放在文件最后。

  5. 合理放置css文件和js文件：
    一般来说，css文件放在页面头部，而JavaScript脚本则最好放在页面尾部，让浏览器先下载html代码。像Google Analytics 或者Google Ajax Search 这样的大型js代码最好放在文件最后。
  6. 压缩代码：
    1. 在管理界面的 Options->Reading选项中，开启WP自带的压缩功能(WordPress should compress articles (gzip) if browsers ask for them)
    2. 利用CSS 优化工具压缩CSS代码，注意。为了方便自己编辑，最好保留一份未经过压缩的代码。
    3. 利用Shrinksafe 压缩JS代码，同样的，最好保留未经过压缩的JS代码，以便将来更改时候便于阅读。
  7. 静态化处理：
    为了免得生成太多的文件，我只对首页做初始化。其实这个想法和用WP-Cache差不多，所不同的是 WP-Cache生成缓存页面是靠浏览完成，而我说的方法却是由服务器来完成。我的网页中，Comments都是用javascript实时显示的，所以我要做的只是在更新或添加post后刷新一次主页。所用的程序如下： 
    <?php
function wwwcopy($link,$file)
{
$fp = @fopen($link,"r");
while(!feof($fp))
{
$cont.= fread($fp,1024);
}
fclose($fp);
$fp2 = @fopen($file,"w");
fwrite($fp2,$cont);
fclose($fp2);
}
//Example on using this function
wwwcopy("您的动态网页（如http://blog.znsun.com/index.php）", "放置静态网页的绝对地址（如/home/znsunima/public_html/wordpress/index.html）");
?>

    记住要把index.html的属性设置成666，这样结果就是别人访问你的网站时候，会直接先读取静态的首页，大大加快了速度。

    当然，如果你需要更多静态化页面的帮助，也可以考虑安装 cos-html-cache 这个插件。

  8. 利用Gzip对css、js还有html文件进行压缩：
    这步其实是第六步的延续，因为gzip的压缩比很好，以至于我们可以不用预先压缩css和js代码就可以达到很好的压缩比。
    首先建立一个文件style.css.php，放在自己的theme目录里面。然后在header.php文件中把读取style.css改为读取style.css.php。 随后在style.css.php文件添加如下代码：

    <?php
if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
header("Content-type: text/css");
# echo the file’s contents
include($_SERVER['DOCUMENT_ROOT']."/wp-content/themes/default/style.css");//请自行更改css文件位置
if(extension_loaded('zlib')){ob_end_flush();}
?>

    js文件的压缩方法相同，把all.js改名all.js.php，然后将上面要添加的代码中的text/css改成text/javascript即可。

    而html文件，可以用rewrite的方法，比方说我的index.html事实上是利用php读取的index2.html规则，请在.htaccess文件中添加如下代码：

    RewriteRule index.html /readhtml.php [L]

    readhtml.php文件的内容和之前读取css文件的类似：

    <?php
if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
header("Content-type: text/plain");
# echo the file’s contents
include($_SERVER['DOCUMENT_ROOT']."/index2.html");//请自行更改html文件位置
if(extension_loaded('zlib')){ob_end_flush();}
?>

  9. 利用Image Map减少meta部分的image读取量：
    本部分比较复杂，如不懂可跳过。
    在阅读这部分内容之前，你可以点一下这个链接。Image
    你所看到的就是我这个博客使用的背景图。其实现原理就是把一些常用的image用一个大的image来代替，并且在css文件中设置为背景。然后利用div的控制实现鼠标的悬停指向。

    这里以我siderbar下方的meta图标为例。
    我使用的Two Columns的模版，因此，除了index.php文件外，还会有一个siderbar.php文件，meta信息都会放在这个文件中。一般我们在 meta部分会添加不少图标，所以我们可以将不同的图标放到一个大的gif文件中，然后利用Slice Tools对图片进行分割。

    分割完成可在每个Slice上右击鼠标，读取Slice的属性，记下 下图中的X,Y,W,H坐标值。
    如图所示的就是图标Creative Commons的坐标(可点击看大图)。

    接着在CSS文件中建立一个class

    .creativec	{
float:left;
margin-top:2px; //可自己更改
margin-left:0px; //可自己更改
background: url(images/bg.gif) no-repeat -41px -82px; //前者为X坐标，后者为Y坐标
width: 110px;
height: 29px;
}

    有人还会在上面这段css定义中添加一句：

    text-indent: -9900px;

    主要用来将文字隐藏，但我不建议这样做，这样的话，在firefox中点击会出现长长的虚框，影响美观。
    我的做法是此链接的title文字部分，用“&nbsp;”。回到我的例子，我们就可以在sidebar.php添加如下的信息。注意我在写它的title时候用的是空格符号&nbsp;。

    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="Some Rights Reserved" class="creativec" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a>

    把所有你会用到image都用这种方式修改。上传更改过的所有文件，重新读取，你会发现你网站loading的速度会快很多。你可以按照每个image所产生的http requests约为0.2s来计算。

    阅微堂还给出了一个全站静态化的绝好方法，值得借鉴，尤其是java读取cookie的方法，相信对不少人都会有用。

    还有一些方法或需要服务器根目录的读写权限，或者需要数据库的root权限，不具有普遍性，就不列出了。

    参考资料：

    1. 阅微堂：加快WordPress的页面生成和载入速度
    2. 4+1 Ways to Speed Up Wordpress With Caching
    3. 5 Ways to Speed Up Your Site

Tags:   
Post by SUN @ 10:35 pm | 与时俱进 | Comments (47)
Feb 28, 2007

WP-Cache Plugin Bugfix for blank page

Must say, WP-cache is very powerful tool~, if you didn't install it, just try~
I found this bug when I installed WP-Cache yesterday. it took me half an hour to find the problem, so I'm going to write down this entry to help you out.

Encoding Issue
After installing and enabling WP-Cache, you can only see a blank page with IE but all your pages can be seen with firefox, then you have a problem, you have to change the encoding manually to figure it out. (if you cannot see any page with IE or firefox, please check this link).

So here comes the solution, very simple...

  • 1. Open up the WP-Cache folde, and you can see a file named "wp-cache-phase2.php".
  • 2. Open it up, and do a search for “$value = "text/html; charset” (about line 231).
  • 3. Once you find it, simply replace the whole line ($value = "text/html; charset=\"" . get_settings('blog_charset') . "\"";)
    with the following line:
$value = "text/html; charset=" . get_settings('blog_charset') . "";

4. Now, save, re-upload, sure, you must overwrite the old file. then empty the cache files.

Tips:
It happens coz the old file has two extra double quotation marks so that IE cannot recognize the correct encoding.

Tags:
Post by SUN @ 8:53 pm | 与时俱进 | Comment (1)
Jul 27, 2006

用Custom Field控制Google广告

关键字：Google Ads, Custom Field, Wordpress, get_post_meta()函数

Wordpress是目前最强大的免费动态blog平台，它模块化的结构也方便高级用户进行必要的定制。
今天，我就利用它的Custom Field做了一个对单独Entry的Google广告控制模块。
过程很简体，会的5分钟内就能搞定。

1.首先，要发布Google广告，必须要去Google Adsense申请一个帐号；另外，本方法针对单独entry操作，因此需要模板文件中有针对单一entry的模板（如single.php）。

2.根据Google自己的统计，和文章内容镶嵌在一起的广告会得到较高的点击率，所以我建议在豆腐块文章中，各位站长应该使用125x125或者是120X240的小广告，以便能和文章镶嵌；至于镶嵌的代码，我采用表格嵌套的方式（如下图所示）。

3.利用Wordpress的Custom Field新建一个key，取名为no_ads。当不需要显示Google广告时候，可设置为1，其他情况则无需填写该项值(关于更多custom field的知识请点击本条目前面的链接)。

4.具体代码替换见下：
  1)打开single.php，找到显示entry内容的语句
<?php the_content(); ?>
  2)将该语句替换为如下语句

<table width="655"> <?php //the big table for content, please change the width by yourself ?>
        <tr><td valign="top">
                <?php if (get_post_meta($post->ID, no_ads, true)==false) //利用custom field中的no_ads项来判断是否需要显示Google广告
                {
                ?>
                        <table width="130" align="right">
                        <tr valign="top" align="right"><td>
                        <script type="text/javascript"><!--
                                google_ad_client = "pub-XXXXXXXX"; //你能从Google adsense得到自己的client代号，下面广告的颜色参数请自行更改
                                google_ad_width = 125;
                                google_ad_height = 125;
                                google_ad_format = "125x125_as";
                                google_ad_type = "text_image";
                                google_ad_channel ="";
                                google_color_border = "888888";
                                google_color_bg = "555555";
                                google_color_link = "FFCCFF";
                                google_color_text = "FFFFFF";
                                google_color_url = "FFFF99";
                                //--></script>
                                <script type="text/javascript"
                                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                                </script>
                        </td></tr>
                        </table>
                <?php
                }
                ?>
                <?php the_content(); ?>
</td></tr>
</table>

实际的结果，在我blog上就能看到。本entry单独打开时能看到右侧的Google广告，而另一个entry中，no_ads的值设为1，点击后可以看到google 广告没有被显示。

Tags:     
Post by SUN @ 1:39 am | 与时俱进 | Comment (0)
Mar 8, 2005

[电脑] 用好你的trackback

在你的Movable Type环境下，编辑你的Blog，可以实现网站之间的互相通告，也就是从一个web服务器发送到其他的服务器的短消息(a small message)。
这是一个为自己的网站做广告的极好方法。
“A Beginner's Guide to TrackBack”一文，对在MT中如何使用TrackBack做了详细地说明，下面就是学习笔记。

什么是TrackBack?
　　简单说来，TrackBack被设计用来提供一种方法以实现网站之间的互相通告：它是一种方法，能让甲对乙说（甲、乙指两个人，下同），“这篇文章可能是你感兴趣的”。要实现这个动作，甲向乙发送一个TrackBack ping即可。
　　TrackBack ping:在这种情况下，一个ping就是一条从一个web服务器发送到另一个服务器的短消息(a small message)。
(more...)

Tags:
Post by SUN @ 3:14 pm | 与时俱进 | Comment (0)