WP 主题中添加 AJAX 响应

为 WordPress Theme 添加可在匿名(未登录)情况下访问的 AJAX 响应,网上资料很凌乱,遂自行记录过程如下。

1. 首先确保主题中有 jQuery 库(似乎这已是各小型网站的标配),没有的话可以在主题 header.php 文件中添加:

2. 然后需要在页面中插入当前网站的 URL 信息,这个信息可以通过如下代码:

如此一来系统将自动在页面中返回 admin-ajax.php 的网络路径了:

于是在将来自己写的 JS 代码中,只需要调用 MyAjax.uri 就能获取到 admin-ajax.php 文件的地址了;

3. 在 function.php 中添加准备用来响应 ajax 请求的 function:

4. 然后开始添加 JS 代码,发送 AJAX 请求,这个放在主题的相应 js 文件里面就行了:

code on Gist

部署完毕,更多内容请参见官方文档

ShadowBlue 0.9 Beta

ShadowBlue 是我 2010 年 1 月份制作的一个 WordPress 主题,经过了这些年的修修补补,最近终于决定捯饬一下准备上传到 WordPress Index 了。主题截图

主题建了这么久,也积攒下来一大堆 Bug,刚开始做主题的时候编码水准比较幼稚,所以连修复 Bug 加重构一并做了,还对 IE 上的效果进行了一定的简化(计划逐渐实现在 IE6 上的裸奔);逐步完善了后台中的主题设置功能,基本已可实现普通的功能选择不需要修改源码的效果。

上传主题到官网上挺麻烦的,要按照规矩 Debug 代码,很多方法和语句什么的都要重构,源码里还不能用中文,需要全部改英文再拿 PO 文件做 Localization 本地化,一大堆麻烦事。

功夫不怕有心人,一项项地改,总能把问题解决,于是乎,ShadowBlue 0.9 Beta 隆重出炉,源码已上传至官网,坐等审核中。

感兴趣的朋友可以移步 开发页面 一看究竟,心急的朋友可以直接访问 项目页面

PS:ShadowBlue on wordpress.org is almost there ~
坑爹的 wordpress.org ,提出了很多我无法接受的要求,比如只能使用 wordpress 自带的 jquery 库等,还有很多规范化的要求会增加过多的工作量,所以提交到官网的计划正式宣告无限期搁置了。现阶段还是老老实实 host 在 github 上好了。

在 WordPress 中为搜索用户提供向导

本站很多流量都来源于搜索关键词“糖醋排骨”,我想大部分人搜索这个词应该是想要学做菜的,于是便建立了一个专页,可是在搜索引擎中,此关键词与本站相关的结果链接指向首页,所以我有必要将这些流量导入到正确的流量中,旋即我就为搜索用户提供了一个向导功能。

功能还算简单,当用户通过搜索引擎来到本站后,获取其搜索关键词:如果关键词是“糖醋排骨”,则跳转到专页,如果是别的,则在页面顶部提供一个更多内容的搜索链接。

有一个 WP 插件名叫 Landing Sites 也是干这个的,不过好像很久没有更新了,而且是老外写的不太符合天朝的搜索引擎市场状况,再加上这功能并不复杂,所以也就不装插件自己写好了,以下是具体实现的方法:
继续阅读“在 WordPress 中为搜索用户提供向导”

在 Windows 上使用 YUI Compressor

我们经常可以看到网上提供的各种 JS 库会提供压缩版(主要压缩 JS 和 CSS),他们其实就是用 Closure Compile 或者 YUI Compressor 等压缩工具压缩过的。我用过 Closure Compile 和 YUI Compressor,感觉压缩后大小差不太多,但是 YUI 兼容性更好一些,所以本文只介绍 YUI Compressor。我们将要实现的是,无需输入命令,直接用鼠标操作进行文件的压缩。参照以下步骤:

1. 安装 JDK(下载) 并 配置 JAVA_HOME 环境变量
2. 下载包含有 YUI Compressor 的 Windows 安装包(最新版下载 | 备用下载);
3. 解压,打开 install.cmd (Window Vista/7/8 及以上请使用管理员权限打开),安装成功;

yuicompressor 文件夹内有一 test.js 和一 test.css,可以在文件上点击鼠标右键,会出现 Process with YUICompressor 的选项,点击看看效果吧。Enjoy~

QQ 旋风霸占 443 端口问题

在 Windows 上既使用 QQ 旋风又使用 XAMPP 的朋友,可能也遇见过 QQ 旋风打开之后 Apache 无法启动的情况。

