• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 为wordpressCMS主题设置页面添加图片上传(1):创建类及添加选项

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

    作者: 分类:wordpress CMS主题制作 点击: 2,374 次
    wordpress CMS主题:ssmay主题

      一个漂亮的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代码以及处理表单并保存数据。

       

      未结束,下一章续。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.