然而事实又未然：这几天都有使用我主题的朋友留言问我怎样才能调整导航按钮的顺序，我不得不告诉他编辑主题文件的方法，还有让他去看一下相关的官方CODEX ，了解一些参数的运用，直到最后他回复说他已经懂了。我想这样折腾别人又折腾自己何必呢，所以我干脆把主题修改一下，用上3.0 中的custom menu功能， 这样大家就轻松多了。

反正3.0 上的新功能已经不是新鲜事儿，很多折腾星人从它的beta版时就已经摸了个透彻，要来个汇总什么的推荐大家看这一篇文章：WORDPRESS 3.0 THEME DEVELOPMENT LINKS，应该错不了。我这次需要的只是custom menu 的功能部分，也不复杂，大家在上面链接里的开头部分就能够知道清楚了，我在这里也没必要再贴次代码，略过。

中间我发现的问题是要怎样兼容3.0之前的版本，在官方CODEX 中有这样一篇推荐文章，说是能够解决新旧版本的兼容问题。我自己试了一下，但没成功；又看了一下3.0 上新的默认主题－twenty ten 上也没有这样考虑的。所以如果有谁知道如何兼容旧版本的话请告知一声，我也想看看。

不过估计就算知道了兼容的方法，我也是不打算去折腾这个。我想在使用WordPress中99% 的人们还是会理所当然地升级到最新版本的；那些不想升级的，基本上就是能自己折腾代码的人吧，应该用不上我来操心。

另外官方为这个新功能留了一个叫$fallback_cb 的后门参数，目的是让用户在没有设置具体的menu时候，默认使用的menu是wp_page_menu这个。因为在我更改的主题中，导航栏是已经有了选择分类显示或者页面显示的功能，所以对我来说，最简单的方法是使用下面这个条件判断：

<?php if ( has_nav_menu( ) ) { ?>

就是说，有用户设置的menu的话就按后台设置的显示，没的话就按我自己的，不一定是默认的wp_page_menu。我觉得这个更好用。

最后，估计大家还是会升级吧，否则在选用主题时候还是要看清楚：有没有人象我一样也在主题介绍的第一项就写上：ONLY BUILT FOR WORDPRESS 3.0。呵呵，要看清楚~

© Jinwen for Jinwen Say, 2010. | Permalink | 35 comments | Add to del.icio.us
Post tags: WordPress, 主题, 升级

• 黑色WordPress主题Js O4 noire发布 (68)
• 雪白无暇的WordPress主题：DXX 2.0 (4)
• 适合图片展示的WordPress主题Professor Theme (6)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 草稿纸风格的WordPress主题构想 (50)
• 自家用皇马粉丝定制版WordPress主题 (33)
• 网页设计中的双色分隔线 (29)
• 继续简洁，新主题 (28)
• 给你们的懒人留言模式 (45)
• 用广告美化网站 (3)

这里我以自己制作的免费主题Js O4w 为例简单说一下。首先我会建立一个新的文件并命名为banner.php，名字大家随便就可以了，把它放到主题的目录中去。而我放置的路径为 inc/banner.php。文件的代码简单如下：

<?php
//* HEAD
define('HEADER_IMAGE', '%s/images/banner-white.jpg'); // %s is theme dir uri
define('HEADER_IMAGE_WIDTH', 930);
define('HEADER_IMAGE_HEIGHT', 200);
define('NO_HEADER_TEXT', true );
define('HEADER_TEXTCOLOR', '');
function admin_header_style() { ?>
<style type="text/css">
#headimg{
background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
color: #333;
float: left;
margin: 0;
padding: 0;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
clear:both;
}
#headimg h1,#desc {
display: none;
}
.wrap {
clear:both;
}
#uploadForm {
margin:0!important;
}
</style>
<?php }
function header_style() { ?>
<style type="text/css">
#banner{
background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
color: #333;
float: left;
margin: 0;
padding: 0;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
</style>
<?php }
if ( function_exists('add_custom_image_header') ) {
add_custom_image_header('header_style', 'admin_header_style');
}
?>

其中，

define('HEADER_IMAGE', '%s/images/banner-white.jpg'); // %s is theme dir uri

这一句的路径是默认主题的图片路径。

而

define('HEADER_IMAGE_WIDTH', 930);
define('HEADER_IMAGE_HEIGHT', 200);

上面的两句是确认主题头部中使用图片的长度和宽度值，这个根据主题的不同而不同。设定这个数值一来是为了让图片符合主题的显示效果，另一个是用来在更换图标时候，对较大图片进行裁剪功能时候的尺寸限制。