搜索了一下,原来是霸道的 QQ 旋风把 443 端口霸占了(via),之前各种下载软件霸占 80 端口这问题倒是好解决,把软件里面的 BT 端口换一个就成了,可是这个 443 端口,貌似是固定的,反正在 QQ 旋风里面是改不了,而为了离线下载又不能换用别的下载软件(屌丝是没钱冲会员的),如此一来只有修改 Apache 了。

443 端口一般是用来走 SSL 的,由于 XAMPP 只是本地测试用,SSL 关掉就是了:
1. 打开路径 path-to-xampp\apache\conf\httpd.conf;
2. 搜索 ssl ,大概在第 125 行,把那行代码注释掉,以下是修改后的:

3. Apache 可以打开了

Apache 打开了,继续苦逼地工作吧~

Windows 上使用 Github 手记

本准备玩一下 Google Code 上的 Git ,孰料 Google 提供的这个服务极其蛋疼,也许是本人才疏学浅吧,那个莫名其妙的 .netrc 文件就是不能让我免于在 pull/push 时输入密码,各种文档和解释也是含糊其辞,忍无可忍,纵然作为一名 Google 粉丝,我也只有投入 Github 的怀抱了(当然,该使用 SVN 的地方还是继续)。直接进入正题吧,首先是环境的搭建(本人使用的是 Git + msysgit + TortoiseGit + Putty 的组合):

1. 先下载所需要的安装程序:Gitmsysgit、TortoiseGit(32bit64bit)、Putty (以上均为官方下载链接,如担心有毒请自行Google);
2. 顺序安装以上下载的程序(先关闭所有的窗口,360会报不安全,信任就好),基本就是一路Next了,这个没啥好说的;
3. 注册一个Github帐号:https://github.com/plans,不必理会那些Plans,免费账号就可以创建无限制的开源项目了,只是容量小点(300M,不知道是每月还是总共,反正小项目来说是够用了);
4. 创建一个新的项目:https://github.com/repositories/new
5. 在开始菜单中找到Putty的文件夹,打开PuTTYgen(密钥生成器),点击生成,然后出来一个类似于这样的东西(公钥):
PuTTY密钥
点击保存私钥,随便起个名字随便放在哪(无视关于叫你填写密码的提示);将图中显示的公钥复制,打开Github中Account Setting页面里的SSH Public Key 选项卡,选择 Add another public key ,将刚才复制的公钥复制进去,随便起个名字,提交;
6. 在开始菜单中找到Putty的文件夹,打开 Pageant ,选择增加密钥,把刚才保存的那个后缀名为 ppk 的私钥导进去;
7. 在 Dashboard 页面的 Your Repositories 栏目下可以找到自己创建的那个项目,点击进去。能得到该项目的 Git 地址,比如我创建的 Shadowblue 地址就是:

找到你要放置项目的地方,右键选择 Git Clone , Url 处填入刚才那个地址,点击 “OK” ,项目就应该在本地成功建立了。

然后就是使用了:

1. 在本地项目目录中添加或进行改动以后需要先 Commit(你也可以用命令行,不过我这里示范时使用右键菜单中的 Git Commit -> “master” ),选择需要提交的改动,点击“OK”,这个时候项目的版本就在本地维护起来了;
2. 选择右键菜单中的 Git Sync .. ,在出现的界面中先选择 Pull,然后 Push,全部顺利的话,就会将本地的版本管理与服务器上的同步了。
3. 使用的时候稍显蛋疼的是每次开机或退出Pageant以后都要重新打开它并导入密钥以后,Git的验证才能通过,不像TortoiseSVN是自动保存的(可能是我没研究透彻吧)在TortoiseGit -> Setting -> Remote -> origin 下的 Putty 项中通过浏览加载先前保存的 ppk 文件并保存,Sync 的时候勾选 Autoload Putty key 选项,每次就会自动打开pageant载入key了;
4. 当服务器上的代码有变更以后,本地必须先 Pull 以后才可以 Push ,有效地避免了 SVN 上你刚上传一个东西,就被别人覆盖掉的坑爹情况,麻烦就麻烦一点吧,习惯就好;
5. 推荐使用 WinMerge 取代 TortoiseGit 自带的 Merge 工具,因为自带那个太蛋疼了。WinMerge 安装以后,在 TortoiseGit -> Settings 中,将 External Programs 下的 Diff Viewer 及 Merge Tool 中的 TortoiseMerge 改为 External ,下面填写 WinMergeU.exe 的路径即可,比如:

当然你如果觉得自带的 Merge 工具更好那就当我这条没说吧~
6. Have fun with Git ~

PS:这里不想讨论 SVN 与 Git 孰优孰劣的问题,有此兴趣的朋友请绕道。

图片预读

尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题,但有些情况下依然需要使用JS脚本的手段来实现图片预读。

以下是基于jQuery实现图片预读的方法(用jQuery只是为了方便,你也可以使用原生js或者其他类库),以下代码请放入js文件中或者 <script/>块里(事先请保证已加载jQuery类库):

调用的时候,使用以下代码:

如果不喜欢使用jQuery,那么可以将这个方法改写为:

用DD_belatedPNG插件修复IE6 PNG

IE6是一个令人作呕的话题,个人极为厌恶IE6,并且恨屋及乌,不过没有办法,中国就是这么一个神奇的国度,到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣,不知道浏览器为何物的也更加不提了,而这种人往往又是互联网中广告点击的生力军,消费能力强,所以你必须照顾到他们的感受。

我对IE6恨之入骨的重要原因之一,恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果,到了IE6这儿就得纠结蹉跎,虽然IE6勉强的支持PNG-8格式的伪半透明,但这个和GIF图片的效果相差并不大,如果你使用PNG-32的话,你所有的半透明区域都会变成灰底。

网上有不少IE6上实现PNG半透明的工具,各有千秋,大多数使用了IE的一个滤镜:AlphaImageLoader,使用后会有各种诸如问题(比如background-position和background-repeat属性支持的不完善,有些还会擅自更改背景图片的尺寸)。DD_belatedPNG提供了一种新的选择,他使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。

查看Demo | 打包下载

其使用方法也不难,先在此下载DD_belatedPNG ,然后插入head标签中:

将所有需要需要修补的元素加上class=”png”即可

PS:对于:focus和:hover伪类,则需要将以上代码中的 :
DD_belatedPNG.fix(‘.png’);
修改为 :
DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’);

BTW:虽然这样可以缓解IE6下PNG的问题,不过会带来性能问题,还有一些其他的问题,自然是不如对png半透明有原生支持的浏览器的。所以,赶快让该死的IE6下地狱吧。阿门!

一个最简单的基于PHP+jQuery的AJAX例子

说在前面:本文只作为一个笔记留存用以达到语言重用的效果,可能对于很多大虾过于入门级,请直接无视。

基本上一说起ajax,大家都感觉到比较神秘,我以前也是这样,总觉得这个和荷兰一家足球俱乐部同名的玩意儿是个高深莫测的东西。其实ajax之所以看上去那么蛋疼主要是为了解决各浏览器对js的兼容性问题而写了太多的代码,以至于一看见就头昏。强大简易的jquery扭转了这个局面。

首先说下个人对ajax的简单理解:html、css、js(jQuery等)是给浏览器看的,PHP是给服务器看的,js可以和php对话,而php可以生成html、css和js,以前我们浏览网页的时候,总是通过操作html,通过php告诉服务器我们需要什么内容,然后服务器会在一个新的页面将你请求的信息展示给你;而ajax,即是我们操作html时告诉js,然后js告诉php,php得到命令以后到服务器去取了你要的信息交给js,js再将此信息展示给你。这么看来ajax貌似更复杂一点,但是他带来几个好处:1. 你不需要进入一个新的页面就可以看到你所请求的信息;2.php只需要提取出产生了变化的有限信息即可,减少了重复。

简单扼要的说就是ajax模拟了提交表单的行为,但是把刷新页面这件事交由js在后台偷偷完成了。
继续阅读“一个最简单的基于PHP+jQuery的AJAX例子”

Wdorpress 模板:ShadowBlue 0.5 Beta

Shadowblue这模板发布也有一段时间了,正式发文也就是0.1 alpha 的时候,其后陆陆续续修改了一些小BUG,更新到了 0.3 。过年期间到现在一直很忙,所以一直没有什么大的更新,这两天抽空添了点儿内容,升级到 0.5 Beta ,也算是一个迟到的新年礼物吧。

Shadowblue 0.5 beta 在外观上和前面的版本没有什么太大的不同,就是增加了一个后台,可以用来控制顶部广告位、社会化链接显示的内容,切换内容部导航栏分类与标签的选项,也增加了一个底栏的开关(因为我发现有很多朋友不大喜欢底栏)。本人实属懒人,十分能理解懒人们的疾苦,有了后台朋友们就不用去改代码了。

目前后台可控的项目不多,本人会逐步改进并即时更新到 SVN 中并在Demo中体现出来,有稳定版本也会直接升级到下载地址,如果您喜欢这个主题,请关注开发页面,欢迎提供各种意见和建议,我会在后续版本中改进,谢谢!

下载请移步开发页面