书接上一回...
上一回我们已经对所需的界面布局作了分析. 可能因为相隔太久, 你已经忘记了那些内容, 可能你根本还没看过那篇日志. 那么, 你可以先去看看: 将 Blogroll 分为两栏 (1)
在本回中, 我们将说说确定功能, 理清思路和准备数据. 上次我说过会改写 WordPress 的源代码或自己写一个, 我认为新作一个思路会较为清晰, 所以加了这一环节. 在写代码之前, 我们要做些准备工作, 一切都是为了敲代码时可以更 "欢快" 些.
在下一回中, 我们以这些功能作为目标, 对这些数据进行处理, 做成一个简单的插件.
很多 Blogger 都会遇到这么一个问题: 当侧边栏某个列表中的项目过多时, 它看起来细长而不饱满, 浪费空间又不美观.
为解决这问题各施其法, 有的选择了一个三栏的主题, 感观上会和谐一点; 有的随机显示几个链接, 让它看起来不那么狭长; 有的是一不做二不休地, 首页不将它显示出来 (如: Blogroll 放 Links 页); 但还有一些人, 他们将列表的内容划分为两半, 空间得到充分利用, 界面也好看.
小弟也是看到别人的这个巧妙设计, 才得到启发的. 点子很好, 但我不能看别人代码呀, 只好自己想法子了...
半年前我写过一篇日志, 让侧边栏列表一分为二. 那是用 JavaScript 实现的, 是一个相当愚蠢的办法, 而且不能支持 Widget. 但其实可以用 PHP 生成我们想要的效果. 看! 看! 就是右图的效果...
计划:
整个教程将以 Blogroll 为例, 会分成几个部分开展.
第一部分, 也就是这次, 我将会分析一下页面结构, 为以后的部分做准备. 这是一个重要的环节, 因为要解决 IE 和其他浏览器间的不兼容现象. (过程中我们会见到 IE 的不可理喻)
第二部分, 我会尝试改写 WordPress 的源代码或者尝试自己写一个以达到我们的目标.
第三部分, 我将会介绍一下, 如何将第二部分的内容做成支持 Widget 的版本.
第四部分, ... (先计划这么多吧, 完成了前面的再说.)
这次介绍的第一部分需要一些 HTML 基础和 CSS 知识, 你准备好了吗?
貌似我还没有在自己的 Blog 推荐过 WordPress 的主题. 但这次, 我决定向各位推荐一个.
这是 Delacro 最新发布的 WordPress 主题, INSay. 它简洁, 细腻, 设计得非常精美, 同时也通过了 XHTML1.0 和 CSS2.1 验证. 目前主题对某些插件有一定的依赖性, 主题本身的定制性也有限. 但这只是 Delacro 的第一个主题, 而且作者还在的努力更新中, 相信它会被不断的完善起来...
该主题在外型和配色方面得做得相当的出色, 而这种美正是我的主题无法表现出来的. 的确如此, 合理的利用图片对于外观的美化是有很大帮助的, 看来我确实得提高提高了.
简介:
在侧边栏中显示最近评论最多的网友. 此插件支持 Widget.
适用版本: WordPress 2.5+
安装:
1. 将压缩包解压到 wp-content/plugins/.
2. 登录你的 WordPress 后台, 到 Plugins 页面激活插件 WP-MostProlificReviewers.
3. 这里有两种添加方法:
(1) 到 Design -> Widget, 将控件 WP-MostProlificReviewers 添加到你的侧边栏.
(2) 打开 sidebar.php, 在适当位置追加以下代码:
<h3>热评网友</h3>
<ul><?php get_mostprolificreviewers(); ?></ul>
简介:
前几天见到某 Blog (忘记名字和网址了) 有一个相当实用的评论功能. 访客留言之后资料输入框会被隐藏起来, 如同登录了一般. 访客可以选择修改相关资料再进行评论. 给予访客很好的用户体验.
今天我将这个功能移植到了自己的主题上, 制作不难, 分享一下吧.
需求:
细心的朋友可能已经注意到了: 当在某个 WordPress 发表评论后再次访问该 Blog, 资料就不需要再次填写, 因为它们都已经在资料输入框里面. 但没评论过的或者清除了 Cookie 之后, 资料输入框将空空如也.
1. 当访客的资料已经存在的情况下, 访客很少关注资料本身, 那些资料输入框就会变成 "碍眼的东西", 我们要想办法将它们隐藏起来. 同时, 我们需要将这位访客的名字显示出来, 否则他/她根本不知道自己的身份.
2. 访客有可能邮箱更换了, 或者就想换个酷点的名字, 此时的他/她肯定想更改一下那些资料. 所以要求有一些措施, 让访客可以重新看到资料输入框.
3. 对于那些从未提供资料的访客, 资料输入框必须让他们看到.
注意: 此版本只支持 WordPress 2.5.x (或以上版本)
简介:
WP Grins Popup 是 WP Grins 1.5 的修改版本.
这个插件可以帮助你将那些碍眼的小图标放在 popup 上, 但前提是你正在使用 Highslide JS. 如果你不喜欢 Highslide 那样的效果, 只是为了这个表情图标的 pupop 而浪费 50kB 左右的开销以加载 JavaScript 代码, 会显得有些不值得.
要求:
WP Grins Popup 要求使用 Highslide JS. 我做的另一个插件 Highslide4WP 可以助你轻松地将 Highslide 应用到 WordPress 上.
简介:
今天为 Elegant Box 做了个紫色风格, 1.3 和 1.4 版应该都适用. 因为没修改其他代码, 所以没有重新发布一个版本.
我已经在几乎所有的代码段加入了注释, 这个风格在这是作为一个教程发布的. 如果你想追加一个紫色的风格, 或考虑自己做一个风格, 那请下载吧.
下载:
更新版本中已经集成该风格
WP-PageNavi 是 WordPress 一个经典的分页插件, 可以助你轻松实现分页导航.
我发布的主题 Blocks 默认不支持插件 WP-PageNavi , 这么做是为了尽可能降低主题对插件的依赖, 毕竟不是所有人都喜欢用某个插件的.
但在实际应用中, Blog 分页导航的确比 WordPress 的上下翻页的有更好的用户体验, 所以很多朋友都喜欢这类分页插件.
然而, WP-PageNavi 的默认样式是很难符合你的 Blog 风格的, 这时就需要对它进行修改了.
今天我重新改了 Blog 上的分页导航样式, 以下简单说说 WP-PageNavi 插件在 Blocks 的配置和修改.
WP Grins Popup 是 WP Grins 1.5 的修改版本.
我 Blog 评论的表情图标一直放在一个 popup 上, 这样做不但美观, 而且可以减少加载页面的时间.
这个插件可以帮助你将那些碍眼的小图标放在 popup 上, 但前提是你正在使用 Highslide JS. 如果你不喜欢 Highslide 那样的效果, 只是为了这个表情图标的 pupop 而浪费 50kB 左右的开销以加载 JavaScript 代码, 会显得有些不值得.
功能:
实现一个表情图标的弹出窗口.
如左图, 将测边栏列表分两半, 灵感来源于 Eric Liu.
我是用 JavaScript 来实现的, 其实很简单.
以下是我的思路:
1. 在加载页面的时候进行调整, 但要求 JavaScript 加载失败时不要影响页面布局, 所以 style 控制也应该写在 JavaScript 里面.
2. 以 Blogroll 为例, 获取 Blogroll 的子节点个数, 使两栏中节点个数相等 (奇数时左栏多一).
3. 移除左栏的最后一个节点, 并将它作为第一个节点加到右栏, 直到 "左栏节点个数 - 右栏节点个数 <= 1".
下载请点: (该文件不再提供下载, 此功能可由插件 WP-MulticolLinks 实现.)
本来的输入框是固定大小的, 只要分辨率改变或换一个后台主题就会错位. 因为我的 Windows 和 Linux 的分辨率是调为不一样的, 所以自己都觉得不爽. 难得周末, 改改吧...
见到 icyleaf 的 mp3 插件不错, 想跟跟风, 用 tinymce 来做个按钮. 看了下人家的代码, 有点蒙, 而且要多加载 20KB 的文件, 还是算了, 按照自己的想法做... 
这次主要改动是:
1. 后台界面 (可以看图).
2. 不能在可视化编辑模式中添加 HTML 弹出窗口. 依然没有解决可视化模式跟 HTML 弹出窗口的老问题, 因为 WordPress 后台的可视化编辑器会自动转换代码. 仍未想到比较好的解决办法, 我实在不想用自定义的标签, 那样兼容性会很差... 
3. 增加简体中文版, 使用时, 请不要中英文两个插件一起激活. 我不会使用 .po 和 .mo 文件, 汗一下...
这两三个晚上抽了点时间更新了一个版本, 以后可以不用痛苦的敲代码插入图片了.
第一次做 WordPress 插件, 本人不懂 PHP, 虽然用到了一点, 但主要还是用 JavaScript 实现的.
我挺喜欢 Highslide 这东西, 只要有时间, 我会不断更新的. 请各位给点意见, 或者提议.
关于 Highslide JS, 前面几个 Post 已经说过, 而现在已经有一个方便好用的插件 WP Highslide, 但它需要使用新的代码标签, 由于日后兼容的问题, 本人放弃使用, 而选择下载官方文件自己弄. 虽然使用的时候需要敲的代码比较多, 但写好两个模板也算一劳永逸.
今天看了 WordPress 插件的结构, 原来也就那么回事. 行, 我也简单弄一个, 其实就往页面插几句代码来调用 Highslide, 过几天会写个按钮来调用语句(像 wp-grins 插入头像一样). 我管这插件叫 Highslide JS for WordPress, 起名字我不专业...
有兴趣的朋友可以下来试用, 安装方法请看 REAMME.txt
Download
还有两个来自 Highslide JS 官方文件中的例子, 代码可以参考其中.