编辑“WordPress:Modifying Options Pages”

可以为插件更改当前选项页面。

'''注意:这个操作较为艰难，如果你是个新手，我们不建议你尝试下面的步骤。'''

== 初始化变数 ==

首先，在主要的插件PHP资源中，你应该声明你想要添加到选项页面上的变数：

<br />
<br /> 
<br />
<br />
 
 //在数据库中创建vars的函数
function set_samplePlugin_options () {
      add_option('fake_option_a','value','Description');
      add_option('fake_option_b','value','Description');
      add_option('fake_option_c','value','Description');
 }
 
 //从数据库中删除vars的函数
 function unset_samplePlugin_options () {
      delete_option('fake_option_a');
      delete_option('fake_option_b');
      delete_option('fake_option_c');
 }
 
 //创建/删除插件时，添加和删除vars
 register_activation_hook(__FILE__,'set_samplePlugin_options');
 register_deactivation_hook(__FILE__,'unset_samplePlugin_options');
<br />
<br /> 
<br />
<br />


== 找到插入的 XHTML ==

既然我们已经设置了变数，现在需要使得管理界面能够编辑变数。当然，我们可以使用[[WordPress:Creating Options Pages|一般]]的管理创建界面，但是如果只将其添加到一般的已经创建好的页面，我们不要那样做。

在选项标签下面，我们有五个名称不同的网页，我们可以将选项添加到这些网页：
#options-general.php
#options-writing.php
#options-reading.php
#options-privacy.php
#options-permalink.php
#options-misc.php

接着可能是这个操作最难的步骤：我们的确需要查看得到的源码，查询可以查询XHTML的位置。

我会为例子使用options-reading.php。显然，第一步是要导航到你的站点上的网页，如果需要的话，先登录。查看网页后，我们需要查看网页的源码：

*IE7:     网页 -> 浏览源码
*Firefox: 浏览 -> 网页源码
*Safari:  浏览 -> 浏览源码

在得到的网页上找到你想要添加选项的位置。我希望在"给网页和feeds编码"下面，添加我的选项。

接着，我们要在源码中找到这些词：

78 <tr valign="top">
 79 <th width="33%" scope="row">为网页和 ...编码
 80 <td><input name="blog_charset" type="text" id="博客...

(注意: 根据安装差别，行数字会不同)

现在，让我们看看可以重复使用的全部内容。

注意表格中的这些内容：

77 <table width="100%" cellspacing="2" cellpadding="5"...
 78 <tr valign="top">
 79 <th width="33%" scope="row">为网页和 ...编码
 80 <td><input name="blog_charset" type="text" id="blog...
 81 The character encoding you write your blog in (UTF-...
 82 </tr>
 83 </table>

根据先前的HTML知识（如果你阅读这篇文章，我假定你已经了解HTML）我知道通过添加另一个"TR"标签，我们可以给表格添加另一排。这时，我们需要找到"TR"标签的结尾部分，这样我们可以提升代码在哪里添加新的代码。返回到代码…

81 ... recommended</a>)</td>
 82 </tr>

这是"TR"标签的结尾部分。你注意到结尾部分必须是唯一的，这样我们的代码不会在网页的其它位置找到这个结尾，而且结尾部分也不能太长，否则我们的代码就找不到这个结尾部分。

因此，我选择了: "推荐的</a>)</td>\n</tr>"

我们需要\n，这样我们的代码能够识别有新的一行。稍后我们编写函数的时候，保存字符串。

== 创建新的XHTML ==

既然我们知道了在哪里插入代码，代码的形状，我们就需要创建自己的代码。让我们看看正排：
<tr valign="top">
 <th width="33%" scope="row">
 Encoding for pages and feeds:
 </th>
 <td>
 <input name="blog_charset" type="text" id="blog_charset" value="UTF-8" 
        size="20" class="code" />
 <br />
 The character encoding you write your blog in (UTF-8 is 
 <a href="link">recommended</a>)
 </td>
 </tr>

通过查看网页的显示方式，我们可以分开XHTML不同的部分。标签位于位于中间，"TH"标签，真正的文本框当前是输入标签，而且在"BR标签之后，在下面有个描述。你也会注意到导入的名称和id与你先前设置的选项名称相同。我们稍后写参数值。下面有个例子：
<tr valign="top">
 <th width="33%" scope="row">
 Sample Option:
 </th>
 <td>
 <input name="fake_option_a" type="text" id="fake_option_a" value="" 
        size="20" class="code" />
 <br />
 这是个描述
 </td>
 </tr>

== 编写脚本==

这时我们知道在哪里放入编码，在网页上放入什么内容，但是现在我们需要将XHTML写到网页上。一般来说，我们在自己的页面上编写XHTML，但是这个操作可以自动完成，我们可以通过javascript完成这个操作（因为关于这个，WordPress没有提供filters）。

因此返回到主要的插件PHP，让我们添加函数。我称其为"add_fake_options"，因为它操作：
function add_fake_options () {
 }

使用action hooks，创建admin-footer时，我们需要指示WordPress运行那个函数：
function add_fake_options () {
 }
 add_action('admin_footer', 'add_fake_options');

现在指示函数，通过添加脚本标签，在管理页面上创建javascript。
function add_fake_options () {
      echo '<script type="text/javascript">';
      echo '</script>';
 }
 add_action('admin_footer', 'add_fake_options');

接着我们指示函数只在我们想要的页面上运行（我们也可以通过PHP执行这个操作。这个部分的代码要在网页标签中搜索，并且查看标题是否匹配'options-reading'。如果你使用不同的网页标题，替换显示为options-reading ex: options-writing 或者 options-general的文件名。


function add_fake_options () {
      echo '<script type="text/javascript">';
      echo 'if(window.location.href.indexOf("'.
           'options-reading")!=-1) {';
      echo '}';
      echo '</script>';
 }
 add_action('admin_footer', 'add_fake_options');

现在我们指示函数将先前组后面的内容替换为我们编写的XHTML。在下面的代码中，为在"查找插入的 XHTML"部分查找的的代码，我们使用"replace"函数查找options-reading中的form1 element。语法是：document.form1.innerHTML.replace(insertHTML,insertHtml+replaceHtml);将我们的replaceHtml与options-reading中找到的insertHTML相连接

function add_fake_options () {
      echo '<script type="text/javascript">';
      echo 'if(window.location.href.indexOf("'.
           'options-reading")!=-1) {';
      echo 'document.form1.innerHTML =';
      echo 'document.form1.innerHTML =';
      echo 'document.form1.innerHTML.replace(';
      echo '"recommended</a>)</td>\n</tr>",';
      echo '"recommended</a>)</td>\n</tr>'.
           '<tr valign=\"top\"> '.
           '<th scope=\"row\" width=\"33%\">'.
           'Sample Option:</th> <td>'.
           '<input name=\"fake_option_a\" '.
           'id=\"fake_option_a\" value=\"\" '.
           'size=\"20\" class=\"code\" '.
           'type=\"text\"> '.
           'This is a description</td> </tr>");';
      echo '}';
      echo '</script>';
 }
 add_action('admin_footer', 'add_fake_options');

现在，函数会将选项添加到页面啥啊那个，但是不会显示当前设置，点击更新时，也不会保存选项。在我们输入标签参数值变数内，添加get_option()函数，首先在当前设置中显示：
function add_fake_options () {
      echo '<script type="text/javascript">';
      echo 'if(window.location.href.indexOf("'.
           'options-reading")!=-1) {';
      echo 'document.form1.innerHTML =';
      echo 'document.form1.innerHTML =';
      echo 'document.form1.innerHTML.replace(';
      echo '"recommended</a>)</td>\n</tr>",';
      echo '"recommended</a>)</td>\n</tr>'.
           '<tr valign=\"top\"> '.
           '<th scope=\"row\" width=\"33%\">'.
           'Sample Option:</th> <td>'.
           '<input name=\"fake_option_a\" '.
           'id=\"fake_option_a\" value=\"'.
           get_option('fake_option_a').
           '\" '.
           'size=\"20\" class=\"code\" '.
           'type=\"text\"> '.
           'This is a description</td> </tr>");';
      echo '}';
      echo '</script>';
 }
 add_action('admin_footer', 'add_fake_options');

显示，要显示页面的当前设置，但是为了在管理员点击更新的时候，指示脚本更新设置，我们需要编辑称为page_options的隐藏变数，这个变数包含了用逗号分开的网页上所有选项的列表。首先，我们会使用getElementsByName('page_options')选择隐藏的input object，然后，我们将我们的名称添加到后面有逗号的参数值上：
function add_fake_options () {
      echo '<script type="text/javascript">';
      echo 'if(window.location.href.indexOf("'.
           'options-reading")!=-1) {';
      echo 'document.form1.innerHTML =';
      echo 'document.form1.innerHTML =';
      echo 'document.form1.innerHTML.replace(';
      echo '"recommended</a>)</td>\n</tr>",';
      echo '"recommended</a>)</td>\n</tr>'.
           '<tr valign=\"top\"> '.
           '<th scope=\"row\" width=\"33%\">'.
           'Sample Option:</th> <td>'.
           '<input name=\"fake_option_a\" '.
           'id=\"fake_option_a\" value=\"'.
           get_option('fake_option_a').
           '\" '.
           'size=\"20\" class=\"code\" '.
           'type=\"text\"> '.
           '这是描述</td> </tr>");';
      echo 'document.getElementsByName("page_options")[0]'.
           '.value = '.
           'document.getElementsByName("page_options")[0]'.
           '.value + ",fake_option_a";';
      echo '}';
      echo '</script>';
 }
 add_action('admin_footer', 'add_fake_options');

[[WordPress:Image:ModOptnPageExample.png|图像：ModOptnPageExample.png]]

你添加了选项了:]如果你知道你的行为与我最初发表的评论相反，将选项添加到当前选项页面并不那么难。初始化变数后，要添加更多的选项，你需要在同一个位置的XHTML上添加，格式在page_options列表的名称上添加。