接着的两句

define('NO_HEADER_TEXT', true );
define('HEADER_TEXTCOLOR', '');

这里需要说明一下，在我使用的主题中，图片上是没有网站标题和描述显示的，所以我是需要这样的写。如果，在你的主题中，网站标题和描述是在图标内显示的，而你又需要在后台为其添加样式定义的话，可以改成如下：

define('HEADER_TEXTCOLOR', 'ffffff');

其中的ffffff是表示默认显示字样的颜色值，根据主题设计不同而不同。

然后我们需要为WordPress自带的这个模块定义两个样式，分别是在后台选项中头部的显示样式

function admin_header_style()

和主题前台中头部的显示样式

function header_style()

对于这两个样式的定义，大家在最文章开始的代码中能看到，当然也是需要根据主题不同而不同的了。对于我的情况，显示图标的区块定义是#banner 。另外，因为我们已经在这个文件中定义了主题前台的头部显示样式，我们就不再需要在传统的style.css文件中重复定义它了。

基本的设置代码就是如上，重点需要设置的还是上面提及到的两个样式而已，其它的都好理解。最后我们需要把这一个文件包括在主题的function.php文件中，在其内添加一句：

include_once(TEMPLATEPATH . '/inc/banner.php');

上面的路径什么的大家请根据自己的设置自行对上。这里补充要说的是，可能我这样多做一个文件有点多余，其实我们是可以直接把最初的一整段代码直接放入到主题的function.php文件中去的。但有一个情况，就是当你的function.php文件中已经有关于后台选项的代码存在了，那么为了避免不必要的出错修正，可以按我的方法加入，这样会方便点。

如上面的更改一切顺利，我们就能在后台的选项中看到自定义头部的选项了，因为这个模块是WordPress自带的，所以里面的翻译也是同步了。

点击上传按钮，选择自己喜欢的图片，如果图片尺寸大于我们的设定值，我们也可以直接对上传的图片进行裁剪，很方便的。如图，

指定裁剪位置后，点击“裁切头部”，OK, ALL DONE。（另外，当指定新图片后，后台是会多出一个恢复到默认图片的选项，我这里就不多说了。）

P.S. 目前这个功能在Js O4w的最新版1.1.5中已经内置，使用该主题的朋友直接在后台点升级则可。这样的话，大家想更换一下那个圈圈图片的话现在可以了，就象下图一样。希望这个功能能方便地让大家把主题弄得个性一点，尽管我一直觉得那个圈圈图案很好看，呵呵。

© Jinwen for Jinwen Say, 2010. | Permalink | 48 comments | Add to del.icio.us
Post tags: WordPress, 后台, 自定义

• 新主题与TwentyTen (84)
• 投票你喜欢的WordPress 2.7图标 (13)
• WPlite-轻量化你的WordPress (7)
• WordPress自定义字段添加日志图片(4)－提高 (20)
• WordPress自定义字段添加日志图片(3)－完善 (14)
• WordPress自定义字段添加日志图片(2)－开始 (39)
• WordPress自定义字段添加日志图片(1)－引言 (32)
• WordPress后台主题颜色插件 (0)
• WordPress theme Js Paper 2.5 发布 (26)
• WordPress 2.6后台风格主题推荐 (13)

对于主题的基本要求这一点我就不想多说了，因为在官方开发员文档中，有着这一份详细的需检清单和主题描述参考，大家对着它来一个一个检验自己所做的主题就好了。只要大家在提交主题前注册一个账号就好了，这个注册的过程只有从没去过论坛的外星人才不会吧。我想在下面说说一些提交过程中的细节和经验。

认真准备

虽然说不是什么事都能一次过就完善，但能放在目录中的主题都是将要给全世界上的人围观的，所以应该尽量在交作业前认真检查，这是很重要的。怎样检查？一般自己折腾主题的话都会在电脑本地搭建WordPress的吧，首先在本地的利用WordPress的导入功能，把官方已经为你准备好的这一份测试数据导入到你的本地数据中。官方提供的数据中有着各种各样的样式文章，标题啊，引用啊，评论样式啊，很详细。利用它来对自己的主题进行检验最好不过，一看就能看出在样式中还有哪一些显示的细节没注意到和没修正。

这份测试的数据虽然内容很多，大家都耐心地对照修改好了。不能偷懒，因为官方在审查你的主题时候也是用着同样的一份数据，大家还是乖点好了，否则因为其中某个样式没做好，只会耽误了提交的时间。

首次提交

