wordpress主题后台教程-设置选项类文件使用方法

上一篇教程中贴出了一个可以很方便添加后台设置选项的类文件,下面是该类文件的使用方法:

一、载入类文件

在你的主题functions.php文件中使用include_once载入该文件,比如上节教程的类存放于主题文件夹下的option-class.php文件中:

  1. include_once('option-class.php');  

 二、检查js文件

如果你需要使用上传图片的选项,请根据上节教程类代码中 enqueue_head函数里面加载的js文件路径,准备好一个js文件,js代码在上节教程中也贴出了。

三、新建配置文件

例如在主题文件夹中新建一耳光option.php文件,也使用include_once载入该文件:

  1. include_once('option.php');   

设置选项的配置代码都添加在该文件中。

四、配置选项

用编辑器打开上面添加的option.php,添加配置代码,示例代码如下:

注意

  1. 对于数组类型、复选框、编辑器,配置中的id有要求。
  2. 复选框和数组保存的数据为数组
  1. <?php      
  2.      
  3. $pageinfo = array('full_name' => '阿树工作室网站设置', 'optionname'=>'ashu', 'child'=>false, 'filename' => basename(__FILE__));      
  4.      
  5. $options = array();      
  6.                   
  7. $options[] = array"type" => "open");      
  8.      
  9. $options[] = array(       
  10.                 "name"=>"阿树工作室-标题",      
  11.                 "desc"=>"这是一个设置页面示范",      
  12.                 "type" => "title");      
  13.                       
  14. $options[] = array(      
  15.                 "name"=>"文本框",      
  16.                 "id"=>"_ashu_text",      
  17.                 "std"=>"阿树工作室文本输入框",      
  18.                 "desc"=>"阿树工作室版权所有",      
  19.                 "size"=>"60",      
  20.                 "type"=>"text"     
  21.             );      
  22.      
  23. $options[] = array(      
  24.                 "name"=>"文本域",      
  25.                 "id"=>"_ashu_textarea",      
  26.                 "std"=>"阿树工作室文本域",      
  27.                 "desc"=>"阿树工作室版权所有",      
  28.                 "size"=>"60",      
  29.                 "type"=>"textarea"     
  30.             );      
  31.      
  32. $options[] = array(      
  33.             "name" => "图片上传",      
  34.             "desc" => "请上传一个图片或填写一个图片地址",      
  35.             "std"=>"",      
  36.             "id" => "_ashu_logo",      
  37.             "type" => "upload");              
  38.      
  39. $options[] = array(  "name" => "单选框",      
  40.             "desc" => "请选择",      
  41.             "id" => "_ashu_radio",      
  42.             "type" => "radio",      
  43.             "buttons" => array('Yes','No'),      
  44.             "std" => 1);      
  45.      
  46. $options[] = array"name" => "复选框",      
  47.             "desc" => "请选择",      
  48.             "id" => "checkbox_ashu",   //id必须以checkbox_开头   
  49.             "std" => 1,     
  50.             "buttons" => array('汽车','自行车','三轮车','公交车'),                
  51.             "type" => "checkbox");      
  52.                   
  53. $options[] = array"name" => "页面下拉框",      
  54.             "desc" => "请选择一个页面",      
  55.             "id" => "_ashu_page_select",      
  56.             "type" => "dropdown",      
  57.             "subtype" => 'page'      
  58.             );      
  59.      
  60. $options[] = array"name" => "分类下拉框",      
  61.             "desc" => "请选择大杂烩页面",      
  62.             "id" => "_ashu_cate_select",      
  63.             "type" => "dropdown",      
  64.             "subtype" => 'cat'      
  65.             );   
  66.   
  67. $options[] = array"name" => "分类下拉框",      
  68.             "desc" => "请选择大杂烩页面",      
  69.             "id" => "_ashu_side_select",      
  70.             "type" => "dropdown",      
  71.             "subtype" => 'sidebar'      
  72.             );      
  73.                   
  74. $options[] = array"name" => "下拉框",      
  75.             "desc" => "请选择",      
  76.             "id" => "_ashu_select",      
  77.             "type" => "dropdown",      
  78.             "subtype" => array(      
  79.                 '苹果'=>'apple',      
  80.                 '香蕉'=>'banana',      
  81.                 '桔子'=>'orange'      
  82.                 )      
  83.             );   
  84.                
  85. $options[] = array(      
  86.             "name" => "编辑器",      
  87.             "desc" => "",      
  88.             "id" => "tinymce_ashu",   //id必须以 tinymce_开头   
  89.             "std" => "",   
  90.             "type" => "tinymce"     
  91.             );    
  92. $options[] = array(      
  93.             "name" => "数组信息",      
  94.             "desc" => "请输入一组id,以英文分号隔开,例如 1,2,3",      
  95.             "id" => "numbers_ashu"//id必须以 numbers_开头   
  96.             "size"=>60,   
  97.             "std" => "",   
  98.             "type" => "numbers_array"     
  99.             );             
  100.                   
  101. $options[] = array"type" => "close");      
  102.      
  103. $options_page = new ashu_option_class($options$pageinfo);      
  104. ?>  

