Wordpress模板修改笔记

这几个星期帮老婆弄了一个独立域名的Blog, 要求有以下几点:

• Blog要分两大块, 一块写琐事杂记, 另一块写商品更新
• 琐事杂记要有内文引用图片的Gallery
• 商品更新要求比较复杂
• 要有橱窗感
• 要有会员制度, 登录会员可以看到折扣价
• 会员帐号和琐事杂记帐号共享

下面把过程大概记录一下…

工具篇

尝试了Mac下面的几个All-in-one网页开发工具, 主要是Coda和Espresso. 大概都有15天左右的Trial时间…刚好做完整个网站. :)

Coda ($99)

• FTP功能很棒. 推荐在Remote栏里直接编辑, 然后打开Preference里的Keep idle connection active. 每次Save以后就会自动上传.
• Site管理简单清晰, 尤其是后来同时更新两个模板的时候. 切换Site会记住所有打开过的文件.
• 界面比较友善, 上面的6个Tab功能区分清楚, 很快就能上手.
• 全局搜索功能非常顺手, 可以Cmd-G直接跳到下一个文件

• php和HTML混排的时候的语法高亮不是很清楚
• 选择多行Tab不是indent, 会删掉所有内容…
• 没有XCode里那样的代码折叠功能
• 没有自动代码整理

Espresso ($79.99)

• 语法高亮很棒
• 有代码折叠, 而且Tab/Shift+Tab是indent

• 没有CSS编辑器…(好吧…其实问题也不是很大)
• 没有自动代码整理
• 文件是以Tree的形式来显示的, 不如Coda那样每次可以更改当前文件夹方便
• 界面好简单…基本还是一只文本编辑器

最后用得比较多的还是Coda, 可能有点先入为主的缘故… 基本上第一次Remote Commit完所有的修改都通过Coda来操作, 不过碰到的一个很痛心棘手的问题就是点到Local栏修改本地文件不会自动从Server上Get最新版…因为不知道这点, 所以很多bug都改了好多遍, 还以为自己déjà vu了呢…后来记得都改Server上Remote的文件就好.

然后经过若干次失败的尝试, 发现Mac下果然没有好用的FTP客户端. 平时用的最多的Cyberduck在传大量小文件的时候还是会莫名其妙断流…不过最后零星的配置文件修改还是用Cyberduck + Smultron搞定

本地测试用的是MAMP, 唯一碰到的一次问题是本地装完WPMU, 结果.htaccess出了问题, 无法登录phpMyAdmin, 后来改了个Apache的参数解决了问题

版本控制开始在本地做了个git depo…后来觉得Checkin麻烦直接用
Dropbox + ln -s…也recover会了次数据

debug CSS主要用的还是Webkit自带的Web Inspector…在Coda里可以直接试用, 后来debug IE的时候也用了下IE8自带的那个…Firebug也用了一点点, 不过通常懒得再开一个Firefox

系统篇

Blog系统开始就觉得Wordpress用的人最多, 应该相对碰到的问题要好解决一些. 后来事实证明的确如此. 主要的一个选择条件是要有两个共享用户数据的Blog, 做了下初期调查有以下几个解决方案:

• WordpressMU. WordpressMU是Wordpress的多用户多Blog版, 无需额外的Hack就可以支持多个Blog共享用户数据. 不过在万网的空间上安装了很多遍都是装完进欢迎页就直接页面无响应… 怀疑是空间商动了手脚…
• Wordpress+Catalog Template. 把两种类型的Blog文根据Catalog来分类, 选择不同的Template页面来显示, 同时也可以自定义Catalog主页来解决不同的首页需求. 好处是只需要维护一套后台, 但是坏处是对Blog模板的修改会非常大…
• Wordpress+共享用户数据库Hack, 这也是最后我选择的方案. 优点的逻辑简单, 修改完以后当两个Blog用就是了, 所有的Blog模板也可以直接拿来用. 缺点就是每次升级Wordpress版本都要重新Hack一次(上个礼拜正好升级了一次…)

最后看到新闻里说Wordpress从3.0开始就要和WordpressMU合并了, 到时候就不用做这么复杂的选择题了.

共享用户数据库Hack

大致上还是按照这个网页的做法, 不过需要根据最后评论更新, 否则会没有权限登录后台.

大致如下(WP2.9.2有效):