我建议在首次提交的主题，尽量把它保持得功能简单点。首次提交的重点是保证显示样式正常和合符要求，同时基本的浏览功能和评论功能也得必需能正常使用。除此外，一切其它的辅助功能，比如Ajax的效果和复杂代码的运用，甚至是主题后台选项的功能都不要添加！可能看到这里你会反问：为什么要这样，不需要一次完美吗？那些功能我都在本地检测成功的啊。我这样的提议不是说不相信大家对代码的操控能力，而是暂时避免由于官方审核人员对复杂的代码所理解的不同而搁置主题的审查。我想官方目录人员每天要审查的主题并不是个小数，如果他看到的是一个相对简单又没那么多折腾他的功能，审核很快就能通过的了。

同时，首次提交简单的主题也是出于考虑一些人为的不可测因素。比如我在提交的第一个主题中代码都是可以的，当我提交第二个主题，相同的代码却被告知不可以使用！这种情况真的很平常了，我想应该是由于每次审查的工作人员都不一样的原因。看到这里，Welee同学是不是也因为碰上过这种“倒霉”事儿而点下头吧，哈。

再一个建议，一定要保证主题支持侧栏的小工具功能，这样会让审查更容易通过。再极端点，我们大可以不放任何模块在侧栏，只在侧栏写上一句“请在后台启用小工具”来告知用户就行了。避免来个夜长梦多，代码多了，不必要的人为因素也会多。如果你不想侧栏空空的，可以添加一些都是经典的模块，比如文章列表、按月存档之类的来填充下位置就好了。一来这些代码被查出错的机会是零，二来这些东西其实都是必需的。

一切就绪后把主题文件夹压缩成ZIP格式，然后在官方目录中登录账号，上传则可。这一步骤很简单的，不过我每次在Chrome上传就通知出错，倒是在Firefox上传的可靠点。

审查的时间

对于首次的提交，如果按我说的送上尽量简单的主题的话，其实时间很短。按我的经验，一般情况下我会在巴黎时间十八点（北京时间凌晨一点）提交，不出两个小时就会通过的了；再长再长的时间也不超过六个小时。

当提交了的主题在超过六个小时甚至十二个小时还没有被通过的话，我就认为这个主题是有问题的了。如果审查的人员心地好，他会给你发一封邮件并告诉你主题有哪些地方出错。如果我没收到这样的告知邮件，我就直接给他们发一封去问原因，一般情况下，官方是会回复你的提问的。我喜欢这样做，积极点知道问题，尽快去解决。否则就只会不了了之。

而对于日常更新的提交，审查时间是超快的，比上面所说的还要短，我试过半小内就可以了。我想会不会是因为心理因素的影响，审核的工作人员看到你主题都已经通过了，就不会那么较劲地一个一个要点检查你主题，他们的工作量也相对较轻。我不是说他们怠工啊，我只是猜猜而已。

对代码负责

有时候，给碰上了较闲无聊的审核人员，哪怕只是日常更新的主题都会给他来个认真对待。比如我都会让主题通过W3C的认证，然后在页脚处放上检测它们的链接信息。然而却有一次被审查的人员告知在一个存档页面中不能通过认证。那位检查人员还真的一个页面一个页面来检测我的标准声明啊，这倒是让我汗了一把，多么敬业的好员工！所以要说的是，只要在主题中放置的代码都不能马虎了事，既然放上了就得对它负责；要不就干脆不放，多一事不如少一事。

由简到繁慢慢更新

在利用最初几次简单的常规更新骗过审核人员的心理认可后，我们就可以对主题进行一些功能的添加更新了，比如Ajax效果的运用之类。不过还是得注意需要更新的功能还是一个一个的来，你大可以来个一天一小新，但最好还是不要一次过提交多个功能的更新，体贴下别人工作量也好吧。而且，一步一步的更新会更容易发现问题的所在，方便解决。再次提议在主题文件夹内建一个用于描述每次更新内容的changelog.txt文件，我直觉上觉得官方人员是会看那个东西的，这样他们针对性的审查新的更改内容，高效做法来的呢。

复杂功能的更新可能更需要耐心，还得和官方人员进行下沟通，所以多次提交是可能的。每次更新前，大家记得在样式表中把主题的版本号增加一下，否则提交不能。

其它补漏

写到这里也差不多了，大家看一下上面的内容是否有用吧。要注意的东西我也没太多告知了，不过再提一下大家在提交的主题中一定要放上下面这一段的样式代码，必需的：

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}

另外官方对主题页脚处所放的信息也挺注意的。以前我想放上两个自己的链接，一个首页，一个主题的讨论页，都说不行。现在只放上首页的链接罢了，小气的啊。

