前面我们知道了怎样在 WordPress 后台添加一个设置页面,有了设置页面,我们只需要在这个页面添加上设置表单,然后保存数据即可。这篇教程我们以实例来讲述怎样添加一个设置选项。
同样的我们还是使用默认主题 Twenty Ten 来作测试,(前面我们已经在默认的 Twenty Ten 主题中新建一个 myfuntions.php , 然后在 functions.php 文件中 include 新文件) 。
一、制作表单用编辑器打开 myfunctions.php 文件,清空里面的代码,重新写。先新建一个后台设置页面,代码如下:
- <?php
- function test_function(){
- add_theme_page( '阿树工作室', '阿树工作室', 'administrator', 'ashu_slug','display_function');
- }
- add_action('admin_menu', 'test_function');
- function display_function(){ ?>
- <form method="post" name="ashu_form" id="ashu_form">
- <h2> 阿树工作室主题设置</h2>
- <p>
- <label>
- <input name="ashu_copy_right" size="40" />
- 请输入文字
- </label>
- </p>
- <p class="submit">
- <input type="submit" name="option_save" value="<?php _e('保存设置'); ?>" />
- </p>
- </form>
- <?php } ?>
上面的代码在后台 「外观」 菜单下新加一个子菜单项,输出了一个只有一个文本输入框的表单。保存之后,后台效果如图:
现在已经完成第一步,制作表单,我们还需要在表单中显示上次设置的额数据,以及还有提交数据后处理数据、保存数据的代码。
二、处理保存数据
其实这些也很简单,WordPress 有提供更新、保存等 API 。所以我们将将数据直接提交到 options.php 即可,wp-admin/options.php 文件为设置选项管理界面,里面还有数据处理 API,如果你直接访问这个文件,可以得到所有设置选项,比如在我本地直接访问 http://localhost/newtheme/wp-admin/options.php 即可。你也可以使用手动的方法来保存数据,请参考下一篇教程:数据的保存
在官网的介绍页面中: 还是用了 register_setting 、 settings_fields 和 do_settings 三个函数,然而实际上现在已经没有 do_settings 这个函数了。使用签名两个函数也很繁琐,将这两个函数输出的内容直接写出来即可。
首先添加 wp_nonce_field 函数,该函数输出两个隐藏域,用来验证表单来源,其次再手动输入两个隐藏域。如下:
- <!--new code-->
- <?php wp_nonce_field('update-options'); ?>
- <input type="hidden" name="action" value="update" />
- <input type="hidden" name="page_options" value="ashu_copy_right" />
- <!--new code-->
第一个函数用来输出更新设置选项时的验证数据,第二个隐藏域也固定不变,第三个隐藏域,value 的值为前面表单的值,比如我们前面只有一个文本输入框 ashu_copy_right,所以这里的 value 值就一个,如果我们有很多个文本输入框,比如 input1 、 input2 、 input3 这里的 value 值应该三个都写上,并且用逗号隔开: value="input1,input2,input3"。在 optinos 保存设置数据的时候就根据这个隐藏域中的值来保存。
添加上面代码后,我们后台查看表单源码即可看到输出的几个隐藏域:
- <form method="post" name="ashu_form" id="ashu_form" action="options.php">
- <h2>阿树工作室主题设置</h2>
- <p>
- <label>
- <input name="ashu_copy_right" size="40" value="">
- 请输入文字
- </label>
- </p>
- <input type="hidden" id="_wpnonce" name="_wpnonce" value="a34ef763fa">
- <input type="hidden" name="_wp_http_referer" value="/newtheme/wp-admin/themes.php?page=ashu_slug&settings-updated=true">
- <input type="hidden" name="action" value="update">
- <input type="hidden" name="page_options" value="ashu_copy_right">
- <p class="submit">
- <input type="submit" name="option_save" value="保存设置">
- </p>
- </form>
三、显示以前的设置数据
这一步很重要也很简单,要在文本输入框中显示上次设置的数据,只需要获取相应的选项即可,获取选项使用:get_option 函数,这个函数有两个参数:
- <?php
- get_option( $option, $default );
- //option--选项名称
- //default--没有数据是的默认数据
- ?>
将我们的文本输入框代码改成:
- <input name="ashu_copy_right" size="40" value="<?php echo get_option('ashu_copy_right'); ?>"/>
即可。
到此,myfunctions.php 的完整代码应该是:
- <?php
- function test_function(){
- add_theme_page( '阿树工作室', '阿树工作室', 'administrator', 'ashu_slug','display_function');
- }
- add_action('admin_menu', 'test_function');
- function display_function(){ ?>
- <form method="post" name="ashu_form" id="ashu_form" action="options.php">
- <h2> 阿树工作室主题设置</h2>
- <p>
- <label>
- <input name="ashu_copy_right" size="40" value="<?php echo get_option('ashu_copy_right'); ?>"/>
- 请输入文字
- </label>
- </p>
- <?php wp_nonce_field('update-options'); ?>
- <input type="hidden" name="action" value="update" />
- <input type="hidden" name="page_options" value="ashu_copy_right" />
- <p class="submit">
- <input type="submit" name="option_save" value="<?php _e('保存设置'); ?>" />
- </p>
- </form>
- <?php } ?>
四:输出选项值
例:打开 twenty ten 主题的 footer.php 文件,在适当的位置添加代码:
- <?php echo get_option('ashu_copy_right'); ?>
效果 (点击图片放大):