邪罗刹的菠萝阁

> 菠萝阁使用了好长时间的 Sandevlos 主题，早就觉得看腻了，小邪想是时候来个大变样了，嘎嘎。
> 现在成功换上了 Zww主题帝 的强力主题 - Zbench，并且进行了蛮多的调整，以下是调整手记。

一. 使主题兼容侧边栏的插件挂件：

#multicollinks li{line-height:10px}
/* 上面的代码来降低侧边栏友情链接的行高 */

#sidebar h4{text-shadow:1px 1px 1px #aaa;color:#445566;font-family:Georgia,"Times New Roman",Times,serif;font-size:16px;margin:0;padding:0 5px;line-height:30px;border-bottom:1px solid #fff;}
/* 因为 Wp-recentcomments 侧栏的标题是 h3，而下面两个挂件都是 h4，所以为了统一效果就加上 h4 */

li.widget {list-style:none}
/* 去除侧栏挂件前面的列表符号 */

二. 使主题兼容 Wp-syntax 代码高亮插件：

.post .entry pre{font-size:12px;width:95%;line-height:16px;overflow:auto;font-family:"Courier New", FixedSys;color:#555;background:#fafafa;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-left:15px solid #ccc;border-right:1px solid #ccc;padding:0 5px 16px;margin:0 0 20px;}

.post .entry table{background:#fff;border:1px solid #ccc;border-width:2px;border-collapse:collapse;margin:5px 0 10px;}

.post .entry th,.post .entry td{border:1px solid #ccc;padding:3px 10px;text-align:left;vertical-align:top;}
/* 分别删除上面三处代码，否则会与 wp-syntax 插件冲突 */

.wp_syntax{width:500px;}
.wp_syntax div, .wp_syntax td{overflow:hidden;max-width: 565px;word-break: break-all;word-wrap: break-word;}
.wp_syntax pre {word-wrap:break-word;overflow:hidden;}
/* 对 wp-syntax 插件样式进行适当调整 */

三. 写完文章才发现 “三” 木有了，可能是被鬼吃掉了 ..(((m -__-)m

四. 搜索框 与 TOP按键 的CSS样式调整：

#search{box-shadow:2px 2px 5px #777;-moz-box-shadow:2px 2px 5px #777;-webkit-box-shadow:2px 2px 5px #777;position:absolute;background:#565657;right:50%;margin-right:-450px;bottom:-14px;width:230px;height:26px;overflow:hidden;border:1px solid #999;}
/* 修改成下面，去除搜索框阴影 */

#search{position:absolute;background:#565657;right:50%;margin-right:-450px;bottom:-14px;width:230px;height:26px;overflow:hidden;border:1px solid #999;}

#footer-inside #back-to-top{position:absolute;top:5px;right:150px;color:#f2f2f2;font-size:14px;}
#footer-inside #back-to-top a{border:none;color:#f2f2f2;}
/* 替换为下面这样，已修改右下角 top 按键的样式 */

#footer-inside #back-to-top{position:absolute;top:5px;right:150px;color:#f2f2f2;font-size:12px;}
#footer-inside #back-to-top a{border:none;color:#AAA;}
#footer-inside #back-to-top {border:none;color:#AAA;}

五. 部分 PHP 代码调整：

<?php wp_list_pages('title_li=&depth=2'); ?>
//修改成下面这样，隐藏 ID 为 1949 的页面

<?php wp_list_pages('title_li=&depth=2&exclude=1949'); ?>

<li <?php if(is_home()) {?>class="current_page_item"<?php } ?>><a href="<?php echo get_option('home'); ?>/" title="HomePage">菠萝阁 [Index]</a></li>
//修改导航栏中的 “Home” 为 “菠萝阁 [Index]”

<li <?php if(is_home()) {?>class="current_page_item"<?php } ?>><a href="<?php echo get_option('home'); ?>/" title="HomePage">Home</a></li>

return '<img alt="" src="'.$ava_img_url.'" width="'.$size.'" height="'.$size.'" />';
//修改小邪的 MiniGravatar 插件代码中如上的，改成下面这样，增加 class="avatar"

return '<img alt="" src="'.$ava_img_url.'" class="avatar" width="'.$size.'" height="'.$size.'" />';

<?php include(TEMPLATEPATH . '/smiley.php'); ?>
//comments.php中如上代码，修改为如下
//使用 wp-smiles 插件来显示表情，因为原生的一但表情太多则会被挤到第二行去鸟

<?php cs_print_smilies(); ?>

六. 回复时自动添加 @用户名：

<?php wp_head(); ?></head>
//在 header.php 中如上代码的下方加入如下代码，载入 1.2.6 jQuery库与 main.js

<script type="text/javascript" src="http://tool.evlos.org/file/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/main.js"></script>

//以下为 main.js 的代码
jQuery(document).ready(function($){	//Begin jQuery
	$('.reply').click(function() {
	var atid = '"#' + $(this).parent().attr("id") + '"';
	var atname = $(this).prevAll().find('cite:first').text();
	//下面那行进行了部分调整，增加了 nofollow 以防止內链影响 SEO
	$("#comment").attr("value","<a href=" + atid + " rel=" + '"nofollow"' + ">@" + atname + " </a>, <br />\n").focus();
});
	$('.cancel-comment-reply a').click(function() {	//点击取消回复评论清空评论框的内容
	$("#comment").attr("value",'');
});
})	//End jQuery

七. 个人觉得 include 应少用为好：

<?php include (TEMPLATEPATH . '/searchform.php'); ?>
//替换为 searchform.php 的内容，因为个人认为 include 应该尽量少用为好

<form id="searchform" method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" value="Search: type, hit enter" onfocus="if (this.value == 'Search: type, hit enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search: type, hit enter';}" size="35" maxlength="50" name="s" id="s" />
<input type="submit" id="searchsubmit" value="" />
</form>

八. 对表情的位置进行 CSS 修正：

.comment-text .wp-smiley{position:relative;bottom:-5px;margin-top:-5px;}
//增加如上这行修正表情位置

ol.commentlist li div.comment-text{border-top:1px solid #fff;padding-top:10px;margin:0 0 10px;}
//将如上修改为如下来增加评论处行高

ol.commentlist li div.comment-text{line-height:15px;border-top:1px solid #fff;padding-top:10px;margin:0 0 10px;}

九. 应用 Ajax 提交评论（未完成，迟一些在新文章中补上）：

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php $options = get_option('zBench_options'); ?>
<?php wp_head(); ?></head>
//head.php 里面如上修改为如下代码

<?php $options = get_option('zBench_options'); ?>
<?php wp_head(); ?></head>
<?php if ( is_singular() ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/comments-ajax.js"></script>
<?php } ?>

十. 后记：

> 最后使用小邪的 CSS压缩工具 把CSS文件压缩一下 -
> 输入: 15.631KB, 输出:13.213KB, 压缩比率: 15.5% (-2418 Bytes)

> 当然也要把Js文件用 工具 来压缩一下，干脆直接放 head.php 里面 -
> Compression ratio: 558/350 = 0.627

> 以下修改的参考文章 -

> 1. 用 jQuery 实现点击回复之后显示@用户名的效果 - http://zww.me/archives/24817
> 2. WordPress主题发布: zBench - http://zww.me/archives/25131
> 3. WordPress 內置嵌套評論專用 Ajax comments - http://kan.willin.org/?p=1271