最后，希望本文对各位都有所帮助，还期待更多国人的主题被收录到目录中去，cause we love WordPress~

© Jinwen for Jinwen Say, 2009. | Permalink | 59 comments | Add to del.icio.us
Post tags: theme, WordPress, 主题

• 我的Js-Ox系列WordPress主题回顾 (37)
• WordPress主题Js-O3-1.5版本更新下载 (58)
• WordPress主题Js W2 1.5.0发布下载 (16)
• WordPress主题Js Orange 1.5下载 (26)
• WordPress theme Js Paper 2.5.1 更新 (24)
• Notice: Otheme团队期待你的加入 (4)
• 黑色WordPress主题Js O4 noire发布 (68)
• 雪白无暇的WordPress主题：DXX 2.0 (4)
• 适合图片展示的WordPress主题Professor Theme (6)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)

（接下来的例子我以主题Js O4w作例）

首先你需要在主题文件中添加本地化支持语句，把下面的代码添加到你主题中的function.php文件中去：

function theme_init(){
load_theme_textdomain('js-o4w', get_template_directory() . '/languages');
}

上面的代码中红色字段随意，它是用来告诉WordPress如何选择那些能本地化语言的代码，一般来说，填个主题的名字就可以了。而绿色的字段是告诉WordPress本地化语言文件的调用路径，一般就是那样写的，大可以不用改变。

有了上面代码的设置后，大家就着手定义一下在主题文件中究竟那些字段需要支持语言的本地化，我这里以侧栏中的一句标题代码作例。在还没有支持语言本地化时候，代码是这样的：

<h2>Most Popular</h2>

因为我希望对上面红色字段Most Popular修改到支持本地化，我只要把代码修改成如下：

<h2><?php _e('Most Popular', 'js-o4w'); ?></h2>

大家能看到修改的内容了吧，再举一例，比如我在footer信息中的一段代码：

<span>Copyright 2009</span>

我要把红色的字段copyright修改到支持本地化，修改代码如下：

<span><?php _e('Copyright', 'js-o4w'); ?> 2009</span>

相信到此大家就很了解是如何修改主题中显示字符段的代码了，注意的上面两句代码中都带有的标识字段：

js-o4w

它就是用来对应在文章最开头那段代码中我说的随意那部分，它们之间是要对应的。然后大家把需要修改的都修改后，那接下来怎样对这些需要本地化的字段进行翻译呢？我们继续说下去。

接着要去下载一个Poedit这个编辑工具。然后我们需要在主题的目录中新建一个文件夹，因为我们需要在这个文件夹中放置翻译好供系统读取的文件，根据本文开端代码中的绿色字段部分，我们这个文件夹的名字是：languages。

下一步利用Poedit新建一个“消息目录文档”，如下图：

然后它需要我们对这个文档初始设置一下。

© Jinwen for Jinwen Say, 2009. | Permalink | 45 comments | Add to del.icio.us
Post tags: WordPress, 主题, 多语言, 技巧, 本地化

• 我的WordPress主题这样做(7)-相关标签应用 (13)
• 我的WordPress主题这样做(6)-留言楼层样式技巧 (36)
• 我的WordPress主题这样做(5)-留言头像的处理 (18)
• 我的WordPress主题这样做(3)-文章质疑应用 (20)
• WordPress自定义字段添加日志图片(4)－提高 (20)
• WordPress自定义字段添加日志图片(3)－完善 (14)
• 黑色WordPress主题Js O4 noire发布 (68)
• 雪白无暇的WordPress主题：DXX 2.0 (4)
• 适合图片展示的WordPress主题Professor Theme (6)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)

可能题目的意思不好明白，因为我不是做网页设计的，所以我是找不到合适的词语来描述。看看下面的图示会清楚很多：

在SOHTANAKA 网站上我们能看到正文一栏各文章之间的分隔横线，还有它在侧栏列表中的分隔线，都是由两种颜色并且高度均为1px的两横线组成。效果大家能看到，是不是觉得很不一样，至少会觉得让人喜欢。相同的例子还可以有下面一些的网站设计：

当你把上面图片放大后，你都能看到这些双色的分隔线其实都是以一深一浅的两线组成。但要如何设计这些颜色的配合呢？这也是我觉得没办法回答的，毕竟是要靠设计的经验和相关的专业才能做出显著的效果。但象我们一般弄弄主题设计玩一下的是不是也能班门弄斧一下，能速成的找到一些“设计感觉”？我自己想到有一个很“山寨”的办法：

首先以线条的背景色为基础，利用一些网页配色网站提供的建议，比如Color Scheme Designer 3。以上面第一图为例，获取它的背景色为#151D27。然后在上面的网站上分析该颜色，它会提供一个相关颜色建议给我们：

我们能从上图中看到在中间最大块颜色（前面输入的背景色）的左右分别是相对较浅和较深的颜色建议，这两种颜色就是我们能用来构成双色线的接近色了。对比一下原设计放大图中的两种颜色：

是不是有点象？我说的这是建议色或者是接近色的原因是，本来在设计中就没有固定的颜色配搭，一切全凭各人喜好。我们可以根据上面的配色再做适当调整，只是如果采用专业的颜色配搭会让我们这些“外行”显得“专业”一点，当然也省事一点。

说到这里就不能不推荐下一款由国人Alan制作的WordPress主题－DarkLight 2.3，在其上面我们也能看到相同的效果设计。（主题很赞，建议大家看完此文再去围观下）

到此，可能大家都会发现这样一种双色线在深色的网页设计中会更显效果，如果是浅色调的网页配色呢？是否也能弄出如斯效果？现在我们一起再看些例子：

看了例子后，大家应该跟我的想法是一样的：对于绝对的白色背景，这样的效果会很不明显的。因为很多时候我们只能利用灰色的背景色，再搭配一条颜色较深的灰线和一条白线。所以在浅色配色的网页中，配以灰－白结合的双色线是最保险的。当然上面说的只是我的感觉，也不能一概而论，一切以实践为检验标准……（又开始念书了，呵。）

文章最后，我也再推另外一款同样由国人Vichair制作WordPress主题－Lifedit，同样精彩；大家顺带看看他是怎样设计双色线的。（Bye啦，别忘了给我留言，哈哈。）

© Jinwen for Jinwen Say, 2009. | Permalink | 29 comments | Add to del.icio.us
Post tags: WordPress, 主题, 网站, 设计

• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 草稿纸风格的WordPress主题构想 (50)
• 给你们的懒人留言模式 (45)
• 现用主题通过CSS3和XHTML1.1.的认证 (9)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)
• 利用JQuery自动为文章内图片添加背景效果 (26)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• WordPress动态页角翻页效果实现 (7)
• WordPress主题设计大赛 (3)
• WordPress中你的style样式文件有多大 (12)

熟悉一点WordPress的朋友自然会想到利用分类或者标签功能，比如为每一篇发布主题的文章定义一个指定的分类或者标签，然后访问这个分类或标签的页面链接，它自然就是一个汇总页面了。当然我也是基于这个方向来考虑，但我还想在汇总页面上为各个主题添加一个缩略图，这样就更为直观，不是吗？还有就是只显示简略介绍就够了，不用什么日期啊评论啊的信息。所有这些就必须要自己制作一个页面模板了。OK，那就做一个页面模板，然后在后台新建一个页面，选取该模板方法。

如何在WordPress做一个页面模板？熟悉的朋友跳过，不太熟悉的朋友可以参照这篇文章建立一个。因为要筛选显示那些只是发布主题用的日志，所以在模板内的主循环代码部分：

<?php while ( have_posts() ) : the_post() ?>

的前面添加筛选用的代码：

<?php
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('tag=idesign&showposts=' . $limit=15 . '&paged=' . $paged);
$wp_query->is_archive = true; $wp_query->is_home = false;
?>

红字部分是指定筛选标签为“idesign”的所有文章，如果你是通过分类来区别的话，把“tag=”换成“cat=分类ID号”则可。“15”就是指定读取的文章数。

到此是一个筛选功能的完成，至于需要在汇总页面中添加各个主题的图片，我希望它能自动读取该篇日志中的图片。因为发布主题的日志一定（一般情况下）带有主题的预览图，所以直接读取它并显示出来就行了。

在模板的主循环里，在你需要显示图片的位置中添加如下代码：

<img src="<?php echo catch_that_image() ?>" alt="" />

建议为该代码前后添加一个<div>的以方便控制它的样式，比如大小，是否浮动显示等。不要忘记的是，你必须在主题模板的function.php文件内同时添加上下面的功能代码，否则图片不会自动读取：

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "在这里指定如果没有图片则显示的默认图片路径";
}
return $first_img;
}

这样，系统就能自动读取在该篇文章中的第一个图片，注意是第一个；所以请把需要作为缩略图显示的图片放在日志中的首位。

所有上面操作都完成后，在后台新建页面，选取刚建立的页面模板，也不用写什么内容的了，存档后访问该页面，就会显示那些需要显示的文章，还有文章内的第一个图片。

