WordPress: Modifying Options Pages:修订间差异
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
可以为插件更改当前选项页面。 | 可以为插件更改当前选项页面。 | ||
'''注意:这个操作较为艰难,如果你是个新手,我们不建议你尝试下面的步骤。''' | |||
'''注意: | |||
== 初始化变数 == | == 初始化变数 == | ||
首先,在主要的插件PHP资源中,你应该声明你想要添加到选项页面上的变数: | 首先,在主要的插件PHP资源中,你应该声明你想要添加到选项页面上的变数: | ||
第19行: | 第11行: | ||
<br /> | <br /> | ||
<br /> | <br /> | ||
//在数据库中创建vars的函数 | //在数据库中创建vars的函数 | ||
function set_samplePlugin_options () { | function set_samplePlugin_options () { | ||
第58行: | 第29行: | ||
register_activation_hook(__FILE__,'set_samplePlugin_options'); | register_activation_hook(__FILE__,'set_samplePlugin_options'); | ||
register_deactivation_hook(__FILE__,'unset_samplePlugin_options'); | register_deactivation_hook(__FILE__,'unset_samplePlugin_options'); | ||
<br /> | |||
<br /> | |||
<br /> | |||
<br /> | |||
== 找到插入的 XHTML == | == 找到插入的 XHTML == | ||
既然我们已经设置了变数,现在需要使得管理界面能够编辑变数。当然,我们可以使用[[WordPress:Creating Options Pages|一般]]的管理创建界面,但是如果只将其添加到一般的已经创建好的页面,我们不要那样做。 | 既然我们已经设置了变数,现在需要使得管理界面能够编辑变数。当然,我们可以使用[[WordPress:Creating Options Pages|一般]]的管理创建界面,但是如果只将其添加到一般的已经创建好的页面,我们不要那样做。 | ||
在选项标签下面,我们有五个名称不同的网页,我们可以将选项添加到这些网页: | 在选项标签下面,我们有五个名称不同的网页,我们可以将选项添加到这些网页: | ||
#options-general.php | #options-general.php | ||
#options-writing.php | #options-writing.php | ||
第78行: | 第46行: | ||
#options-permalink.php | #options-permalink.php | ||
#options-misc.php | #options-misc.php | ||
接着可能是这个操作最难的步骤:我们的确需要查看得到的源码,查询可以查询XHTML的位置。 | 接着可能是这个操作最难的步骤:我们的确需要查看得到的源码,查询可以查询XHTML的位置。 | ||
我会为例子使用options-reading.php。显然,第一步是要导航到你的站点上的网页,如果需要的话,先登录。查看网页后,我们需要查看网页的源码: | 我会为例子使用options-reading.php。显然,第一步是要导航到你的站点上的网页,如果需要的话,先登录。查看网页后,我们需要查看网页的源码: | ||
*IE7: 网页 -> 浏览源码 | *IE7: 网页 -> 浏览源码 | ||
*Firefox: 浏览 -> 网页源码 | *Firefox: 浏览 -> 网页源码 | ||
*Safari: 浏览 -> 浏览源码 | *Safari: 浏览 -> 浏览源码 | ||
在得到的网页上找到你想要添加选项的位置。我希望在"给网页和feeds编码"下面,添加我的选项。 | 在得到的网页上找到你想要添加选项的位置。我希望在"给网页和feeds编码"下面,添加我的选项。 | ||
接着,我们要在源码中找到这些词: | 接着,我们要在源码中找到这些词: | ||
78 <tr valign="top"> | 78 <tr valign="top"> | ||
79 <th width="33%" scope="row">为网页和 ...编码 | 79 <th width="33%" scope="row">为网页和 ...编码 | ||
80 <td><input name="blog_charset" type="text" id="博客... | 80 <td><input name="blog_charset" type="text" id="博客... | ||
(注意: 根据安装差别,行数字会不同) | (注意: 根据安装差别,行数字会不同) | ||
现在,让我们看看可以重复使用的全部内容。 | 现在,让我们看看可以重复使用的全部内容。 | ||
注意表格中的这些内容: | 注意表格中的这些内容: | ||
77 <table width="100%" cellspacing="2" cellpadding="5"... | 77 <table width="100%" cellspacing="2" cellpadding="5"... | ||
第145行: | 第76行: | ||
82 </tr> | 82 </tr> | ||
83 </table> | 83 </table> | ||
根据先前的HTML知识(如果你阅读这篇文章,我假定你已经了解HTML)我知道通过添加另一个"TR"标签,我们可以给表格添加另一排。这时,我们需要找到"TR"标签的结尾部分,这样我们可以提升代码在哪里添加新的代码。返回到代码… | 根据先前的HTML知识(如果你阅读这篇文章,我假定你已经了解HTML)我知道通过添加另一个"TR"标签,我们可以给表格添加另一排。这时,我们需要找到"TR"标签的结尾部分,这样我们可以提升代码在哪里添加新的代码。返回到代码… | ||
81 ... recommended</a>)</td> | 81 ... recommended</a>)</td> | ||
82 </tr> | 82 </tr> | ||
这是"TR"标签的结尾部分。你注意到结尾部分必须是唯一的,这样我们的代码不会在网页的其它位置找到这个结尾,而且结尾部分也不能太长,否则我们的代码就找不到这个结尾部分。 | 这是"TR"标签的结尾部分。你注意到结尾部分必须是唯一的,这样我们的代码不会在网页的其它位置找到这个结尾,而且结尾部分也不能太长,否则我们的代码就找不到这个结尾部分。 | ||
因此,我选择了: "推荐的</a>)</td>\n</tr>" | 因此,我选择了: "推荐的</a>)</td>\n</tr>" | ||
我们需要\n,这样我们的代码能够识别有新的一行。稍后我们编写函数的时候,保存字符串。 | 我们需要\n,这样我们的代码能够识别有新的一行。稍后我们编写函数的时候,保存字符串。 | ||
== 创建新的XHTML == | == 创建新的XHTML == | ||
既然我们知道了在哪里插入代码,代码的形状,我们就需要创建自己的代码。让我们看看正排: | 既然我们知道了在哪里插入代码,代码的形状,我们就需要创建自己的代码。让我们看看正排: | ||
<tr valign="top"> | <tr valign="top"> | ||
<th width="33%" scope="row"> | <th width="33%" scope="row"> | ||
第199行: | 第103行: | ||
</td> | </td> | ||
</tr> | </tr> | ||
通过查看网页的显示方式,我们可以分开XHTML不同的部分。标签位于位于中间,"TH"标签,真正的文本框当前是输入标签,而且在"BR标签之后,在下面有个描述。你也会注意到导入的名称和id与你先前设置的选项名称相同。我们稍后写参数值。下面有个例子: | 通过查看网页的显示方式,我们可以分开XHTML不同的部分。标签位于位于中间,"TH"标签,真正的文本框当前是输入标签,而且在"BR标签之后,在下面有个描述。你也会注意到导入的名称和id与你先前设置的选项名称相同。我们稍后写参数值。下面有个例子: | ||
<tr valign="top"> | <tr valign="top"> | ||
<th width="33%" scope="row"> | <th width="33%" scope="row"> | ||
第227行: | 第116行: | ||
</td> | </td> | ||
</tr> | </tr> | ||
== 编写脚本== | == 编写脚本== | ||
这时我们知道在哪里放入编码,在网页上放入什么内容,但是现在我们需要将XHTML写到网页上。一般来说,我们在自己的页面上编写XHTML,但是这个操作可以自动完成,我们可以通过javascript完成这个操作(因为关于这个,WordPress没有提供filters)。 | |||
因此返回到主要的插件PHP,让我们添加函数。我称其为"add_fake_options",因为它操作: | 因此返回到主要的插件PHP,让我们添加函数。我称其为"add_fake_options",因为它操作: | ||
function add_fake_options () { | function add_fake_options () { | ||
} | } | ||
使用action hooks,创建admin-footer时,我们需要指示WordPress运行那个函数: | 使用action hooks,创建admin-footer时,我们需要指示WordPress运行那个函数: | ||
function add_fake_options () { | function add_fake_options () { | ||
} | } | ||
add_action('admin_footer', 'add_fake_options'); | add_action('admin_footer', 'add_fake_options'); | ||
现在指示函数,通过添加脚本标签,在管理页面上创建javascript。 | 现在指示函数,通过添加脚本标签,在管理页面上创建javascript。 | ||
function add_fake_options () { | function add_fake_options () { | ||
echo '<script type="text/javascript">'; | echo '<script type="text/javascript">'; | ||
第275行: | 第136行: | ||
} | } | ||
add_action('admin_footer', 'add_fake_options'); | add_action('admin_footer', 'add_fake_options'); | ||
接着我们指示函数只在我们想要的页面上运行(我们也可以通过PHP执行这个操作。这个部分的代码要在网页标签中搜索,并且查看标题是否匹配'options-reading'。如果你使用不同的网页标题,替换显示为options-reading ex: options-writing 或者 options-general的文件名。 | 接着我们指示函数只在我们想要的页面上运行(我们也可以通过PHP执行这个操作。这个部分的代码要在网页标签中搜索,并且查看标题是否匹配'options-reading'。如果你使用不同的网页标题,替换显示为options-reading ex: options-writing 或者 options-general的文件名。 | ||
第298行: | 第148行: | ||
} | } | ||
add_action('admin_footer', 'add_fake_options'); | 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相连接 | 现在我们指示函数将先前组后面的内容替换为我们编写的XHTML。在下面的代码中,为在"查找插入的 XHTML"部分查找的的代码,我们使用"replace"函数查找options-reading中的form1 element。语法是:document.form1.innerHTML.replace(insertHTML,insertHtml+replaceHtml);将我们的replaceHtml与options-reading中找到的insertHTML相连接 | ||
function add_fake_options () { | function add_fake_options () { | ||
第363行: | 第172行: | ||
} | } | ||
add_action('admin_footer', 'add_fake_options'); | add_action('admin_footer', 'add_fake_options'); | ||
现在,函数会将选项添加到页面啥啊那个,但是不会显示当前设置,点击更新时,也不会保存选项。在我们输入标签参数值变数内,添加get_option()函数,首先在当前设置中显示: | 现在,函数会将选项添加到页面啥啊那个,但是不会显示当前设置,点击更新时,也不会保存选项。在我们输入标签参数值变数内,添加get_option()函数,首先在当前设置中显示: | ||
function add_fake_options () { | function add_fake_options () { | ||
echo '<script type="text/javascript">'; | echo '<script type="text/javascript">'; | ||
第427行: | 第197行: | ||
} | } | ||
add_action('admin_footer', 'add_fake_options'); | add_action('admin_footer', 'add_fake_options'); | ||
显示,要显示页面的当前设置,但是为了在管理员点击更新的时候,指示脚本更新设置,我们需要编辑称为page_options的隐藏变数,这个变数包含了用逗号分开的网页上所有选项的列表。首先,我们会使用getElementsByName('page_options')选择隐藏的input object,然后,我们将我们的名称添加到后面有逗号的参数值上: | 显示,要显示页面的当前设置,但是为了在管理员点击更新的时候,指示脚本更新设置,我们需要编辑称为page_options的隐藏变数,这个变数包含了用逗号分开的网页上所有选项的列表。首先,我们会使用getElementsByName('page_options')选择隐藏的input object,然后,我们将我们的名称添加到后面有逗号的参数值上: | ||
function add_fake_options () { | function add_fake_options () { | ||
echo '<script type="text/javascript">'; | echo '<script type="text/javascript">'; | ||
第509行: | 第226行: | ||
} | } | ||
add_action('admin_footer', 'add_fake_options'); | add_action('admin_footer', 'add_fake_options'); | ||
[[WordPress:Image:ModOptnPageExample.png|图像:ModOptnPageExample.png]] | [[WordPress:Image:ModOptnPageExample.png|图像:ModOptnPageExample.png]] | ||
你添加了选项了:]如果你知道你的行为与我最初发表的评论相反,将选项添加到当前选项页面并不那么难。初始化变数后,要添加更多的选项,你需要在同一个位置的XHTML上添加,格式在page_options列表的名称上添加。 | |||
你添加了选项了:] |
2008年9月6日 (六) 11:03的最新版本
可以为插件更改当前选项页面。
注意:这个操作较为艰难,如果你是个新手,我们不建议你尝试下面的步骤。
初始化变数[ ]
首先,在主要的插件PHP资源中,你应该声明你想要添加到选项页面上的变数:
//在数据库中创建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');
找到插入的 XHTML[ ]
既然我们已经设置了变数,现在需要使得管理界面能够编辑变数。当然,我们可以使用一般的管理创建界面,但是如果只将其添加到一般的已经创建好的页面,我们不要那样做。
在选项标签下面,我们有五个名称不同的网页,我们可以将选项添加到这些网页:
- 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 79 为网页和 ...编码 80 <input name="blog_charset" type="text" id="博客...
(注意: 根据安装差别,行数字会不同)
现在,让我们看看可以重复使用的全部内容。
注意表格中的这些内容:
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
根据先前的HTML知识(如果你阅读这篇文章,我假定你已经了解HTML)我知道通过添加另一个"TR"标签,我们可以给表格添加另一排。这时,我们需要找到"TR"标签的结尾部分,这样我们可以提升代码在哪里添加新的代码。返回到代码…
81 ... recommended</a>) 82 这是"TR"标签的结尾部分。你注意到结尾部分必须是唯一的,这样我们的代码不会在网页的其它位置找到这个结尾,而且结尾部分也不能太长,否则我们的代码就找不到这个结尾部分。 因此,我选择了: "推荐的</a>)\n" 我们需要\n,这样我们的代码能够识别有新的一行。稍后我们编写函数的时候,保存字符串。
创建新的XHTML[ ]
既然我们知道了在哪里插入代码,代码的形状,我们就需要创建自己的代码。让我们看看正排:
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>)
通过查看网页的显示方式,我们可以分开XHTML不同的部分。标签位于位于中间,"TH"标签,真正的文本框当前是输入标签,而且在"BR标签之后,在下面有个描述。你也会注意到导入的名称和id与你先前设置的选项名称相同。我们稍后写参数值。下面有个例子:
Sample Option:
<input name="fake_option_a" type="text" id="fake_option_a" value="" size="20" class="code" />
这是个描述
编写脚本[ ]
这时我们知道在哪里放入编码,在网页上放入什么内容,但是现在我们需要将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>)\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'); 现在,函数会将选项添加到页面啥啊那个,但是不会显示当前设置,点击更新时,也不会保存选项。在我们输入标签参数值变数内,添加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'); 显示,要显示页面的当前设置,但是为了在管理员点击更新的时候,指示脚本更新设置,我们需要编辑称为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\"> '.
'这是描述 ");'; 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'); 图像:ModOptnPageExample.png 你添加了选项了:]如果你知道你的行为与我最初发表的评论相反,将选项添加到当前选项页面并不那么难。初始化变数后,要添加更多的选项,你需要在同一个位置的XHTML上添加,格式在page_options列表的名称上添加。