为wordpressCMS网站主题设置页面添加图片上传(1)：创建类及添加选项

一个漂亮的WordPressCMS主题如果没有一个好的后台WordPress主题设置页面，也是必不可少的。所以，在制作wordpress主题时，一定要在主题设置页面上下点功夫，这也是为了让用更好地使用你的wordpress主题。想想看，如果一个主题前台很漂亮，但是要通过修改wordpress主题代码来实现，你想会有多少用户来使用这个主题，毕竟懂代码的不大多数。本章接着前的介绍，更加深入地介绍wordpress主题设置页面添加设置选项，本章将以一个类的形式来展示wordpress主题设置页面。

第一步：创建主题设置文件。

在wordpress主题文件夹下创建一个主题设置页面文件 themes-set.php，并在wordpress主题的functions.php文件中引用它，代码如下：

include("themes-set.php");

第二步：添加类。

在themes-set.php文件中添加如下代码：

class ClassicOptions {
//这里添加类内容
}
add_action('admin_menu', array('ClassicOptions', 'init')); //添加勾子

第三步：添加设置选项。

在ClassicOptions类中添加wordpress主题设置选项内容代码，代码如下：

//子菜单选项内容
function display() {
$options = ClassicOptions::getOptions(); ?>
<form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
<div class="wrap">
<h2>wanlimm主题设置</h2>
<p>
<label>
<input type="text" size="80" name="wanlimm_logo" id="wanlimm_logo" value="<?php echo($options['wanlimm_logo']); ?>"/>
<input type="button" value="上传" class="wanlimm_bottom"/>
</label>
</p>
<p>
<label>
<input type="text" size="80" name="wanlimm_ico" id="wanlimm_ico" value="<?php echo($options['wanlimm_ico']); ?>"/>
<input type="button" value="上传" class="wanlimm_bottom"/>
</label>
</p>
<p>
<label>
产品名称：<input type="text" size="80" name="wanlimm_name" id="wanlimm_name" value="<?php echo($options['wanlimm_name']); ?>"/>
</label>
</p>
<p>
<label>
产品价格：<input type="text" size="80" name="wanlimm_jiage" id="wanlimm_jiage" value="<?php echo($options['wanlimm_jiage']); ?>"/>
</label>
</p>
<p>
<label>
产品链接：<input type="text" size="80" name="wanlimm_url" id="wanlimm_url" value="<?php echo($options['wanlimm_url']); ?>"/>
</label>
</p>
<!-- 在这里还可以追加其他表单选项内容 -->
<p class="submit">
<input type="submit" name="classic_save" value="保存设置" />
</p>
</div>
</form>
<?php
}

上面的选项代码中，我们添加了2个图片上传和3个文本框（产品名称、产品价格、产品链接）。这时，我们打开后台的主题设置页面就可以看到如下图的效果，但是此时点击“上传”按钮，不会弹出上传图片窗口。

我们还要为这个图片上传添加相应的JS代码，才能弹出上传图片窗口。我们将在下一章中接着介绍添加上传图片JS代码以及处理表单并保存数据。