首页 » 建站教程 » Blog教程 » Wordpress » 浏览内容
WordPress:将Blogroll 分为两栏(三)
前两篇中, 对界面布局做了分析, 也为编码做过了一些准备. 可以参考以下文章:
将 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
<?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
.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
<?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><a href="' . $link->url .'" title="' . $link->description .'"' . $target . '>' . $link->name .'</a></li>';
// 两或以上的时候
} else {
if ( $count % $args['columns'] == 0 ) {
$result .= '<li><div>';
}
$result .= '<divCOLOR: #339933">. $args['columns'] . '"><a href="' . $link->url .'" title="' . $link->description .'"' . $target . '>' . $link->name .'</a></div>';
++$count;
if ( $count % $args['columns'] == 0 ) {
$result .= '<div></div></div></li>';
}
}
} // foreach ($links as $link)
// 显示多列而不能正常结束一行时, 为其补上结束标记 (显示一列时不存在此问题)
if ( $count % $args['columns'] != 0 ) {
$result .= '<div></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
使用方法:
安装:
1. 将插件解压到 /wp-content/plugins/
2. 到 WordPress 管理后台激活插件
3. 在 sidebar.php 文件的适当位置插入以下代码:
<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 的教程我打算另起话题讨论, 或者就不讨论了…

评论 共0条 (RSS 2.0) 发表评论