将 Blogroll 分为两栏 (3)
前言:
前两回中, 对界面布局做了分析, 也为编码做过了一些准备. 可以参考以下文章:
将 Blogroll 分为两栏 (1)
将 Blogroll 分为两栏 (2)
这一回, 要敲些代码了, 最后将会做成一个简单的插件. 第二回中说过, 它应该是可以分多列的, 在这先给插件起个名字, WP-MulticolLinks (WordPress Mulitiple Column Links).
题外话:
为什么大部分插件的 WP 后用中横线而不用下横线呢?
我猜测这与 WordPress Plugins 对 readme.txt 文档的处理方法有关. 起码对我来说是这样.
分析:
1. WordPress 的插件都存在一个同名的 PHP 文件, 激活插件之后, 该文件内的所有方法将被采用. 为此, 我们需要创建一个名为 wp-multicollinks.php 的文件. 而文件内部应该是调用插件的主方法, 页面 head 的内容加载方法和 Widget 方法等等.
2. 为设定插件的显示样式, 我们需要在插件中写一些 CSS 代码, 并通过 wp-multicollinks.php 将这些代码放到页面的 head. 如果将 CSS 代码直接放在 wp-multicollinks.php 内部, 显然会将代码变得复杂而不可读. 所以考虑将 CSS 写到外部文件 wp-multicollinks.css 中. 为了方便用户修改样式以适应自定义主题, 允许用户在主题目录下定义一个同名的 CSS 文件来替代插件目录中的.
3. 插件的主要业务其实就是对数据进行加工处理后, 按指定方式将结果输出到页面上. 这里说的指定方式一般有两种, 一种是在代码中直接调用, 另一种是通过 Widget. 无论你使用哪种方式, 都必须先对原始数据进行加工. 这里的 "加工处理" 应该是创建一个多栏的链接单元, 只是暂时不将它输出到页面而已. 为了方便各种输出的处理, 最好将这个创建的过程为一个独立方法. 为了结构更加清晰, 把创建控件的方法, 还有一些主要的共通方法放在一个文件里, 这是一个放置核心方法文件, 命名为 core.php.
代码:
我在这些代码中已经加上了注释, 也不多做说明了, 如果你略懂 PHP 和 CSS, 相信能够看得懂. 万一真的有哪句你还有疑问, 或者觉得那只是一个 bug, 请在此留言, 我们再作讨论.
以下是这几个文件的代码:
wp-multicollinks.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <?php /* Plugin Name: WP-MulticolLinks Plugin URI: http://wordpress.org/extend/plugins/wp-multicollinks/ Plugin Description: Show the links with multiple columns layout in the sidebar. Version: 0.3 (beta varsion) Author: mg12 Author URI: http://www.neoease.com/ */ /** 导入核心方法 */ include ('core.php'); /** * 打印多栏的列表 * @param args 参数字符串 */ function wp_multicollinks( $args = '' ) { echo create_multicollinks( $args ); } // -- head START ------------------------------------------------------------ /** * 打印样式和脚本代码 */ function multicollinks_head() { // 确定需要加载的 CSS // 如果在主题目录中存在 wp-multicollinks.css 文件, 优先加载 // 如果主题目录中不存在 wp-multicollinks.css 文件, 则加载主题目录中的 $css_url = get_bloginfo("wpurl") . '/wp-content/plugins/wp-multicollinks/wp-multicollinks.css'; if ( file_exists(TEMPLATEPATH . "/wp-multicollinks.css") ){ $css_url = get_bloginfo("template_url") . "/wp-multicollinks.css"; } // 将 CSS 和 JS 等文件添加到页面的 head 部分 echo "\n" . '<!-- Start Of Script Generated By WP-Bookmarks -->'; echo "\n" . '<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />'; echo "\n" . '<!-- End Of Script Generated By WP-Bookmarks -->' . "\n"; } /** * 在页面 head 部分插入代码 */ add_action('wp_head', 'multicollinks_head'); // -- head END ------------------------------------------------------------ ?> |
wp-multicollinks.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .ml_col { float:left; } .ml_col_2 { width:50%; } .ml_col_3 { width:33%; } .ml_col_4 { width:25%; } .ml_fixed { clear:both; } |
core.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <?php /** * 获取多栏的列表 * @param args 参数字符串 */ function create_multicollinks( $args = '' ) { // 默认参数 $defaults = array( 'columns' => 1, // 分栏数量 'limit' => 0, // 收藏数量 'category' => '', // 分类名称 'orderby' => 'name', // 排序对象 'order' => 'ASC', // 排序方法 'target' => 'false' // 是否应用 target 便签, true: 应用; false: 不应用 ); // 替换参数 $args = wp_parse_args( $args, $defaults ); // 限定参数 if ( $args['columns'] < 1 ) { $args['columns'] = 1; } else if ( $args['columns'] > 4 ) { $args['columns'] = 4; } if ( $args['limit'] < 0 ) { $args['limit'] = 0; } if ( $args['order'] != 'DESC' ) { $args['order'] = 'ASC'; } if ( $args['orderby'] == 'rand' ) { $args['orderby'] = 'rand()'; $args['order'] = ''; } else if ( $args['orderby'] == 'url' ) { $args['orderby'] = 'url'; } else if ( $args['orderby'] == 'rating' ) { $args['orderby'] = 'rating'; } else { $args['orderby'] = 'name'; } // 在数据库中获取评论相关信息 global $wpdb, $links, $link; if ( !$links = wp_cache_get( 'widget_links', 'widget' ) ) { // 数量限制 $limit = ''; if ($args['limit'] > 0) { $limit = ' LIMIT ' . $args['limit']; } // SQL 查找数据集合 if ( $args['category'] == '' ) { // 显示所有分类的数据集合 $links = $wpdb->get_results("SELECT T1.link_name AS name,T1.link_url AS url,T1.link_description AS description,T1.link_target AS target,T1.link_rating AS rating FROM wp_links T1 ORDER BY " . $args['orderby'] . " " . $args['order'] . $limit); } else { // 只显示指定分类的数据集合 $links = $wpdb->get_results("SELECT T1.link_name AS name,T1.link_url AS url,T1.link_description AS description,T1.link_target AS target,T1.link_rating AS rating FROM wp_links T1,wp_term_relationships T2,wp_term_taxonomy T3,wp_terms T4 WHERE link_visible='Y' AND T1.link_id = T2.object_id AND T2.term_taxonomy_id = T3.term_taxonomy_id AND T3.term_id = T4.term_id AND T4.name='" . $args['category'] . "' ORDER BY " . $args['orderby'] . " " . $args['order'] . $limit); } } // 获取列表 $result = ''; // 处理结果 $count = 0; // 计数器 if ( $links ) { foreach ($links as $link) { // target $target = ''; if ( $args['target'] == 'true' && $link->target != '' ) { $target = ' target="' . $link->target . '"'; } // 只有一列的时候 if ( $args['columns'] == 1 ) { $result .= '<li class="ml_item"><a href="' . $link->url .'" title="' . $link->description .'"' . $target . '>' . $link->name .'</a></li>'; // 两或以上的时候 } else { if ( $count % $args['columns'] == 0 ) { $result .= '<li class="ml_item"><div>'; } $result .= '<div class="ml_col ml_col_' . $args['columns'] . '"><a href="' . $link->url .'" title="' . $link->description .'"' . $target . '>' . $link->name .'</a></div>'; ++$count; if ( $count % $args['columns'] == 0 ) { $result .= '<div class="ml_fixed"></div></div></li>'; } } } // foreach ($links as $link) // 显示多列而不能正常结束一行时, 为其补上结束标记 (显示一列时不存在此问题) if ( $count % $args['columns'] != 0 ) { $result .= '<div class="ml_fixed"></div></div></li>'; } // 返回 HTML 格式的字符串 return $result; } // if ( $links ) } ?> |
插件下载:
因为还不是完整版本, 版本号定为 0.3. (0.1, 0.2 用于内部测试. 插件目前不支持 Widget)
插件正在申请 SVN, 不保证以后可以在后台升级 (不出意外应该是可以的). ![]()
大家可以下载来玩玩, 最新发布的 Elegant Box 2.1 也支持这个插件.
插件下载地址: wp-multicollinks.0.3.1.zip
使用方法:
安装:
1. 将插件解压到 /wp-content/plugins/
2. 到 WordPress 管理后台激活插件
3. 在 sidebar.php 文件的适当位置插入以下代码:
1 2 | <h3>Links</h3> <?php wp_multicollinks(); ?> |
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| limit | 整数 | 显示的链接数量 | 5 |
| columns | 整数 | 链接的显示列数 | 1 |
| category | 字符串 | 分类名称 | (空串, 显示所有链接) |
| orderby | 字符串 | 排序对象 (name/url/rating/rand) | name |
| order | ASC/DESC | 排序方法 | ASC |
| target | true/false | 是否应用 target 属性 | false |
后话:
我发现我已经走题很远了, 这已经从一个将 "如何将链接分为两栏?" 的话题扯到了 "如何做一个侧边栏插件?". 从小学的记叙文到初中的抒情文, 从高中的议论文到大学因为没熄灯而写检讨书, 我一直都有跑题的习惯. 所以大家莫怪, 只要不涉及 "文明用语", 骂两句我还是可以接受的.
下一回是最后一部分, 将在插件中加入一个功能, 以 AJAX 方式显示全部链接. 而令插件支持 Widget 的教程我打算另起话题讨论, 或者就不讨论了...

又出插件了
能否做成翻页的? 如果可以的话
我是6个链接两栏,FF3下CSS有点问题
貌似要加上
要这样才行
其实用:用Executable PHP widget 这个插件就OK了
晕 评论发布了代码。。。
@Alan
翻译就不用了吧, 一般人不会有上百个链接的. 我会做一个 show all.
@xue
可能是样式有点冲突. 其实我现在用的就是在这个的基础上弄的.
如果是这样, 可能要修改一下插件的样式代码.
@LSvKing
=. = 这叫偷偷发布.
你的风格真不错。请问侧边栏的LINK是如何做到2列的?是有插件吗?请问提供不?
@benmao
这篇日志就是讨论这个的, 它就在上面.
现在是个测试版.
@mg12, 好像也是的, 呵呵
BLOGROLL又强大了一回!
@xue
我对不起大家, 有个 bug, 导致 IE 以外浏览器每行都往下挤, 在我现在用主题中有定义这个样式, 所以没发觉.
已经下载的朋友可以这样修正:
1. 打开 core.php 文件
2. 找到两处
class="fixed", 并修改为class="ml_fixed"还没下载的请下载 0.3.1 版.
这倒是个好东西,可以节省侧边栏的空间:)