WordPress:Modifying Options Pages
Modifying already existing option pages for plug-ins can be done, although it's not pretty.
可以为插件更改当前选项页面。
Note: This is not relatively easy, so if you're a beginner I wouldn't recommend trying this.
注意:这个操作较为简单，如果你是个新手，我们建议你尝试下面的步骤。
Initializing Variables
初始化变数
First, inside your main plug-in PHP source you need to declare the variable(s) that you wish to add to the options pages:
首先，在主要的插件PHP资源中，你应该声明你想要添加到选项页面上的变数：
//Function to create the vars in the database
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');
}
//Function to delete the vars from the database
function unset_samplePlugin_options () {
delete_option('fake_option_a');
delete_option('fake_option_b');
delete_option('fake_option_c');
}
//Add and Remove vars when creating/removing plugin
register_activation_hook(__FILE__,'set_samplePlugin_options');
register_deactivation_hook(__FILE__,'unset_samplePlugin_options');
//在数据库中创建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');
Finding the insert XHTML
找到插入的 XHTML
Now that we have the variables set we have to give the admin a way to edit them. Sure, we could just use the normal way of creating interfaces for the admin, but why do that when we can just add it on to another already made page.
既然我们已经设置了变数，现在需要使得管理界面能够编辑变数。当然，我们可以使用一般的管理创建界面，但是如果只将其添加到一般的已经创建好的页面，我们不要那样做。
Under the options tab we have five differently-named pages that we can add our options to:
在选项标签下面，我们有五个名称不同的网页，我们可以将选项添加到这些网页：
- options-general.php
- options-writing.php
- options-reading.php
- options-privacy.php
- options-permalink.php
- options-misc.php
- options-general.php
- options-writing.php
- options-reading.php
- options-privacy.php
- options-permalink.php
- options-misc.php
So here comes probably the hardest part of doing this: we actually have to look through the rendered source to look for a place to insert our own XHTML.
接着可能是这个操作最难的步骤：我们的确需要查看得到的源码，查询可以查询XHTML的位置。
I'll be using options-reading.php for an example. So obviously the first step would be to navigate to that page on your site, logging in if needed. Once you have the page up. We'll need to look at the source of the page:
我会为例子使用options-reading.php。显然，第一步是要导航到你的站点上的网页，如果需要的话，先登录。查看网页后，我们需要查看网页的源码：
- IE7: Page -> View Source
- Firefox: View -> Page Source
- Safari: View -> View Source
- IE7: 网页 -> 浏览源码
- Firefox: 浏览 -> 网页源码
- Safari: 浏览 -> 浏览源码
Using the rendered page spot a location where you want to add your option. I wish to add mine right below "Encoding for pages and feeds".
在得到的网页上找到你想要添加选项的位置。我希望在"给网页和feeds编码"下面，添加我的选项。
Next, we'll look for those words in the source:
接着，我们要在源码中找到这些词：
78 79 Encoding for pages and ... 80 <input name="blog_charset" type="text" id="blog... 78 79 为网页和 ...编码 80 <input name="blog_charset" type="text" id="博客...
(Note: Line numbers may vary based on installation)
(注意: 根据安装差别，行数字会不同)
Now, let's look for the whole element that we can repeat for our uses.
现在，让我们看看可以重复使用的全部内容。
Notice this particular entry is in a table:
注意表格中的这些内容：
77 <table width="100%" cellspacing="2" cellpadding="5"...
78 79 Encoding for pages and ... 80 <input name="blog_charset" type="text" id="blog...
81 The character encoding you write your blog in (UTF-...
82 83
77 <table width="100%" cellspacing="2" cellpadding="5"...
78 79 为网页和 ...编码 80 <input name="blog_charset" type="text" id="blog...
81 The character encoding you write your blog in (UTF-...
82 83
So from previous HTML knowledge (which I assume you have if you are reading this) I know that we can add another row to the table by adding another "TR" tag. At this point we need to find the ending of the "TR" tag so we can tell our code where to add our new one. So back to the code...
根据先前的HTML知识（如果你阅读这篇文章，我假定你已经了解HTML）我知道通过添加另一个"TR"标签，我们可以给表格添加另一排。这时，我们需要找到"TR"标签的结尾部分，这样我们可以提升代码在哪里添加新的代码。返回到代码…
81 ... recommended</a>) 82 81 ... recommended</a>) 82 Thats the ending of the "TR" tag. You'll note that the end has to be distinct, so our code won't find it anywhere else in the page, and also that the end can't be too long, or else our code won't be able to find it. 这是"TR"标签的结尾部分。你注意到结尾部分必须是唯一的，这样我们的代码不会在网页的其它位置找到这个结尾，而且结尾部分也不能太长，否则我们的代码就找不到这个结尾部分。 So I have chosen: "recommended</a>)\n" 因此，我选择了: "推荐的</a>)\n" We need the \n there in order for our code to be able to recognize that there is a new line. Save that string for later when we write the function. 我们需要\n，这样我们的代码能够识别有新的一行。稍后我们编写函数的时候，保存字符串。
Creating new XHTML
创建新的XHTML
Now that we know where to insert the code, and what the code should look like, we need to create our own code. Let's take a look at the whole row:
既然我们知道了在哪里插入代码，代码的形状，我们就需要创建自己的代码。让我们看看正排：
Encoding for pages and feeds:
<input name="blog_charset" type="text" id="blog_charset" value="UTF-8"
size="20" class="code" />
The character encoding you write your blog in (UTF-8 is
<a href="link">recommended</a>)
Encoding for pages and feeds:
<input name="blog_charset" type="text" id="blog_charset" value="UTF-8"
size="20" class="code" />
The character encoding you write your blog in (UTF-8 is
<a href="link">recommended</a>)
By looking at how the page is displayed we can pick apart the different elements of the XHTML. The label is located in between the "TH" tags the actual text box is of course the input tag and they put a description below it after the "BR tag. You'll also notice that the name and the id of input have to be equal to the option name that you set up earlier. We'll get into writing the value later. So heres an example: 通过查看网页的显示方式，我们可以分开XHTML不同的部分。标签位于位于中间，"TH"标签，真正的文本框当前是输入标签，而且在"BR标签之后，在下面有个描述。你也会注意到导入的名称和id与你先前设置的选项名称相同。我们稍后写参数值。下面有个例子：
Sample Option:
<input name="fake_option_a" type="text" id="fake_option_a" value=""
size="20" class="code" />
This is a description
Sample Option:
<input name="fake_option_a" type="text" id="fake_option_a" value=""
size="20" class="code" />
这是个描述
Writing the Script
编写脚本
So at this point we have where to put the code and what to put in the page but we now need a way of writing the XHTML to the page. Normally we would do just that write it in ourselves, but since this has to be done automatically we will do it through javascript (since WordPress doesn't provide us with filters for that).
这时我们知道在哪里放入编码，在网页上放入什么内容，但是现在我们需要将XHTML写到网页上。一般来说，我们在自己的页面上编写写XHTML，但是这个操作可以自动完成，我们可以通过javascript完成这个操作（因为关于这个，WordPress没有提供filters）。
So back to the main plug-in PHP let's add a function. I'll call it "add_fake_options" because it will do just that:
因此返回到主要的插件PHP，让我们添加函数。我称其为"add_fake_options"，因为它操作：
function add_fake_options () {
}
function add_fake_options () {
}
Now we need to tell WordPress to run that function when creating the admin-footer using action hooks:
使用action hooks，创建admin-footer时，我们需要指示WordPress运行那个函数：
function add_fake_options () {
}
add_action('admin_footer', 'add_fake_options');
function add_fake_options () {
}
add_action('admin_footer', 'add_fake_options');
Now lets tell it to create a javascript on the admin pages by adding script tags:
现在指示函数，通过添加脚本标签，在管理页面上创建javascript。
function add_fake_options () {
echo '<script type="text/javascript">';
echo '</script>';
}
add_action('admin_footer', 'add_fake_options');
function add_fake_options () {
echo '<script type="text/javascript">';
echo '</script>';
}
add_action('admin_footer', 'add_fake_options');
Next we'll tell it to only run on the page we want (we could also do this through PHP as well. What this part of the code does is it will search through the page title and see if it matches 'options-reading'. If you are using a different page substitute the file-name where it says options-reading ex: options-writing or options-general.
接着我们指示函数只在我们想要的页面上运行（我们也可以通过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');
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');
Now let's tell it to replace the content of the end of the previous row with that and the XHTML that we wrote. In the code below we use the "replace" function to look through the form1 element on options-reading for the code that we looked for in section "Finding the Insert XHTML". The syntax is: document.form1.innerHTML.replace(insertHTML,insertHtml+replaceHtml); Thus concatenating our replaceHtml to the insertHTML that it finds in options-reading
现在我们指示函数将先前组后面的内容替换为我们编写的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>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.
'<input name=\"fake_option_a\" '.
'id=\"fake_option_a\" value=\"\" '.
'size=\"20\" class=\"code\" '.
'type=\"text\"> '.
'This is a description ");'; echo '}'; echo '</script>'; } add_action('admin_footer', 'add_fake_options'); 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>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.
'<input name=\"fake_option_a\" '.
'id=\"fake_option_a\" value=\"\" '.
'size=\"20\" class=\"code\" '.
'type=\"text\"> '.
'This is a description ");'; echo '}'; echo '</script>'; } add_action('admin_footer', 'add_fake_options'); Now currently as it is it will add the option to the page but not display it's current setting nor save the option upon clicking update. Let's have it display the current setting first by adding a get_option() function inside the value variable of our input tag: 现在，函数会将选项添加到页面啥啊那个，但是不会显示当前设置，点击更新时，也不会保存选项。在我们输入标签参数值变数内，添加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>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.
'<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 ");'; echo '}'; echo '</script>'; } add_action('admin_footer', 'add_fake_options'); 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>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.
'<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 ");'; echo '}'; echo '</script>'; } add_action('admin_footer', 'add_fake_options'); Now, it should also display it's current setting but in order to tell the script to update it when the admin clicks update we need to edit a hidden variable called page_options which contains a comma-separated list of all the options on the page. First we'll select the hidden input object using getElementsByName('page_options') then we'll add our name onto the value of it following a comma: 显示，要显示页面的当前设置，但是为了在管理员点击更新的时候，指示脚本更新设置，我们需要编辑称为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>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.
'<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 ");'; 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'); 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>)\n",'; echo '"recommended</a>)\n'. ' '. ''. 'Sample Option: '.
'<input name=\"fake_option_a\" '.
'id=\"fake_option_a\" value=\"'.
get_option('fake_option_a').
'\" '.
'size=\"20\" class=\"code\" '.
'type=\"text\"> '.
'这是描述 ");'; 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 And there you have it :] adding options to a current option page isn't that hard if you know what you are doing contrary to my comment at the top. To add more then one option after initializing the variable you need to add on the XHTML to the same place as well as the name on to the page_options list. 你添加了选项了:]如果你知道你的行为与我最初发表的评论相反，将选项添加到当前选项页面并不那么难。初始化变数后，要添加更多的选项，你需要在同一个位置的XHTML上添加，痛殴格式在page_options列表的名称上添加。
