Mar 16, 2007

WP Static Homepage

PLEASE Scroll down for Chinese version

This plugin enables the wp system to convert your dynamic homepage to static index.html, more importantly, keep the content up to date. It can speed up the loading for your homepage.

Readme:

  1. Plugin WP-Cron is needed for this plugin, I've packed WP-Cron v 1.4 in the zip file.
    Please upzip all the files to plugins/static-index, so that it look like:
    ------plugins/
    ------------static-index/
    ----------------static.php
    ----------------wp-cron-static-index.php
    ----------------wp-cron.php
  2. Active two plugins :WP-cron and WP-Cron Static Homepage.
  3. Create a file named index.html in your blog root folder, set
    666 permissions for it.

Well, the system will update index.html automatically (per 15 mins), you may hack wp-cron.php at line 49 to change the time for scheduled exection actions.

More Tips:

  1. You may use the following php to refresh homepage when comments come in.

    <?php
    include (get_settings('siteurl') . "/wp-content/plugins/static-index/static.php");
    ?>

  2. The following script is to demo how to set cookies in the html files.

    <script type="text/javascript">
    function GetCookie(sName, id)
    {
    // cookies are separated by semicolons
    var something = document.getElementById(id);
    if(!something) return 0;
    for (var i=0; i < aCookie.length; i++)
    {
    // a name alue pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
    {
    if(sName=="comment_author_10add94cfc29a64b08306c8a8f9edb30")
    something.value = decodeURI(aCrumb[1]);
    else
    something.value=unescape(aCrumb[1]);
    return 1;
    }
    }
    // a cookie with the requested name does not exist
    return 0;
    }
    //please fill in with your own cookie id
    GetCookie("comment_author_8e11b42cc2f3a74aac664cc9afa5baf7", "authorname");
    GetCookie("comment_author_email_8e11b42cc2f3a74aac664cc9afa5baf7", "email");
    GetCookie("comment_author_url_8e11b42cc2f3a74aac664cc9afa5baf7", "url");</script>

Tags:         
Post by SUN @ 5:22 pm | 与时俱进 | Comments (2)
Mar 14, 2007

推荐一款在线播放器

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

Web2.0的时代，不少人喜欢在自己的blog或者网站上放音乐，不可否认，我也喜欢。
但如何加载音乐的确是个问题，因为大多数在线播放器都会在加载该页面的同时读取相应的mp3文件，这样就降低了网页浏览速度。所以我碰到加载速度慢的mp3，一般都是直接block掉，免得影响自己的浏览速度。

这儿推荐一款flash在线播放器，flash在线播放器的最大的好处就是加载速度快，不会影响网页浏览的速度（至于音乐的加载速度，主要决定于你的带宽）。
如果你是wordpress的用户，我推荐你安装XSPF_Player插件。

如果你的blog不是wordpress系统或者你想在自己的其他网页上添加播放器，请用如下的代码：

<object type="application/x-shockwave-flash" data="http://www.znsun.com/Music/player_mp3_maxi.swf" width="200" height="20">
<param name="wmode" value="transparent" />
<param name="movie" value="http://www.znsun.com/Music/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=歌曲地址栏&amp;bgcolor1=ffffff&amp;bgcolor2=cccccc&amp;buttoncolor=999999&amp;buttonovercolor=0&amp;slidercolor1=cccccc&amp;slidercolor2=999999&amp;sliderovercolor=666666&amp;textcolor=0&amp;showvolume=1&amp;autoplay=0&amp;loop=0" />
<p>Texte alternative</p>
</object>

注：
上面包含了两段播放代码，针对不同的浏览器有效，满足不同人士需要啦。
这个播放器本身是在我网站上的，你可以下载后再上传到自己的网站上。
其中

  1. 歌曲地址栏请包含完整的歌曲 URL代码
  2. &autoplay=0 用来控制是否自动播放(1为自动播放)，如果不需要请删除此部分代码。
  3. &loop=0用来控制是否重复播放(1为重复播放)，如果不需要请删除此部分代码。

更多的参考请参阅：http://flash-mp3-player.net/

最后的实际效果见下，自动播放被我取消了，请自行点击开始欣赏。

Texte alternatif

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

PHP判断浏览器类型和浏览器语言

用php语言来判断浏览器类型其实很简单。
因为浏览器在和服务器连接时候都会先发送一些包含自己信息的内容（浏览器类型、语言啦）。

这里我们主要分析的是_SERVER["HTTP_USER_AGENT"](浏览器类型)和_SERVER["HTTP_ACCEPT_LANGUAGE"](浏览器语言)。

我们所要做的就是把这些内容读出来，然后用strpos或者preg_match函数来对比就可以了。

判断浏览器类型:

<?php echo $_SERVER["HTTP_USER_AGENT"]; ?>

判断浏览器语言:

<?php echo $_SERVER["HTTP_ACCEPT_LANGUAGE"]; ?>

判断浏览器类型的具体程序如下:

<?php
if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 8.0"))
echo "Internet Explorer 8.0";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 7.0"))
echo "Internet Explorer 7.0";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 6.0"))
echo "Internet Explorer 6.0";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/3"))
echo "Firefox 3";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/2"))
echo "Firefox 2";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Chrome"))
echo "Google Chrome";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Safari"))
echo "Safari";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Opera"))
echo "Opera";
else echo $_SERVER["HTTP_USER_AGENT"];
?>

判断浏览器语言的具体程序如下:

<?php
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 4); //只取前4位，这样只判断最优先的语言。如果取前5位，可能出现en,zh的情况，影响判断。
if (preg_match("/zh-c/i", $lang))
echo "简体中文";
else if (preg_match("/zh/i", $lang))
echo "繁體中文";
else if (preg_match("/en/i", $lang))
echo "English";
else if (preg_match("/fr/i", $lang))
echo "French";
else if (preg_match("/de/i", $lang))
echo "German";
else if (preg_match("/jp/i", $lang))
echo "Japanese";
else if (preg_match("/ko/i", $lang))
echo "Korean";
else if (preg_match("/es/i", $lang))
echo "Spanish";
else if (preg_match("/sv/i", $lang))
echo "Swedish";
else echo $_SERVER["HTTP_ACCEPT_LANGUAGE"];
?>

这是根据上面的代码做出来的一个小程序:
www.znsun.com/Download/test.php
判断浏览器类型主要是靠分析_SERVER["HTTP_USER_AGENT"]的内容，而分析浏览器语言则是分析_SERVER["HTTP_ACCEPT_LANGUAGE"]。

Tags:   
Post by SUN @ 12:44 am | 与时俱进 | Comments (8)
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)
Mar 7, 2007

丽娃河上的文化幽灵(张闳)

高中同学转来篇文章，才发现自己在华师大旁边待了这么久，却不知道华师大周围还有牛人。有点儿共鸣的就是那记忆中的后门了。

【引子】从1990年代初的宋琳、夏志厚的离去（宋现居巴黎，夏去向不明，据说在美国从事IT业），华东师大中文系的学术精英开始令人痛心的流散。胡河清的自杀，徐麟等毕业生的离开（徐一度找不到工作，在学校游荡了一年，最终为湖南师大收留。陈福民在中国社科院工作。张柠去了广东省作协。崔宜明先是留校，后去了上海大学。其他人如李洱、叶开、余弦、师涛等人，亦纷纷毕业，或回家乡工作，或去了媒体），李劼、格非、宋耀良等年轻教师的相继离去（李、宋去了美国，格非在清华大学），华东师大中文系越来越显出衰败的迹象。直到21世纪初，随着王晓明和夏中义的离去（王被上海大学以高价“收购”。夏则去了上海交大），使得华东师大中文学科的末路走向了一个低谷，这被互联网网友称之为“学术崩盘”。长达十数年的慢性失血，中文系苍白的嘴唇已经发不出任何响亮的声音。只能在日益僵死的学院制度下嚅嚅嗫嗫，苟延残喘。……

  • 第一章：记忆的后门

后门文化

我的记忆属于后门。

回忆需要从后门——而不是前门——开始。大学的后门就是大学记忆的策源地，那里隐藏着一个大学的精神秘密。我甚至坚信，一所好的大学首先得有一个好的后门。

上个世纪的80年代至90年代的华师大就有这么一个神奇后门。围绕着它所形成的一种奇特的“后门文化”，是我们理解华东师大这所令人怀念的学校的魅力所在。它与前门形成了强烈的反差。今天的华东师大有一个器宇轩昂的前门，宏大，高耸，而且堂皇。这正符合它所要向人们昭示的一切：它提醒着学校的气派和严肃性。现在正门前还有高架路，有一个主要的街道，某种程度上是被赋予了交通要塞性质的正门，此时就与这个城市构成了一种正面的关联。前门是学校的正面形象，它更多地属于学校当局，属于行政权力机构，所以它才需要冠冕堂皇，才会有日后为通行权利问题而引发的“校门风波”。而后门，则是属于广大学生自己的。

后门通向一条小街——枣阳路，其终端是长风公园。在一般的上海市区地图上，这条小街上只有一段没有名字的白线，仿佛这座城市赘生的一段阑尾。而我们的存在使他经常发炎。我们在那喝酒，闲聊。一瓶啤酒，一碟盐水花生就足以让我们打发小半天的时间。我们可以用饭菜票付账。只有在这种酒店里，学校食堂的饭菜票才会通用。有一次，我们拎了一塑料袋的硬币，全是那种分币，哗啦啦到在柜台上付账。老板无奈地嘟着嘴，慢慢地数着。

对于我们而言，后门永远是敞开的，这与监护严格的正门形成对照。后门的开或关，对于我们来说没有太大意义，通宵营业的小店要招待半夜爬墙过来的学生。能否熟练地翻越那道铁门，几乎是检验是否为华东师大学生的测试题。爬门已构成了我们校园生活中非常重要的一部分，构成我们与学校之间异常关系的象征。

后门文化也成了我们校园生活的物质化的一面。后门最重要的特征是杂乱无章。破败的小店，杂乱的地摊，胡乱吆喝的小贩，漫无目的的游荡者……贫穷的大学生口袋空空，却乐于在这里游荡，使得整个后门显得拥挤而又热闹非凡。尤其是在黄昏课余时，那里的拥挤程度不亚于南京路。贫穷的学生们以自己空荡荡的口袋跟这座物质发达的城市之间构成了一种直接而又简单的联系。因此，在后门的街道上形成了与其实质极不相称的畸形的繁华。

(more...)

Tags:
Post by SUN @ 4:52 pm | 他山之石 | Comments (2)