因为我这里是利用JQuery直接读取这个模板，如果你也需要这样，你需要把上述的模板文件更改一下。在其开头位置添加：

<?php
if ($_SERVER["REQUEST_METHOD"] != "POST") {
header('Allow: POST');
header("HTTP/1.1 405 Method Not Allowed");
header("Content-type: text/plain");
exit;
}
$db_check = true;
function kill_data() {
return '';
}
function check_db() {
global $wpdb, $db_check;
if($db_check) {
// Check DB
if(!$wpdb->dbh) {
echo('Our database has issues. Try again later.');
} else {
echo('We\'re currently having site problems. Try again later.');
}
die();
}
}
ob_start('kill_data');
register_shutdown_function('check_db');
require_once(dirname(__FILE__)."/../../../wp-config.php");
$db_check = false;
ob_end_clean();
nocache_headers();
function fail($s) {
header('HTTP/1.0 500 Internal Server Error');
echo $s;
exit;
}
?>

然后指定一个激活的js效果，比如通过点击动作后读取这个页面；在你的模板js文件中添加：

$('激活链接的样式名字').click(function(){
$.ajax({
url : "/wp-content/themes/主题文件夹名字/上面制作的模板文件.php",
type: 'POST',
beforeSend: function() {
/*
这里是读取数据前的一系列动作，比如要隐藏什么，显示什么的，根据主题不同不同
*/
},
success : function (data) {
/*下面一行是读取成功后数据显示方式。比如我是把数据附加到一个名称为"#qs-area"区块内并通过"slideDown"的方式显示出来。*/
$("#qs-area").html(data).slideDown('slow');
}
});
return false;
});

在这里关于AJax的方法我写得较为简单，因为并不是本文的重点；或者大家需要折腾的话，有问题也可以在这里说下，看我能否帮上忙好了。通过上面的方法后，日后当我有新主题发布，我就只需要在撰写该篇文章的同时为它添加一个指定的标签后，它就会自动被添加到我的主题汇总页面中去，当然还带了张缩略图。一个很适合我的懒方法，呵呵。当然，如果你也需要汇总一些带图片的文章，此方法也适用，按需灵活处理一下则可。

© Jinwen for Jinwen Say, 2009. | Permalink | 24 comments | Add to del.icio.us
Post tags: JQuery, theme, WordPress, 模板

• 让回复留言的按钮动态点JQuery版 (31)
• 在WordPress中利用Jquery隐藏较旧留言 (15)
• WordPress中Ajax留言的简单实现 (42)
• DIY WordPress contact form with JQuery (1) (25)
• 让回复留言的按钮动态点 (40)
• 网站RSS订阅的JQuery弹出效果实现 (49)
• 给你们的懒人留言模式 (45)
• 清新绿色WordPress主题“Le Mag”发布下载 (36)
• 浅说WordPress自带分页的CSS样式设计 (15)
• 新主题与TwentyTen (84)

其实我一直是想弄一个很随意的风格主题，就是说自己喜欢把按钮往哪里添加就添加，而不是象99%的主题一样，很正规地标题下是导航栏，然后又是左右两侧栏，页脚什么的。形象地说就是我们平时工作生活中的草稿纸，喜欢往哪里涂画就往哪里，在哪里添加注释就添加注释。如果有朋友也是设计类专业或相关工作的，看看你们的随身笔记，你会明白我是想表达些什么。

我想模糊一切常规的风格设计，简单说就是让版面有点“乱”，有点“花”，让大家不知道究竟在哪里会出现一些功能按钮；因为当我们在草稿纸上乱涂时候，我们是从不知道“规划”这个东西的，哪里有空白位置就会用上。而很多时候我们的灵感就是在哪些空白的地方处。

我之前的主题，如Js O4w，Js noire，或者会给人的感觉是“精致”，“细节到位”，“舒服”等，但在我设计它们的时候，绝对不是那样的。它们是从很乱很乱地整理出来，或者因为大家喜欢整齐的风格。我把自己乱七八糟而又杂乱的思想记录在随身笔记中，然后再尝试把它们的原貌直观地反映到设计中。所以，我昨晚随便弄了一下的一个主题设计图：

在PS上弄了很多很多的图层，因为如大家所看，概念图中的每一个图标位置按我的构想，都分别是功能按钮的所在。大家将看不到具体的导航栏之类的，而更多的功能我会利用JQuery实现，如页面的刷新，存档的调用。这些都不难去实现，也象是现在我使用的主题中一些功能一样。而图中也是没有一条线是笔直的，我当然是故意这样做，否则就不叫草稿纸的风格了。但当我现细看这个图后，发觉版面真的是乱，或者应该再修整一下；但如果继续修整下去，我会认为迟早演变成现在的主题风格，所以我也就停了下来了。

