By烟花易冷

WP主题开发:为wordpress主题添加后台设置
2014-01-17

这一篇高端大气上档次的文章,是我在研发wordpress主题Yali的后台设置时参考的重要资料,转过来记录一下,原文:点击这里

1.首先制作表单:
使用专业的代码编辑器打开myfunctions.php文件,将里面的代码全部清空,重新写。然后新建一个后台设置页面,代码如下:

<?php
function test_function(){
add_theme_page( ‘子寒互动视觉’, ‘子寒互动视觉’, ‘administrator’, ‘xmlas_slug’,’display_function’);
}
add_action(‘admin_menu’, ‘test_function’);

function display_function(){ ?>

<form method=”post” name=”xmlas_form” id=”xmlas_form”>
<h2>子寒互动视觉主题设置</h2>
<p>
<label>
<input name=”xmlas_copy_right” size=”40″ />
请输入文字
</label>
</p>
<p class=”submit”>
<input type=”submit” name=”option_save” value=”<?php _e(‘保存设置’); ?>” />
</p>
</form>
<?php } ?>

通过实现上面的代码,我们在后台“外观”菜单下新加一个子菜单项,输出了一个只有一个文本输入框的表单。保存文件之后,我们即可以看到实现后的效果,截图如下:

做完上面的事情后,恭喜你已经完成第一步,制作表单,我们还需要在表单中显示上次设置的额数据,以及还有提交数据后处理数据、保存数据的代码。
2.关于处理保存数据:
关于处理和保存数据的问题其实这些也很简单,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=”xmlas_copy_right” />
<!–new code–>

我们对上面的代码做一下简短的说明:第一个函数用来输出更新设置选项时的验证数据,第二个隐藏域也固定不变,第三个隐藏域,value的值为前面表单的值,比如我们前面只有一个文本输入框ashu_copy_right,所以这里的value值就一个,如果我们有很多个文本输入框,比如input1、input2、input3这里的value值应该三个都写上,并且用逗号隔开,譬如下面这样: value=”input1,input2,input3″。在optinos保存设置数据的时候就根据这个隐藏域中的值来保存。添加上面代码后,我们后台查看表单源码即可看到输出的几个隐藏域:

<form method=”post” name=”xmlas_form” id=”xmlas_form” action=”options.php”>
<h2>子寒互动视觉主题设置</h2>
<p>
<label>
<input name=”xmlas_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=xmlas_slug&amp;settings-updated=true”>
<input type=”hidden” name=”action” value=”update”>
<input type=”hidden” name=”page_options” value=”xmlas_copy_right”>
<p class=”submit”>
<input type=”submit” name=”option_save” value=”保存设置”>
</p>
</form>

3.关于显示以前的设置数据
关于这一步其实实现起来很简单,但其重要性却是不言而喻的。我们的思路是:要在文本输入框中显示上次设置的数据,只需要获取相应的选项即可,获取选项使用:get_option函数,这个函数有以下两个参数:

<?php
get_option( $option, $default );
//option–选项名称
//default–没有数据是的默认数据
?>

然后修改我们的输入框,代码如下:

<input name=”xmlas_copy_right” size=”40″ value=”<?php echo get_option(‘xmlas_copy_right’); ?>”/>

至此,我们所编辑的myfunctions.php文件的完整代码如下,请参考检查:

<?php
function test_function(){
add_theme_page( ‘子寒互动视觉’, ‘子寒互动视觉’, ‘administrator’, ‘xmlas_slug’,’display_function’);
}
add_action(‘admin_menu’, ‘test_function’);

function display_function(){ ?>
<form method=”post” name=”xmlas_form” id=”xmlas_form” action=”options.php”>
<h2>子寒互动视觉主题设置</h2>
<p>
<label>
<input name=”xmlas_copy_right” size=”40″ value=”<?php echo get_option(‘xmlas_copy_right’); ?>”/>
请输入文字
</label>
</p>
<?php wp_nonce_field(‘update-options’); ?>
<input type=”hidden” name=”action” value=”update” />
<input type=”hidden” name=”page_options” value=”xmlas_copy_right” />
<p class=”submit”>
<input type=”submit” name=”option_save” value=”<?php _e(‘保存设置’); ?>” />
</p>
</form>

<?php } ?>

4.关于输出选项值:
我们直接来例子,在适当的位置添加以下代码

<?php echo get_option(‘xmlas_copy_right’); ?>

——————————END————————————–

PS:
1、在制作之前,记得在function.php里面加入<?php include(‘myfunction.php’);?>
2、我在WordPress3.8环境下测试时,发现后台无故空了一行,百思不得其解,求高手指点~~~


标志性的歌曲又来了: