去除链接中的"index.php"让WordPress实现全站AJAX

Ajax-wp是一个能让Wordpress实现AJAX化的一个插件，安装方便有快速和定制两种方式，当前版本为0.85。效果可见这里，我使用的是“定制”方式，点击链接时可以实现不用导入页眉、页脚和侧边栏，关于该插件的安装请看原文，在这里就不多说了。

作者的说法是所有链接结构Ajax-wp都可以支持，但是我使用“基于日期和名称”或“数字”时，该插件都会出现BUG，不知道大家有没有碰到这种情况，所以只能使用默认的链接结构了，也就是"homeroot/?p=123"的形式，但是使用这种结构时，页面导航都调用不了该插件，而要接所有的JS文件再LOAD一遍。

禁用该插件后，查看页面导航的链接发现是因为页面的链接使用了"homeroot/index.php？paged=X"的形式，因此只要删除"index.php"这几个字符也即改为"homeroot/?paged=X"的形式就可以让Ajax-wp发挥作用了。Google和Baidu了一圈都没有发现好用的解决方法，只能自己动手了。打开链接模版，路径在"/wp-includes/link-template.php"，页面功能的函数为"function get_pagenum_link"，研究了半天发现在这个函数里本来就有一句

$qstr = preg_replace("#/*" . $index . "/*#", '/', $qstr);
开发者在注释里说明这句的作用就是"trim the index":)。于是可以在后面加上这一句话，不论前面的$qstr如何替换，到最后把$index剪掉再赋值给$qstr就可以实现效果了。加入的位置见下面红色代码

if ( 1 === $pagenum ) {
$qstr = str_replace('page/1/', '', $qstr); // for mod_rewrite style
$qstr = remove_query_arg('paged', $qstr); // for query style
}
$qstr = preg_replace("#/*" . $index . "/*#", '/', $qstr);
return $qstr;
}
保存完成，体验一下什么叫Web2.0吧。除了评论基本上已实现AJAX化，AJAX评论的插件都与Ajax-wp有冲突，所以还是将就吧。另外把53K的protoype.js文件改为protoype.php让wordpress进行压缩，httpwatch测试了一下，文件大小减小为12K，传输时间大大减少。虽然这种方法让该文件要通过解释器解释，但是只读取一次，折衷吧，而且可以在浏览器CACHE调用。压缩的方法请见这篇文章，在这里不多说。

阅读全文↓

阅读摘要↑

精简BLOG

因为感觉打开BLOG太慢，刚刚把AJAX搜索和AJAX标签删了。毕竟BLOG最重要的是内容而不是花哨的功能，牛人自牛，不用靠点缀。还是少用点JS，网页速度快了，大家心情也好一点，多点击一下鼠标多用一下滚轮累不死人。简单才是生活的真谛。

阅读全文↓

阅读摘要↑

BLOGGER上的AJAX应用

注意添加这两个效果之后，博客打开速度有所下降，记得装酷是要付出代价的。

1.Ajax搜索
原作者GG派，我把代码删减了，只留下博客的搜索结果，算是大材小用了：），要加上其他内容请查看原文。
第一步：点击这里，输入你的博客地址，同意google条款，申请一个google AJAX API key。
第二步：COPY下面的代码，放在 ]]></b:skin>之后，</head>之前
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet'
type='text/css'/>
<style type='text/css'>
.gsc-control {
width: 95%;
}
</style>
<script src='http://www.google.com/uds/api?
file=uds.js&v=1.0&key=你申请到的KEY' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
// web search, open, alternate root
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere_else"));
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("你的博客名称");
blogSearch.setSiteRestriction("http://你的网址.blogspot.com");
searchControl.addSearcher(blogSearch, options);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("search_control"));
// execute an inital search
searchControl.execute(initSearch);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
第三步，切换到页面元素，弹出消息框，确定忽略，烦人的是以后到这里都会弹出这个消息框。
新建两个页面元素，放进以下代码：
下面代码放进的页面元素显示搜索框，可以改为任意你喜欢的图片，或者不显示任何图片：
<div id="search_control"><img
src="http://jrchen@82.googlepages.com/wbbar.gif"/></div>
下面代码放进的页面元素显示搜索结果，同样可以加入HTML语言：
<div id="somewhere_else"></div>
保存完成。

2.Ajax 标签
原作者Deepak，点击这里查看原文，由GG派改进。
第一步：COPY 下面代码 ，放在 ]]></b:skin>之后，</head>之前：
<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:white;border:1px solid #AAAAAA;width:180px;left:55%;text-align:center;}
* html #indicator{ /*IE6 only*/
position:absolute;
}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:128%;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;font-weight:bold;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.2em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script src='http://jrchen@82.googlepages.com/prototype.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// 用户自定义参数
// ----------------------------
var maxresults = 5;//每页打开的文章数
var navFlag = 1; //是否打开翻页功能，不打开设为0
var feedLabel = "Subscribe to";//RSS标签文字
var catLabel = "Sorted into:";//描述分类标签文字
var closeLabel = "Click to close";//关闭按钮文字，可以使用HTML语言
//]]>
</script>
<script src='http://jrchen@82.googlepages.com/ajaxla.js' type='text/javascript'/>
第二步：找到下面的代码：
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
替换为：
<b:loop values='data:post.labels' var='label'><a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>
找到标签元素的类似代码（没有添加标签元素的话先添加再修改）：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>
替换为：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>
第三步，增加一个新的页面元素用来显示点击标签后的结果，建议放在帖子上方。
页面元素内部添加代码如下：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div></div>
保存完成。

阅读全文↓

阅读摘要↑