站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Modifying Options Pages
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
Xxf3325
(
讨论
|
贡献
)
2008年9月5日 (五) 09:36的版本
(新页面: 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...)
(差异) ←上一版本 |
最后版本
(
差异
) |
下一版本→
(
差异
)
跳转至:
导航
、
搜索
警告:您正在编辑的是本页面的旧版本。
如果您发布该更改,该版本后的所有更改都会丢失。
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
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: <br /> <br /> <br /> <br /> //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'); == Finding the insert 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 [[WordPress:Creating Options Pages|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 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. 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: *IE7: Page -> View Source *Firefox: View -> Page Source *Safari: View -> View Source 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". Next, we'll look for those words in the source: 78 <tr valign="top"> 79 <th width="33%" scope="row">Encoding for pages and ... 80 <td><input name="blog_charset" type="text" id="blog... (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 <tr valign="top"> 79 <th width="33%" scope="row">Encoding for pages and ... 80 <td><input name="blog_charset" type="text" id="blog... 81 The character encoding you write your blog in (UTF-... 82 </tr> 83 </table> 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... 81 ... recommended</a>)</td> 82 </tr> 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. So I have chosen: "recommended</a>)</td>\n</tr>" 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. == Creating new 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: <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> 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: <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 /> This is a description </td> </tr> == 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). 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: function add_fake_options () { } Now we need to tell WordPress to run that function when creating the admin-footer using action hooks: 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: 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. 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 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'); 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: 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'); 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: 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 '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]] 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.
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)