为配合《WordPress 原生评论分页导航》的函数，对两者样式做了个统一定义：

.pagenavi{text-align:center;margin:1em 0 1.5em;}
.page-numbers{border-bottom:5px solid #ccc;padding:5px 8px 4px;margin:0 5px;}
.page-numbers:hover,.current{color:#000;border-bottom:5px solid #000;}

对Willin的Mini版动了几处的class名称，使CSS定义更统一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function pagenavi( $p = 2 ) {
if ( is_singular() ) return;
global $wp_query, $paged;
$max_page = $wp_query->max_num_pages;
if ( $max_page == 1 ) return;
if ( empty( $paged ) ) $paged = 1;
echo '<span class="page-numbers">' . $paged . ' / ' . $max_page . ' </span> '; //原为class="pages"
if ( $paged > $p + 1 ) p_link( 1, '最前页' );
if ( $paged > $p + 2 ) echo '<span class="page-numbers">...</span>';//原为echo '...'
for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {
if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
}
if ( $paged < $max_page - $p - 1 ) echo '<span class="page-numbers">...</span>'; //原为echo '...'
if ( $paged < $max_page - $p ) p_link( $max_page, '最末页' );
}
function p_link( $i, $title = '' ) {
if ( $title == '' ) $title = "第 {$i} 页";
echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
}

调用代码为：

<div class="pagenavi"><?php pagenavi(); ?></div>

当然如果你有用评论分页函数，把调用代码改为：

<div class="pagenavi"><?php paginate_comments_links('prev_text=上一页&next_text=下一页');?></div>

这样一来，三行CSS搞定文章列表分页和评论分页导航样式！

近几天冒出很多童鞋加我Q，向我寻求帮助，对于这份信任我很感谢！可，我也头大了……因为较多的童鞋都是刚接触WordPress，对CSS呀，WordPress模板文件呀都不甚知晓，当然更不用说jQuery了。

由于近期我折腾了很多还看得过去的jQuery特效，几位童鞋也极力想加上，这可为难我了……真的，不怕告诉大家，我也是懂那么一点点，没人教我，大半通过谷歌搜索所学，能折腾出这些代码已经很不容易了。

其实，我想说的是：不是我不厚道，而是一我没这个实力，二我也没这个义务，只是出于对我寻求帮助的人的一份责任。我也知道很多童鞋也不想打扰我，的确是自己搞不定了，才找我的。

我想说的是：遇到这种情况不如先放一放，记一下问题，然后转移方向折腾些其他的，说不定一个灵光，你就顿悟了！这种学习方式也是我推崇的，毕竟我们不是专业的，自己慢慢一点点积累起来的，那才会有更大的成就感！

另外，其实我挺不想折腾代码的，只是享受以自己那点点的业余知识做基础，做自己想要的东西或者效果，遇到困难，疯狂搜索，借鉴别人的代码、思路，然后反观自己，再儿进一步折腾。

有些能力是别人直接告诉你，而你永远学不到的，只有自己尝试了，才会懂得。我，很不愿做那个直接告诉别人答案的那个人。

所以，我想说的是：

“折腾 ≠ 瞎折腾”

一定要在自己的知识基础能力上折腾自己力所能及的东西，这样收获才会更多。如同，解题。

所所以，你知道我想要说的是什么了吗？

申明：所有资源来自网络，如果什么什么版权问题，一切一切问题于小弟无关！

第一本: css.7z

唯一看过的关于CSS的完整PDF电子书，书是非常非常好的一本书，就是翻译差了点，很多CSS属性翻得一塌糊涂。阅读时只需要看其主要内容即可！

第二本: jquery.part1.rar jquery.part2.rar jquery.part3.rar jquery.part4.rar

唯一看过的关于JQUERY的完整PDF电子书，我敢说玩JQUERY的90%以上看过这本书，几位国人写的，也就卖30RMB，推荐购买一本！阅读建议，先浏览一个大概，把实例给啃下了，然后再细细看其中具体的函数解释！

以上两本书至今俺也就过了一遍，像我这种伪技术的拿来用用显摆显摆，那是绰绰有余呀！

PS:东东都放SkyDrive了，25GB的总空间，单个最大文件50MB，网页上传等于无响应。顺便推荐一个SkyDrive本地虚拟硬盘的软件：SkyDriveExplorer ，支持本地拖拽上传下载等等。

说真的，印象里只有在几年前选修“网页制作”时用过DW制作了几张html，那时不懂，用DW不断插入表格，调整宽度，输入内容，然后保存，调试，不行，继续修改……完全在“所见即所得”的视窗内完成全部的制作！由此，DW也给我留下来一个庞大臃肿做个东西需不断修改还做不到自己想要效果的坏印象。

一年前接触到WordPress，然后发现WordPress主题中所有东西的显示都是由一个style.css控制的，那就打开来好好研究研究咯！之后不知啥时咋地就载了个EditPlus，再打开CSS文件，突然发现整个世界都不一样了，代码高亮了！接着就好办了，一切都是那么的有规律，删掉这行“background:”，额背景米有了，修改“border:”试试，哦原来这个是边框呀！就这样，CSS各个属性慢慢的熟悉起来……

额，跑题了……进入正文：

EditPlus是一款极优秀的文字编辑器，小巧且强大，支持无限次撤销/前进，代码高亮，等等等等。我用它写CSS样式时，属性写对了即会显示蓝色，不知道的或者想不起的属性网上查查CSS属性表，所以就不存在属性写错的问题，我只需调试相应属性内的值显示出需要的效果就行了。

今儿看《锋利的jQuery》时看到其中介绍了好几款代码编辑器都有自动提示补全的功能，立即想到自己一直在用的EditPlus有没有这个功能呢？不查不知道，一查，嘿，还真有，我震精了！

下面就正式来介绍下使用步骤：

1.下载自动完成文件：xcss.7z (内为xcss.acp文件);

2.打开EditPlus–工具–首选项–文件–设置和语法，文件类型选中CSS，然后“自动完成”里选择xcss.acp，确定;

3.使用：新建或者打开一个CSS文件

比如，我想让一个元素向左浮动，本来我要手动输入“float:left;”，现在你只要输入

fl + 空格 = float:left; (fr + 空格 = float:right; p + 空格 =padding:px;)

你说神奇不？就是现在我们一般只需输入几个字母，然后空格，哦耶，输入完成！那其他的属性怎么输呢？用EditPlus打开xcss.acp即可看到完整的对应，小声告诉你，可以自己修改哦！

OK，本文完，静候童鞋们帅锅们围观！

导航栏方面，利用jquery给“margin-top:10px”添加了个速度和弹跳的效果，童鞋们可以把鼠标移到导航上体验下。代码方面个人考虑到主题差异太大，也就不单独写篇笔记了，聪明的同学可自行查看源代码及加载的JS。

评论样式是刚刚一下就调整好了，可恨的就是灵感酝酿的时间为两个月。不过还是该庆幸的，会来灵感有总比不会来好！

（提醒：小站开启了嵌套回复即邮件通知，盖楼请适度）

这次调整个人非常满意，也更加符合这个主题的风格，简洁，强大！尤其是嵌套回复部分，采用了小头像，隐藏回复时间，最明显的是虚线分割，HOHO~~

就不知各位童鞋感觉咋样拉，尽情围观之~~

使用Chrome的审查元素很简单，以小站wordpress的分类页为例：

打开页面——鼠标移到“折腾WP”——右键——审查元素

即弹出了审查元素的窗口：

我们看到导航中的“折腾WP”元素的源代码已经被高亮，整个页面源代码也以折叠方式展示在主体的左边部分。当我们移动鼠标到高亮的源代码上时，会发现页面上的“折腾WP”被突出显示了。当然同样把鼠标移到源代码的其他部分，页面上也会实时突出显示对应的部分，点选源代码中的其他部分后，右边内容也会即时改变。

那右边部分显示的又是什么呢？这里显示的主要是当前选中元素所对应的CSS代码，就是说可以从右边部分看到定义这个元素在此页面上显示的所有CSS代码。当我们把鼠标以过去时，每个CSS属性右边会出现一个打钩的小框框，点击小勾子就可单独取消此条CSS属性，同时，我们可以即时看到页面上元素的变化：

同时右边部分的Metrics内，还直观显示了此元素的框模型：

另外，我们也可以双击CSS属性，如双击“padding:8px 15px;”后就可修改数值和属性，并在修改完后按回车即可查看元素在页面上的变化：

由于对其它源代码查看工具不熟，不确定Chrome审查元素中的这样的一个功能：

折叠展示页面源代码+独立显示元素所对应定义的所有CSS属性+可即时修改CSS属性并直观展示在页面上

算不算一个很好使很强悍的一个功能了！

当然，Chrome审查元素不单单就只有我所说的这些功能。但对我来说，仅我以上所说的这些，已足够我随心所欲地修改我小站的页面样式。另外，我也可以轻松地使用此功能，扒下其它网页酷炫的CSS样式为己所用~

好了，要说的这就这些，更多内容就等各位童鞋来补充咯~~

一、导航样式

由原来的两重边框，调整为现在的margin-top:10px，改变还是非常明显的。（总算把老早就看不顺眼的导航改了……）

二、评论回复样式

（原5层嵌套样式）

（现5层嵌套样式）

由原来主回复和子回复一样的样式，调整为把子回复的头像、时间添加display:none属性，明显地区别了两者，另外直观的效果就是大幅缩短了评论部分的长度。

另外，部分童鞋也知道，我现在的主题是以SimpleG为框架修改而来的。虽说我也独立命名发布了Simple-Lines，但始终是修改而来的，所以近段时间正在基于强大的sandbox主题框架移植现在的主题，而且听说sandbox是非常非常强大的，所以我边移植边在了解它的结构和一些功能。下个真正意义上的原创主题Simple-Lines，应该会出现，不过时间上嘛，真不好说……

现在有很多想法，比如给主题添加后台设置页，然后发布一个基本的主题+功能加强包，会附带多款插件专用美化版……想法多多，就是没个头，还有很多东西自己也从没接触过，所以说，不急不急，一步一步，终有一天此主题会出来滴！ ^_^

我们可以简单来回顾下：为什么要合并CSS？

话说“一个页面多调用一个CSS或者JS或者图标，不管是大是小，都会延长打开时间0.2秒”。由此可知，如果把一个小站的一个页面所需的CSS合并起来，那将大大提高页面打开的时间！

当然，也许喜欢折腾WP的你早就想到这里还存在着一个矛盾，只是苦于没有好的解决办法，这个矛盾就是：我们合并CSS后，全站每个页面都都只需加载一个CSS文件就够了，这显然比之前得加载多个CSS快多了，然而同时也会出现拖慢某些特定页面

假如我们合并了很多“评论”、“侧边栏”或者“文章分页导航”插件的CSS，而合并这些CSS后将会严重拖慢没有“评论”、“侧边栏”或者“文章分页导航”这些特定页面的加载速度！

也许，可能，上段文字表述的有点拗口。那来举个实例，同时来说明：为什么要按需加载CSS？

首先，我们一起来分析下WordPress的“首页”和“文章页”：

相同：两个页面一般都加载了页首（header.php）、侧边栏（sidebar.php）和页脚（footer.php），所以这些部分的CSS代码片段它们都是需要的；

区别：显然是它们的主体部分，显然的一点就是评论部分！折腾过WordPress主题的都肯定知道一个主题中关于评论部分的CSS有多少吧？还有比如说，首页有分页导航，文章的展示也完全跟文章页不同等等。

那，我们该怎么做呢？呵呵，当然是俺提出的“按需加载CSS”啦！我们的终极目标是：

绝不加载一个页面中不需加载的CSS代码，去除完全不影响这个页面显示的CSS代码！

实现这个目标当然是需要一定的CSS知识的，至少你要弄清哪部分CSS代码定义了哪部分的显示，这是一个门槛，也是此方法的一个折腾之处！

看到这也许有些童鞋要发难了，那到底怎么做呀，你倒是速度说呀？申明，由于此方法的原理实在是简单，就是加个php的判断语句而已，比如说：

<?php if (is_home()) { ?>
<link rel="stylesheet" href="http://immmmm.com/wp-content/themes/simplelines/style-index.css" type="text/css" />
<?php } elseif( is_single() ) { ?>
<link rel="stylesheet" href="http://immmmm.com/wp-content/themes/simplelines/style-single.css"  type="text/css" />
<?php } elseif( is_category() || is_archive() || is_search() ) { ?>
<link rel="stylesheet" href="http://immmmm.com/wp-content/themes/simplelines/style-category.css"  type="text/css" />
<?php } elseif( is_page(1072) ) { ?>
<link rel="stylesheet" href="http://immmmm.com/wp-content/themes/simplelines/style-links.css"  type="text/css" />
<?php } else { ?>
<link rel="stylesheet" href="http://immmmm.com/wp-content/themes/simplelines/style.css" type="text/css" />
<?php } ?>

以上判断是加在header.php里的相应位置的，怎么个相应发？自个儿折腾哦！好，不岔开。上面这段代码什么意思呢？就是当打开的是首页时加载style-index.css这个CSS文件，打开文章页时加载style-single.css，打开文类也、归档页或者搜索结果页时加载style-category.css，打开页面且其ID=1072时加载style-links.css，其它页面加载style.css。

如果看懂了上上段代码或者上段文字，那你应该知道“按需加载CSS”修改时的顺序了吧？先把所有CSS合并起来，然后具体分析首页到底需要哪些CSS代码，去掉合并后CSS文件中不需要的代码，然后再具体分析文章页……

最后，我想告诉用WordPress的各位童鞋：想愁有一天会没东东让你折腾？那是不可能地！！！

PS1：其实本文中提到的终极目标，还可以拓宽下，就是：绝不加载一个页面中不需加载的CSS以及JS，去除完全不影响这个页面显示的CSS及JS代码！相关文章链接：《WP 提速之按需合并压缩 JS 文件》

PS2：遐想，以后WordPress主题的设计者直接使用这种办法多好呀！

使用WordPress官网提交版的或者不咋想折腾的朋友，请移步：http://immmmm.com/wordpress-theme-simple-lines-live.html

申明：此主题以SimpleG为框架，重新设计布局，CSS完全重写，感谢SimpleG的作者：虫虾米

说明：此主题未对IE6进行过任何HACK！推荐使用Chrome/Firefox、1024×768分辨率、微软雅黑。

使用说明 FAQ：

Q0：请先修改 header.php 中的 description 和 keywords ！

Q1：为什么我安装后侧边栏里没有内容？

请到“后台-外观-小工具”，直接从左侧拖拽至“侧边栏”即可；

>Q1.1：为什么我按照Q1的回答拖了小工具，而文章页的侧边栏还是空白？

因为此主题单独给内页（即文章页）定义了一个侧边栏，请按照Q1回答的方法把小工具拖到“内页侧边栏”即可；

>Q1.2：你侧边栏中的“最新评论”、“近期热评”、“相关文章”等等，怎么实现的？

请下载插件:wp-kit-cn.7z，详细使用细则请前往：《关于 WordPress 侧边栏的种种》；

Q2：页首导航栏上的内容我到哪修改，要修改哪些内容，怎么修改？

此主题使用了独立的导航文件，导航上的所有内容到menu.php文件中修改，其中代码有很多，主要有以下三类：

<li<?php if ( is_category(6) ) { echo ' class="nav_hover"'; } ?>><a href="<?php bloginfo('url'); ?>/wordpress">折腾WP</a></li>
<li<?php if ( is_page(258) ) { echo ' class="nav_hover"'; } ?>><a href="<?php bloginfo('url'); ?>/about">关于此地</a></li>
<li class="rss"><a href="http://feed.immmmm.com">订阅本站</a></li>

首先修改其中的固定链接和文字，这无需多说。另外，“折腾WP”是一个分类（category）、“关于此地”是一个页面（page），它们前面都有个数字，请修改成它们对应的文章ID。为什么要这样？请看文章：《添加“动态标识当前导航页”的判断语句》。

>Q2.1：为什么你的分类链接没有前缀“category”，直接就是网址+分类名？

请下载插件: top-level-cats.7z，上传激活即可；

Q3：怎么使用跟你一样的文章分页导航效果？

请下载插件： paginator.7z，上传激活，建议插件设置第一项填写15，然后用以下代码：

<?php if(function_exists('wp_paginator')) { wp_paginator(); } ?>

替换主题文件 index.php、archive.php、category.php 和 search.php 中的：

<div class="navigation clearfix">
		<div class="alignleft"><?php previous_posts_link(__('上一页')) ?></div>
		<div class="alignright"><?php next_posts_link(__('下一页')) ?></div>
</div>

Q4：你在使用的“关于此地”和“友情链接”这两个页面是怎么做的？

实际上这两个就是普通的页面（page），此主题已单独写了about.php（关于页面模板）和links.php（链接页面模板），使用时只需“后台-添加新页面”，在右侧属性选择 about 或者 links 即可；

>Q4.1：那我怎么修改“关于此地”和“友情链接”这两个页面中的内容？

请直接修改about.php和links.php这两个文件，友情链接中自行修改链接的分类ID；

<?php get_links(191, '<li>', '</li>', '', TRUE, 'name', FALSE); ?>

Q5：我的评论留言怎么没有嵌套回复的？

请在“后台-设置-讨论”，“其他评论设置”中，勾选“允许嵌套”即可；

>Q5.1：为什么我的留言提交不是AJAX的？

请下载文件： comments-ajax.7z，解压，把comments-ajax.js和comments-ajax.php上传至主题文件夹内。然后在 header.php 中找到：

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

修改为：

<?php if ( is_singular() ){ ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/comments-ajax.js"></script>
<?php } ?>

深入了解请前往：《WordPress 內置嵌套評論專用 Ajax comments》

>>Q5.1.1：回复留言会有邮件通知对方，这是怎么做到的？

请下载文件： comments-ajax-mail.7z，解压……（按Q4.1步骤进行，若Q4.1已解决，可直接单独替换comments-ajax.php即可）注：此功能需服务器主机支持。

深入了解请前往：《Ajax comments 評論回應郵件通知》

Q6：评论框上面那行表情图标点击就会自动添加表情符号到评论框里去，这是怎么实现的？

请下载文件： smiley.7z，解压，传至主题文件夹内，然后在 comments.php 中的 textarea 标签前加上:

<?php include(TEMPLATEPATH . '/smiley.php'); ?>



附4套表情图标：smile_01-04.7z

>Q6.1：评论框里面那个”既然来了，就留个脚印吧。”，怎么加上去？

请下载图片： pinglun.png ，传至主题文件夹 images/ ，然后在主题的style.css文件中的#commentform textarea {}中添加

background:url(images/pinglun.png) no-repeat scroll center center;

>Q6.2：文章里面的不同附件文件下载链接前有不同图标标识，这怎么实现的？

请下载图标：fujian-icons，选择上传需要的图标至主题文件夹 images/ ，然后在主题的style.css文件中添加：

a[href$=".zip"],a[href$=".7z"],a[href$=".rar"]{background:url(images/rar.gif) no-repeat left center;padding-left:19px;}
a[href$=".doc"]{background:url(images/word.gif) no-repeat left center;padding-left:19px;}
a[href$=".pdf"]{background:url(images/pdf.gif) no-repeat left center;padding-left:19px;}

深入了解请前往：《为不同类型的附件添加个性图标》

Q7：为什么你不把那么多好的东东直接集成在发布的主题里呢？

为什么，为什么呢？首先，我把这款主题定位的是：零插件纯CSS无图，超级无敌完全原生WordPress主题！而我又是个爱折腾的人，看到好东东都会不禁折腾折腾给此主题使上的，我认为折腾是一种乐趣，把自己喜欢的东西功能通过自己动手一样样的加到主题中来，这是一个非常非常让人享受的过程！

Q8：XXXXXXXXXXOOOOOOOOOOO

就等你来提出宝贵的Q8了哦，会注上提出者哦~

[2009/10/18 修正] [2009/7/22 旧版]

2009/10/18：修正header.php编码为UTF-8，原为UTF-8+BOM，感谢coolrose同学发现这个小BUG；

侧边栏样式截图：

不信？那请自行把主题中的style.css分隔成100份并标上序号，然后在header.php中插入100个调用代码，再把结果告下我，万分感谢！

进入正题，经过一个简单的分析，我们可以确定CSS一般由：正常使用中的主题和正常使用中的前台插件所调用的。那我们要做的就是把他们合并起来，并让插件和主题都能正常使用。下面分步骤来说明：

1.查看网站共调用了哪几个CSS，简单的办法就是查看网站的源文件，比如说，本站之前调用了/plugins/paginator/skin/paginator3000.css、/plugins/picasa-images-express/picasa-image-express.css、/plugins/picasa-images-express/highslide/highslide.css和主题的CSS；

2.把所有的CSS代码复制到一个CSS文件中，那就主题的style.php好了，整理好保存上传；

3.修改插件的php主文件，取消插件的CSS文件调用，那具体怎么做呢？以插件picasa-images-express为例：

打开插件目录中的picasa-image-express.php，搜索“wp_head”（不含引号），有

add_action('wp_head','pie_addStyleSheet');

在其前加“//”注释掉或者直接删除都行！整个过程就是如此，当然可能有时要搜索这个“wp_footer”，方法步骤同上~

注意：有些不为站长考虑的“驴霸”插件把CSS和JS都在head调用了，那就需要点技术含量了，把调用CSS的相关代码单独删去！这我就不好说了，各位童鞋各自发挥吧~当然，也不排除有些很好心的插件制作者把CSS和JS都在footer，那童鞋们也小心地挑着删吧。

后话：说得是通过优化代码是永远超不过使用一个好的空间地！