- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
一个漂亮的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代码以及处理表单并保存数据。
未结束,下一章续。