把BlogA和BlogB装在不同的目录里, 例如BlogA装在\, BlogB装在\blog\, 两者用同一个数据库, 但是不同的前缀

假设BlogA的数据库前缀是wp_, BlogB前缀是wp2_, 手动修改BlogB的wp-config.php, 在下面加两句:

define('CUSTOM_USER_TABLE', 'wp_users');
define('CUSTOM_USER_META_TABLE', 'wp_usermeta');
//Permission Fix
define('CUSTOM_CAPABILITIES_PREFIX', 'wp_');

然后修改BlogB的wp-includes/capabilities.php, 查找:

$this->cap_key = $wpdb->prefix . 'capabilities';

替换为

if (defined ('CUSTOM_CAPABILITIES_PREFIX')) {
 $this->cap_key = CUSTOM_CAPABILITIES_PREFIX . 'capabilities';
}else{ 
 $this->cap_key = $wpdb->prefix . 'capabilities';
}

查找替换这步每次升级WP版本都要做一次…

最后用下来基本没碰到什么大问题…不过如果要完美的解决方案可能要修改更多的文件, 后来就懒得弄了.

Theme/插件修改

主Blog后来选择的Theme是simpleX 1.3.2, 基本上改动不大, 只是修改了些中文字体的小Bug.

缩略图的部分用了一个国产插件, Thumbnails Anywhere, 这个插件可以帮你把日志中的图片Fetch到本地生成缩略图引用, 如果是Picasa/Yupoo/Flickr的图片还可以直接引用缩略图, 非常赞. 不过原本的首页缩略图只能显示一张, 修改了一下Plugin里的function, 加了多个图片的显示选项, 然后还加了Lightbox的逻辑. 期间还发现Yupoo修改了外链的url, debug了半天.

最终效果(Link):

商品更新的Blog动的手脚比较大, 主要修改如下:

• 把3栏改成2栏
• 修改Header/Footer, 增加搜索栏, Tag/Catagory Bar, 公告栏
• 增加自定义字段的显示: 价格, 购买链接等
• 所有图片Auto-Scale
• 根据登录人权限的不同, 设定优惠价

用的theme是ThemeMeme Aperio Prototype, 本身自带caption_image自定义字段的显示, 所以每个帖子都有张大图片. 不过我不得不说这个Theme又老又是Prototype, css的bug真的是很多…

最终效果(link):

自定义字段

自定义字段有个很棒的插件叫Custom Field Template, 做好Template帖子里就可以很容易的添加了…Theme里面的引用大致就是下面这句话:

 $key="custom_key";
 $custom_key = get_post_meta($post->ID, $key, true);

权限判断

权限判断也搞了很久. 首先WP内置的权限设置功能不够, 装了个Capability Manager插件来增加自定义Role和权限.

然后抄到一个function, 来直接判断权限…(自带的那个弄了很久没搞定…)

其中还有一个非常Tricky的地方让我Debug了半天, 里面的get_option('wp2_user_roles');居然直接用的是表名来生成的属性, 而不是某个constant字段, 我用的是wp2_这个前缀, 所以要换成前面贴的那样.

其他插件

其他还有很多挺棒的插件

• Slimbox: lightbox, 我试下来发现它在页面loading时候也能触发, 比lightbox2好
• Login With Ajax: 侧边栏登录
• WP-Mail-SMTP: 用SMTP来发注册信, 申请了个Google App的信箱, 默认的被空间商关掉了
• WPTouch iPhone Theme: 自动生成iPhone/Android版
• Custom Smilies: Emoticon...

其他

最痛苦的恐怕就是在Debug IE CSS的时候了…尽管我已经无视了IE6(家里没找到电脑有IE6)

基本上…作为没有任何CSS基础的群众, 心得如下:

• 用CSS来控制图片自动缩放基本没戏, 没找到任何一种方案在所有浏览器里都能用的. (我后来自己写了个php function来scale, 感觉很影响loading时间, 是不是这个在client端用jQuery之类的会好点?在没有thumbnail的情况下)
• 碰到IE特有的浮动bug, 先尝试在前面/后面加空div, 再尝试简化css结构
• IE的filter:dropshadow等超级烂, 不过filter:alpha还行
• 默认的XP下没有任何一个可以看的黑体, 所有的字大字号都很难看

然后弄了半天, 发现网页在Mac上的渲染效果和PC上特别是IE上还是一个天一个地啊…泪奔…