总的来说，我觉得这类乱乱风格的主题不太常见，而目前我能完成的也只能是首页，如上图；当然是我有时间去完成它。文章单页的我还没有概念，所以也不知道如何继续下去了；当然也会因为我对照它和现在的主题，我发现这类如未经雕琢一样的随意风格是否会受大家所爱，太有个性了！我也这样认为。或者，它是不是就只应该存在于草稿纸中，而不是张扬地出现在前台？不知道大家是不是也这样认为？

© Jinwen for Jinwen Say, 2009. | Permalink | 50 comments | Add to del.icio.us
Post tags: idesign, WordPress, 主题, 设计

• 黑色WordPress主题Js O4 noire发布 (68)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 自家用皇马粉丝定制版WordPress主题 (33)
• 网页设计中的双色分隔线 (29)
• 给你们的懒人留言模式 (45)
• 现用主题通过CSS3和XHTML1.1.的认证 (9)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• WordPress主题设计大赛 (3)
• WordPress中你的style样式文件有多大 (12)

因为通过CSS SPRITES这个方法，圆角的图片都是整合到主题所带的背景图片中，所以我觉得它并不浪费，反正一个主题肯定就要带上背景图片的；我也在网上看到过很多说是CSS SPRITES的方法介绍，但我都没有认真看，或者它们所说的跟我一直以来实现的方法相同；尽管这样，我也写写我自己喜欢的圆角实现吧。

首先是在需要实现圆角的部分，添加一组DIV，分别代表左上，右上，左下，右下圆角的位置；而它们的放置位置是你需要实现圆角样式的那一个DIV。比如在我的主题中，紧接<body>的那一个DIV就是我要添加圆角的：

<div id="wrapper">
...
</div>

添加四角区块，并为它添加一个class："encadre"。

<div id="wrapper" class="encadre">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
...
</div>

然后在主题的样式文件中添加下面的代码：

#wrapper .tl{background:url(imgs/allbgs.png) no-repeat -582px 0;}
#wrapper .tr{background:url(imgs/allbgs.png) no-repeat -591px 0px;}
#wrapper .bl{background:url(imgs/allbgs.png) no-repeat -582px -9px;}
#wrapper .br{background:url(imgs/allbgs.png) no-repeat -591px -9px;}
.encadre{margin:0;padding:0;position:relative;}
.encadre .tl,.encadre .tr,.encadre .bl,.encadre .br{font-size:0px;height:9px;line-height:1px;overflow:hidden;position:absolute;width:9px;}
.encadre .tl{background-position:left top;left:0;top:0;}
.encadre .tr{background-position:right top;right:0;top:0;}
.encadre .br{background-position:right top;bottom:0;right:0;}
.encadre .bl{background-position:left top;bottom:0;left:0;}

大家从上面红字的height和width数值知道，我要实现的圆角半径是9个px。

接下来要做的是画一下圆角的图片了，利用photoshop，在主题原有的背景图片中（假设你和我一样只使用一张背景图片）或者新建一个背景图片，名字叫：allbgs.png。

在allbgs.png中画上一个半径是9px的圆。这里的圆颜色是你添加圆角所在区域的颜色，如我的模板是白色的，所以圆就是白色；圆外的颜色是你的body或者是你添加圆角区域的外围颜色，如我的背景颜色是#f7f7f7，所以圆外颜色就是#f7f7f7。

最后就是修改一个样式中圆角图片的所在位置，我们需要的是找出四个顶点的位置，并把它们在上面样式代码中表现出来。这一步不难，大家对比一下上面的代码中的数字和下图的关系就知道怎样做了。

我自己比较喜欢这个方法，基本上实现不难；而且在各个浏览器下都不会出现显示的问题。另外因为它本来就附在需要加载的背景图片中，所以也不会产生说什么图片加载太多速度变慢的情况，本来这个小圆角的图片体积就小得可以不计较了，不是吗？

© Jinwen for Jinwen Say, 2009. | Permalink | 36 comments | Add to del.icio.us
Post tags: CSS, WordPress, 圆角