最后面不要忘记类的实例化。

效果图:使用类文件配置设置选项

 

前台调用(重要):

注意,我们在类文件中声明了一个全局变量: $ashu_option;  如果你的设置选项很多,如果前台每次使用一个设置选项都调用一次get_option函数,这是不明智的选择,建议使用一个全局变量。而且我们所有的选项值都在一个选项组里,只需要执行一次get_option函数即获取了所有设置数据,所以将它保存在一个全局变量中。

范例:对于上面的示例设置选项,我们在首页添加代码将设置数据打印出来:

  1. <?php   
  2.     global $ashu_option;   
  3.     var_dump($ashu_option);   
  4. ?>  

输出结果:

  1. array   
  2.   'ashu' =>    
  3.     array   
  4.       '_ashu_text' => string '阿树工作室文本输入框修改' (length=36)   
  5.       '_ashu_textarea' => string '阿树工作室文本域修改' (length=30)   
  6.       '_ashu_logo' => string 'http://localhost/newtheme/wp-content/uploads/2012/08/1960_19591-360x200.jpg' (length=75)   
  7.       '_ashu_radio' => string '2' (length=1)   
  8.       '_ashu_checkbox' => string 'true' (length=4)   
  9.       '_ashu_page_select' => string '2' (length=1)   
  10.       '_ashu_cate_select' => string '1' (length=1)   
  11.       '_ashu_select' => string 'banana' (length=6)   
  12.       'save_my_options' => string '1' (length=1)   
  13.       'Submit' => string 'Save Changes' (length=12)  

到了这里,如何调用其中的数据,就不赘述了

本篇教程之前的几篇教程是

本篇教程之后的几篇教程是

没有找到你要找的内容?你可以通过搜索你要找的内容,或者给我们留言。

