wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 为wordpressCMS主题设置页面添加图片上传(1):创建类及添加选项

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

    高时银博客 wordpress CMS主题制作 点击: 1,566 次 0 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个文本框(产品名称、产品价格、产品链接)。这时,我们打开后台的主题设置页面就可以看到如下图的效果,但是此时点击“上传”按钮,不会弹出上传图片窗口。

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

     

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

     

    未结束,下一章续。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506234500.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论