• 现用主题通过CSS3和XHTML1.1.的认证 (9)
• 浅说WordPress自带分页的CSS样式设计 (15)
• 如何让IE6-IE7-FF的CSS样式一致 (5)
• 在WordPress中使用Dock样式导航栏 (4)
• 利用JQuery自动为文章内图片添加背景效果 (26)
• 利用JQuery前台切换网站的样式实现 (22)
• WordPress主题Js W2 demo (4)
• WordPress中你的style样式文件有多大 (12)
• WordPress 2.7 嵌套留言的设计样式补充 (20)
• CSS圆角样式代码 (4)

切换效果参照本站。

1. 切换样式的按钮代码：

<div id="style-switch">
<ul>
<li><a href="#?style=white" rel="white" class="styleswitch white">Day</a></li>
<li><a href="#?style=black" rel="black" class="styleswitch black">Night</a></li>
</ul>
</div>

上面的按钮代码请根据你的网站设计放置。比如在我这里是放到header.php文件中的。

2. 样式引用代码：

<?php if($_COOKIE['style'] == 'black') : ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" />
<?php else : ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" />
<?php endif; ?>

在这里我简单说明一下：

1. 因为在后面的js代码中会于浏览器的cookie部分写入一个cookie记录“style”，所以在这里我会让浏览器根据记录进行样式的调用（这里为两个样式，一个“white”，另一个“black”）。
2. 当浏览器存在“style”的cookie记录，并记录为“black”时候，则先读取black.css文件，这可以说是主样式文件；及后再读取辅助样式（就是供需要切换的样式），white.css。
3. 如果浏览器没有任何“style”的样式cookie记录，或者“style”的样式cookie记录为“white”时候，则主题先读取white.css文件，再读取black.css文件。
4. 在这里需要补充的是，使用PHP的cookie读取会比使用js的cookie读取更为有效。因为我原来是利用js进行cookie的读取动作，但由于js的加载还是需要那么一点时间，所以在切换样式后的页面浏览中并不完美。如果你以前发现选择黑色主题后，再浏览页面，会出现先是一瞬间的白色主题，然后才是黑色主题的现象。这就是我要说明的情况了。现在使用PHP代码则不再存在这个不足。

3. Javascript部分代码：（注意前提是你已经在网站中调用了JQuery库）

(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function() {
$('body').append('<div id="overlay" />');
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '2000%',
zIndex: 1000,
background: 'black'
})
.fadeIn(500);
switchStylestyle(this.getAttribute("rel"));
$('#overlay').fadeOut(500);
return false;
});
});
function switchStylestyle(styleName)
{setTimeout(function() {
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});}, 500);
createCookie('style', styleName, 365);
}
})(jQuery);

上面的部分是点击动作部分。我在中间添加了一段#overlay的块样式是为了在切换过程中制作一个灯箱效果，这样会比突然的切换来得更为自然。

然后还需要添加产生cookie记录的功能代码：

function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

还有添加删除cookie记录的功能代码：

function eraseCookie(name)
{
createCookie(name,"",-1);
}

到此，完成上面三部后就可以了，希望大家看得明白。

© Jinwen for Jinwen Say, 2009. | Permalink | 22 comments | Add to del.icio.us
Post tags: CSS, JQuery, WordPress, 主题

• 给你们的懒人留言模式 (45)
• 现用主题通过CSS3和XHTML1.1.的认证 (9)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 利用JQuery自动为文章内图片添加背景效果 (26)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• 准备发布现用WordPress主题Js O3 (25)
• 不困惑，主题黑白共存 (39)
• WordPress中你的style样式文件有多大 (12)
• WordPress theme Js O4w released (118)
• WordPress 2.7 嵌套留言的设计样式补充 (20)

做法首先是你的网站加载了JQuery，然后在你需要放置沙发头像的地方添加一个<div>，内容为空即可：

<div id="shafa"></div>

然后要做的就是利用js复制沙发的头像，并把复制的内容填入上面设定的<div>内：

$(document).ready(function() {
$(".commentlist .avatar:last img").clone().appendTo("#shafa");
});

这样就可以啦，注意上面的avatar假设是你主题模板中包含头像图片的样式名称；然后:last这一处是对于象我一样的倒序留言板设定的，因为沙发的同学是在留言列表的最后；而对于顺序留言板，则改为:first。

还有就是不要忘记进行CSS的样式定义。再有的是利用相同的方法你可以复制指定的内容，如沙发的留言内容，名字等，只要对应一下它们的样式名称则可。

© Jinwen for Jinwen Say, 2009. | Permalink | 25 comments | Add to del.icio.us
Post tags: JQuery, 主题, 留言

• 给你们的懒人留言模式 (45)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 本站JQuery隐藏留言的代码修正 (12)
• 无折腾不WordPress (38)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 利用JQuery前台切换网站的样式实现 (22)