wordpress后台制作教程(五):添加简单的设置选项

您现在的位置:阿树工作室->wordpress主题教程->后台制作教程  2012.8.12标签:   浏览数:16,052

前面我们知道了怎样在wordpress后台添加一个设置页面，有了设置页面，我们只需要在这个页面添加上设置表单，然后保存数据即可。这篇教程我们以实例来讲述怎样添加一个设置选项。

同样的我们还是使用默认主题Twenty Ten来作测试，(前面我们已经在默认的Twenty Ten主题中新建一个myfuntions.php ,然后在functions.php文件中include新文件)。

一、制作表单用编辑器打开myfunctions.php文件，清空里面的代码，重新写。先新建一个后台设置页面，代码如下：

  1. <?php      
  2. function test_function(){   
  3.     add_theme_page( '阿树工作室', '阿树工作室', 'administrator', 'ashu_slug','display_function');   
  4. }   
  5. add_action('admin_menu', 'test_function');   
  6.   
  7. function display_function(){ ?>   
  8.   
  9.     <form method="post" name="ashu_form" id="ashu_form">   
  10.     <h2>阿树工作室主题设置</h2>   
  11.     <p>   
  12.     <label>   
  13.     <input name="ashu_copy_right" size="40" />   
  14.     请输入文字   
  15.     </label>   
  16.     </p>   
  17.     <p class="submit">   
  18.         <input type="submit" name="option_save" value="<?php _e('保存设置'); ?>" />   
  19.     </p>    
  20.     </form>   
  21.        
  22. <?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函数，该函数输出两个隐藏域，用来验证表单来源，其次再手动输入两个隐藏域。如下：

  1. <!--new code-->   
  2.     <?php wp_nonce_field('update-options'); ?>   
  3.     <input type="hidden" name="action" value="update" />   
  4.     <input type="hidden" name="page_options" value="ashu_copy_right" />   
  5. <!--new code-->  

第一个函数用来输出更新设置选项时的验证数据，第二个隐藏域也固定不变，第三个隐藏域，value的值为前面表单的值，比如我们前面只有一个文本输入框ashu_copy_right，所以这里的value值就一个，如果我们有很多个文本输入框，比如input1、input2、input3这里的value值应该三个都写上，并且用逗号隔开： value="input1,input2,input3"。在optinos保存设置数据的时候就根据这个隐藏域中的值来保存。

添加上面代码后，我们后台查看表单源码即可看到输出的几个隐藏域：

  1. <form method="post" name="ashu_form" id="ashu_form" action="options.php">  
  2.     <h2>阿树工作室主题设置</h2>  
  3.     <p>  
  4.     <label>  
  5.     <input name="ashu_copy_right" size="40" value="">  
  6.     请输入文字   
  7.     </label>  
  8.     </p>  
  9.     <input type="hidden" id="_wpnonce" name="_wpnonce" value="a34ef763fa">
  10. <input type="hidden" name="_wp_http_referer" value="/newtheme/wp-admin/themes.php?page=ashu_slug&amp;settings-updated=true">
  11.  <input type="hidden" name="action" value="update">  
  12.     <input type="hidden" name="page_options" value="ashu_copy_right">  
  13.     <p class="submit">  
  14.         <input type="submit" name="option_save" value="保存设置">  
  15.     </p>    
  16.     </form>  

三、显示以前的设置数据

这一步很重要也很简单，要在文本输入框中显示上次设置的数据，只需要获取相应的选项即可，获取选项使用：get_option函数，这个函数有两个参数：

  1. <?php   
  2. get_option( $option, $default );   
  3. //option--选项名称   
  4. //default--没有数据是的默认数据   
  5. ?>  

将我们的文本输入框代码改成：

  1. <input name="ashu_copy_right" size="40" value="<?php echo get_option('ashu_copy_right'); ?>"/>  

即可。
到此，myfunctions.php的完整代码应该是：

  1. <?php      
  2. function test_function(){   
  3.     add_theme_page( '阿树工作室', '阿树工作室', 'administrator', 'ashu_slug','display_function');   
  4. }   
  5. add_action('admin_menu', 'test_function');   
  6.   
  7. function display_function(){ ?>   
  8.     <form method="post" name="ashu_form" id="ashu_form" action="options.php">   
  9.     <h2>阿树工作室主题设置</h2>   
  10.     <p>   
  11.     <label>   
  12.     <input name="ashu_copy_right" size="40" value="<?php echo get_option('ashu_copy_right'); ?>"/>   
  13.     请输入文字   
  14.     </label>   
  15.     </p>   
  16.     <?php wp_nonce_field('update-options'); ?>   
  17.     <input type="hidden" name="action" value="update" />   
  18.     <input type="hidden" name="page_options" value="ashu_copy_right" />   
  19.     <p class="submit">   
  20.         <input type="submit" name="option_save" value="<?php _e('保存设置'); ?>" />   
  21.     </p>    
  22.     </form>   
  23.        
  24. <?php } ?>  

四：输出选项值

例：打开twenty ten主题的footer.php文件，在适当的位置添加代码：

  1. <?php echo get_option('ashu_copy_right'); ?>  

效果(点击图片放大)：

版权申明

！转载请注明来自：阿树工作室-wordpress主题定制,制作教程（wordpress主题定制-阿树工作室）

本篇教程之前的几篇教程是

本篇教程之后的几篇教程是

没有找到你要找的内容？你可以通过搜索你要找的内容，或者给我们留言。

已有11条评论

  1. 新手PHP
    新手PHP : 回复 2015-05-03 10:36

    请问我想添加多个这样的页面  每个页面之间不冲突怎么做啊 

  2. coocoo
    coocoo : 回复 2015-01-29 20:40

    既然使用了wp_nonce_field（）；后面应该使用wp_verify_nonce验证一下吧？这里怎么没有验证呢？

    • 阿树工作室
      阿树工作室 回复coocoo: 回复 2015-01-29 22:21

      在处理数据的时候验证。。。

  3. 亮说
    亮说 : 回复 2014-04-24 13:50

    博主，前台调用的时候，如果我想先做一个判断，如果什么都没填，显示另一段文字，或者直接不显示如何做呢？

    很多情况下前端不是一定要有的，你懂我的意思吧……

  4. day
    day : 回复 2013-04-26 01:33

    改多行文本框。是不是textarea替换input呢？

    • 阿树工作室
      阿树工作室 回复day: 回复 2013-04-26 08:06

      是的….请参考后面的教程

  5. 小明
    小明 : 回复 2012-12-25 23:56

    我在搞这个地方的时候，保存在后就出错了，Warning: Cannot modify header information – headers already sent by (output started at D:\wamp\www\test\wp-content\themes\twentyten\myfunctions.php:1) inD:\wamp\www\test\wp-includes\pluggable.php on line 881   不知是什么 原因？程序是是一模一样的，求教。

    • 阿树工作室
      阿树工作室 回复小明: 回复 2012-12-26 09:00

      这个myfunctions.php第一行就出错？建议检查一下，或者看后面的类文件教程。

      • 黑白
        黑白 回复阿树工作室: 回复 2013-05-13 21:38

        我也是出现这个问题，但是本地测试就没问题

  6. 新手
    新手 : 回复 2012-11-14 17:34

    讲得非常详细，特别回复感谢一下~

    • 阿树工作室
      阿树工作室 回复新手: 回复 2012-11-14 18:13

      谢谢支持。。文章页下面有广告，你懂得

发表评论