首页 » 建站教程 » Blog教程 » Wordpress » 浏览内容

WordPress:将Blogroll 分为两栏(三)

76 0 发表评论
标签:

前两篇中, 对界面布局做了分析, 也为编码做过了一些准备. 可以参考以下文章:

将 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, 不保证以后可以在后台升级 (不出意外应该是可以的). :D
大家可以下载来玩玩, 最新发布的 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) 发表评论

  1. 暂无评论,快抢沙发吧。

发表评论

  •   想要显示头像?
回到页首