让您的插件设置页面符合 WordPress 2.5 的后台风格

本文主体内容,翻译自:WordPress 2.5 Plugin Settings Pages Style Guide。文中图片摘自原文,我只是按照原文的思路从新叙述了一遍。本文地址:让您的插件设置页面符合 WordPress 2.5 的后台风格。如想转载本文,请连同以上信息一起转载,谢谢合作。

各位插件设计作者………………好!现在有这么个事儿。各位设计出来的插件,后台设计界面可能灰常地漂亮。但是有没有发现用在 2.5 下面以后,已经不是当初你所设计的样子了。仿佛不是很符合 WordPress 2.5 的后台整体风格。最近发现一篇比较有用的文章,可以指引大家如何让自己的插件设置页面与 2.5 的后台整体风格搭调。不管你喜欢还是不喜欢 2.5 的后台风格,毕竟它已经来了。想改啊?祈祷下一版吧(本句,部分摘自英文原文)。

开发插件的朋友可能都知道,WordPress Codex 上面的 migrating plugins and themes 这篇文章讲解了插件和主题开发的一些技术细节,但文中并没有提及应该如何给插件和主题的设置界面编写样式表,好让这些东西符合主程序的后台风格。经过研究,一下是一些让您的插件设置页面,能够和 2.5 看起来比较配套的方法。

嵌套
这个并没有什么改变,依旧是按照以下格式进行嵌套:

<div class="wrap"> </div>

标题
标题应该以一个 H2 标题开始,作为插件的主标题。然后使用 H3 标题,作为插件的副标题。如图:

插件设置项
插件设置项通常包含名称、解释和功能设置内容。想让这些内容看起来漂亮一些。您必须使用表格。表格需要包含以下标记:

<table class="form-table">
<tr>
<th scope="row" valign="top">Name</th>
<td>
<input id="inputid" />
<label for="inputid">explanation</label>
</td>
</tr>
</table>

每组设置项,保持在一行。方便用户理解设置项的功能。如下显示:

提交按钮
在设置页面的最后,就是提交设置的按钮了。写法和下面代码类似就可以:

<span class="submit">
<input name="submit" value="Save Changes" type="submit" />
</span>

实际效果如下图:

大概就是这么多内容。如果您按照以上步骤对您的插件进行优化,那么使用者在使用过程中,会觉得舒服一些。

原文只介绍到这些内容。在此,我还要提醒大家一声。WordPress 2.5 后台部分调用代码和函数发生了变化,虽然变化不大。但老版本的插件可能有一些会在使用过程中出现脚本错误或者页面破碎的状况。希望各位在开发插件的同时,多注意一下主程序升级所带来的相关变更……

Related posts

6 Comments

  1. Posted 2008-03-13 at 09:58 | Permalink

    很好的介绍,希望能出来具体一点的主题教程就好了

  2. Posted 2008-03-13 at 13:11 | Permalink

    这个文章主要的目的是让插件或者主题的后台控制面板更符合 2.5 的风格而已。具体的主题和插件设置教程,仿佛网上已经有很多了吧?

  3. Posted 2008-03-14 at 05:26 | Permalink

    申请交换链接

  4. Posted 2008-03-14 at 08:14 | Permalink

    友情链接已经设置好了。

  5. Posted 2008-03-14 at 13:25 | Permalink

    好像留言有问题啊

    都错位了

  6. Posted 2008-03-14 at 13:36 | Permalink

    可能是开启头像的问题吧。一直没时间调试这个东西呢。准备给他关了。没啥大用……

One Trackback

  1. [...]   本文主体内容,翻译自:WordPress 2.5 Plugin Settings Pages Style Guide。文中图片摘自原文,我只是按照原文的思路从新叙述了一遍。本文地址:让您的插件设置页面符合 WordPress 2.5 的后台风格。如想转载本文,请连同以上信息一起转载,谢谢合作。 [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*