已有57条评论

  1. xiyouzi
    xiyouzi : 回复

    if ( cs_get_option(‘home_exclude_category’) ) :
    function home_exclude_category( $query ) {
    if ( $query->is_home ) {
    $query->set( ‘cat’, ”. cs_get_option(‘home_exclude_category’) .” );
    }
    return $query;
    }
    add_filter( ‘pre_get_posts’, ‘home_exclude_category’ );
    endif;

    这个如何复选需要排除的分类组?如果是手输的就行,如果是选择类型的就不行,我的意思就是想重复循环cs_get_option(‘home_exclude_category’)这个值

  2. qinnek
    qinnek : 回复

    我想在前台设置一个公告,但把输出代码怎么写都不行,都显示null,请问一下文本框输出代码怎么用,id是tips,谢谢

    • 阿树工作室
      阿树工作室 回复qinnek: 回复

      你好,此教程已经是2012年的了,请查看最新的本站框架。

      • qinnek
        qinnek 回复阿树工作室: 回复

        你好,我试了很多遍你的框架,看不明白, 不知道怎么输出,请问一下文本框输出代码怎么用,id是tips。能出一个视频教程就好了。

  3. 小朋友
    小朋友 : 回复

    树哥前台调用图片地址怎么调用啊,按你之前调用的方式没有显示。

  4. 小朋友
    小朋友 : 回复

    阿树你好  我在前台调用    <?php echo $ashu_option[‘ashu’][‘numbers_ashu’]; ?> 时有的显示 null 有的显示numbers_ashu 是什么原因啊!

    这个要具体怎么解决,麻烦您了!

    • 阿树工作室
      阿树工作室 回复小朋友: 回复

      输出之前有用 global $ashu_option;么

      • 小朋友
        小朋友 回复阿树工作室: 回复

        <?php global $ashu_option; var_dump( $numbers_ashu) ;?>  这样前台调用显示 null 

        <?php global $ashu_option; echo $ashu_option[‘ashu’][‘numbers_ashu’]; ?> 这样前台调用显示 array

        树哥我是小白一个,全是摸索着来的,前面有人也向你提出和我差不多的问题,我看他的用

        • <?php   
        •     global $ashu_option;   
        •     var_dump($ashu_option);   
        • ?>  

        显示的和我的不一样,是不是这里出现了什么问题?

        我的显示的是

        
        
        array
          'ashu' => 
            array
              '_ashu_text' => string '1' (length=1)
              '_ashu_textarea' => string '2' (length=1)
              '_ashu_logo' => string '' (length=0)
              '_ashu_radio' => string '1' (length=1)
              'checkbox_ashu' => 
                array
                  0 => string '0' (length=1)
                  1 => string '1' (length=1)
                  2 => string '2' (length=1)
              'tinymce_ashu' => string '0' (length=1)
              'numbers_ashu' => 
                array
                  0 => string '1' (length=1)
                  1 => string '2' (length=1)
                  2 => string '3' (length=1)
              '_ashu_page_select' => string '7666' (length=4)
              '_ashu_cate_select' => string '238' (length=3)
              '_ashu_side_select' => string 'sidebar-1' (length=9)
              '_ashu_select' => string '苹果' (length=6)
              'save_my_options' => string '1' (length=1)
              'Submit' => string 'Save Changes' (length=12)

        打扰树哥宝贵时间了还望指教!谢谢!

        • 阿树工作室
          阿树工作室 回复小朋友: 回复

          你想输出的是:<?php echo $ashu_option[‘ashu’][‘numbers_ashu’]; ?>,但是看你打印的代码numbers_ashu用的是一个数组,数组是不能用echo直接输出的。。。。。

          • 小朋友
            小朋友 回复阿树工作室: 回复

            这样啊!谢谢树哥!

            那数组要怎么使用或怎么调用啊

  5. 小安
    小安 : 回复

    阿树你好 我一直在使用你写的主题选项面板源码,最近几天发现 在 wp4.0中文下   设置一个logo上传 选项  然后把顶部文件 分离出来 做成header.php文件  然后在 index.php中引入header文件。结果发现 前台的logo图片地址获取不到了,找了半天不知道什么原因  如果不分离顶部文件 只是一个index文件 又是正常的    望有空  也有兴趣的时候 帮我看看问题吧,很多时候都习惯做主题分离出头部 顶部。   

    • 阿树工作室
      阿树工作室 回复小安: 回复

      如果你是在header.php中输出,请在header.php中加上global $ashu_option

  6. 周公解梦
    周公解梦 : 回复

    请教一下,这个插入图片的功能好像不行,插入的后显示空白,麻烦博主解答一下

    • 阿树工作室
      阿树工作室 回复周公解梦: 回复

      请直接下载本站提供的后台框架,成品类文件http://www.ashuwp.com/courses/highgrade/627.html

  7. laiydesign.com
    laiydesign.com : 回复

    我在本地信息都添加好,保存了,换个域名上传到网上就不行了,显示空白了,是怎么回事呀?

    • laiydesign.com
      laiydesign.com 回复laiydesign.com: 回复

      去查找数据库,这些信息在数据库都能找到,就是显示不到后台上,求解决方法,谢谢。

  8. 痕迹
    痕迹 : 回复

    图片上传好像不行,插入文章显示空白的。请问博主怎么解决这个问题?

  9. 萨龙龙
    萨龙龙 : 回复

    $options_page = new ashu_option_class($options$pageinfo);,这段代码显示错误,麻烦看下什么原因?谢谢

    • 阿树工作室
      阿树工作室 回复萨龙龙: 回复

      这一句没有错误,你是不是后面多了个逗号。。。

      • 小张
        小张 回复阿树工作室: 回复

        我也想知道 我下载的压缩包  直接按照教程的步骤使用  也出现错误 

        • 小张
          小张 回复小张: 回复

          知道问题所在了 ,在写进functions.php的时候 。需要先写include_once(‘optionclass.php’); 然后再include_once(‘option.php’); 搞错顺序 弄你半天!

  10. 呆瓜小贼
    呆瓜小贼 : 回复

    非常感谢啊树写了这么好的教程。特别是写了这么给力的一个类。

  11. 多梦
    多梦 : 回复

    无尽感激啊…那个调用类的搞了几个小时…准备留言问问题的,没想到已经有兄弟帮我问过了。复制粘贴一试,成功了!心里那个激动。谢谢!谢谢!谢谢!

  12. doghap
    doghap : 回复

    首先真的很感谢你的这一系列的教程,对我有了不少的帮助…在下我想问一下,类文件中的上传图片功能中,能不能实现显示favion图标,即.ico格式的图标,如果能的话希望你指示指示….谢谢!

    • 阿树工作室
      阿树工作室 回复doghap: 回复

      额。。。。能的,这个不需要指示

      • doghap
        doghap 回复阿树工作室: 回复

        原来是我把地址搞错了无法显示….还有一个如果要在上传图片的位置添加一个复选框,比如说,LOGO上传那里添加一个是否显示文字LOGO之类的复选框,怎么操作?

        • 阿树工作室
          阿树工作室 回复doghap: 回复

          你可以单独设置一个复选框,也可以改类文件。。。

  13. imagic
    imagic : 回复

    哎呀,说了那么多忘记说重点了~~~~

    就是这方面的功能应该如何实现呢?

    • imagic
      imagic 回复imagic: 回复

      不好意思阿树,我在你进阶教程看到的= = 

      就是这个函数:register_post_type

      • 阿树工作室
        阿树工作室 回复imagic: 回复

        找到了啊。。

  14. Abby
    Abby : 回复

    我的js,jquary 逻辑很差 ,想知道为什么insert image 点击没有出现wordpress自带的上传框,而是一直读条,也不知道是哪里错了

    • Abby
      Abby 回复Abby: 回复

      找到错的地方了.. 一个标签属性写错了 href  只写了 ef

      • 阿树工作室
        阿树工作室 回复Abby: 回复

        • imagic
          imagic 回复阿树工作室: 回复

          阿树,像ifanr的http://www.ifanr.com/news  这个页面下的文章好像不是分类模板控制的,推测http://www.ifanr.com/news是页面,http://www.ifanr.com/news下的文章是其页面下的文章。

          那他们是不是在后台增加了一个菜单可以像发文章一样的方式发布http://www.ifanr.com/news下的文章,并且跟Wordpress原本的写文章发表的地方不一样。

          像我以前在看国外主题的时候,主题就带有相关的菜单,可以发布幻灯啊、产品啊之类的

  15. monad
    monad : 回复

    啊树用后台配置的类文件给前台添加下拉框怎么只能添加三个选项、怎么可以改吗!

    • 阿树工作室
      阿树工作室 回复monad: 回复

      你把这个用到前台??下拉框的选项应该是可以加的,如果你真的只能显示三个。。那我就真不知道了

      • monaf
        monaf 回复阿树工作室: 回复

        可以添加的、找到原因了、因为我少打了一个分号!

  16. imagic
    imagic : 回复

    到不是因为没有值。比如选择了2,我保存了,它不是post了么,然后返回的页面里面选择在2上,但是下方没有出现2次循环的内容。而是需要再点击保存或者重新打开设置页面才会出现。

    • odayou
      odayou 回复imagic: 回复

      你好,我也在想怎么做关联设置。按照这个思路,我只能执行一次do,while的条件条件直接不符合了,也就是$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]取不到值。不知道有没有什么建议?

      • imagic
        imagic 回复odayou: 回复

        我这串代码是没问题的,唯一的一个问题就是 它不是选择数量后实时显示,而且提交保存后得在此刷新页面后才能出现你选择数量的文本框数。

  17. imagic
    imagic : 回复

    为什么<?php echo $ashu_option[‘ashu’][‘ashu_stat’]; ?>在footer.php里面就不能用。在index.php和header都可以调用。   在footer里面 var_dump 结果是null

    • imagic
      imagic 回复imagic: 回复

      这个问题我我知道了。我忘记在footer加全局函数了。有什么办法可以让所有设置集中在一个页面,然后可以切换不同的设置。国外的好多主题不都是所有不同设置集中在一个页面的么?

      • 阿树工作室
        阿树工作室 回复imagic: 回复

        我个人觉得那样没多大意思,因为大多也是都显示在一个页面只不过通过js和css弄成那种选项卡的效果。。。

        • imagic
          imagic 回复阿树工作室: 回复

          $options[] = array(
          “name” => “显示的软件数量”,
          “desc” => “选择显示在软件产品页面的软件数量”,
          “id”   => $shortname.”_num”,
          “type” => “dropdown”,
          “subtype” => array(
          ‘1’ => 0,
          ‘2’ => 1,
          ‘3’ => 2,
          ‘4’ => 3,
          ‘5’ => 4
          )
          );

          $display_num = 0;
          do{
          $display_num++;
          $options[] = array(
          “name” => “软件名称”.$display_num,
          “size” => “40”,
          “id”   => “softname”.$display_num,
          “type” => “text”);

          $options[] = array(
          “name” => “软件图片”.$display_num,
          “size” => “40”,
          “id”   => “softpic”.$display_num,
          “type” => “text”);

          $options[] = array(
          “name” => “软件介绍”.$display_num,
          “id”   => “softdesc”.$display_num,
          “size” => “40”,
          “std”  => “”,
          “type” => “textarea”);

          $options[] = array(
          “name” => “软件页面地址”.$display_num,
          “size” => “40”,
          “id”   => “softurl”.$display_num,
          “type” => “text”);
          }
          while ($display_num <= $Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]);

          我写了个这个代码,但是下拉菜单选择数量后,保存并不会立即显示下方do内的内容,必须得再刷新一次。这个要怎么解决呢?

          • 阿树工作室
            阿树工作室 回复imagic: 回复

            弄个这么复杂的。。。。你这是通过一保存的值$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]来输出一串循环里面的设置对吧。。。第一次运行的时候,$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]应该是没有值的,所以就不输出,当你保存了一个$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]值之后,应该就可以了吧。。。。我建议你再自己定义一种类型“text”之类的,直接配置一个这种类型,则输出4个text,当然这得多费一下心了

  18. 季陶
    季陶 : 回复

    子菜单添加成功后,第一个子菜单跟父菜单是一样的名字,要如何修改呢?

    • 阿树工作室
      阿树工作室 回复季陶: 回复

      修改配置输出中$pageinfo里面的信息哇

  19. 庄周小梦
    庄周小梦 : 回复

    首先谢谢博主的解答,我的思路大概跟你说的一样  ‘child’=>false这个修改了,重新定义了ashu_option_class的类名,不过倒是没更改’optionname’=>’ashu’,可能是这个问题导致失败吧,呵呵,等下再试试!

    对了,对于如何调用全局变量的内容为什么说不赘述?我惭愧,竟然搞不懂!

    假如我要调用_ashu_logo这个类,该怎么调用呢?

    我用的方法是:<?php echo get_option(‘_ashu_logo‘); ?> 不行

    <?php
    global $ashu_option;
    echo $ashu_option->_ashu_logo;
    ?>

    这个也不行

    困惑了….

    期待看到你的解答,麻烦了!

     

     

    • 阿树工作室
      阿树工作室 回复庄周小梦: 回复

      你可以先global $ashu_option;然后使用var_dump( $ashu_option )打印$ashu_option就知道了,这应该是个二维数组。

      • 庄周小梦
        庄周小梦 回复阿树工作室: 回复

         这个你们已经在文章中打印出来了,结果就是:

        • array   
        •   ‘ashu’ =>    
        •     array   
        •       ‘_ashu_text’ => string ‘阿树工作室文本输入框修改’ (length=36)   
        •       ‘_ashu_textarea’ => string ‘阿树工作室文本域修改’ (length=30)   
        •       ‘_ashu_logo’ => string ‘http://localhost/newtheme/wp-content/uploads/2012/08/1960_19591-360×200.jpg’ (length=75)   
        •       ‘_ashu_radio’ => string ‘2’ (length=1)   
        •       ‘_ashu_checkbox’ => string ‘true’ (length=4)   
        •       ‘_ashu_page_select’ => string ‘2’ (length=1)   
        •       ‘_ashu_cate_select’ => string ‘1’ (length=1)   
        •       ‘_ashu_select’ => string ‘banana’ (length=6)   
        •       ‘save_my_options’ => string ‘1’ (length=1)   
        •       ‘Submit’ => string ‘Save Changes’ (length=12)  
        • 但是如何在前台调用?试了快一个上午啦   真心没搞懂   果然还是php基础太差了

        • 阿树工作室
          阿树工作室 回复庄周小梦: 回复

          比如:echo $ashu_option[‘ashu’][‘_ashu_text’];

          • 庄周小梦
            庄周小梦 回复阿树工作室: 回复

            恩恩  看到了  然后……  嘿嘿

          • 庄周小梦
            庄周小梦 回复阿树工作室: 回复

            有的时候果然是懂的人一指点胜过自己揣摩几天…搞定了  非常感谢!把贵站的教程翻来覆去看了3篇都没看出解决方案却原来结果只会这么简单。  话说你家网站确实朴素  搞的我想点个广告表示下支持都没办法  呵呵

            • 阿树工作室
              阿树工作室 回复庄周小梦: 回复

              额。。有广告的,每篇文章的相关教程旁边是谷歌广告,不过为毛这几天没显示就不知道了。。

  20. 庄周小梦
    庄周小梦 : 回复

    请教一下  如果想在这个构架上添加一个子菜单项,应该怎么操作呢?前面不使用类倒是挺简单的   使用了类之后   就有点没办法理解   有空的话  请指点一下  谢谢!

    • 阿树工作室
      阿树工作室 回复庄周小梦: 回复

      这个配置文件就是给类实例化,你可以再建一个配置文件,换一些参数,比如’optionname’=>’ashu’,这个菜单名换了 ‘child’=>false, 这个改成true等等。。

      • 庄周小梦
        庄周小梦 回复阿树工作室: 回复

        感谢博主,添加子菜单完美测试通过  谢谢  ^_^

发表评论