wordpress主题后台制作教程-设置选项类的使用方法|wordpress主题定制-阿树工作室

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

您现在的位置:阿树工作室->wordpress主题教程->后台制作教程 2012.8.19标签: 后台制作教程, 类文件浏览数:37,980

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

一、载入类文件

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

include_once('option-class.php');

二、检查js文件

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

三、新建配置文件

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

include_once('option.php');

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

四、配置选项

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

注意

对于数组类型、复选框、编辑器，配置中的id有要求。

复选框和数组保存的数据为数组

<?php
$pageinfo = array('full_name' => '阿树工作室网站设置', 'optionname'=>'ashu', 'child'=>false, 'filename' => basename(__FILE__));
$options = array();
$options[] = array( "type" => "open");
$options[] = array(
"name"=>"阿树工作室-标题",
"desc"=>"这是一个设置页面示范",
"type" => "title");
$options[] = array(
"name"=>"文本框",
"id"=>"_ashu_text",
"std"=>"阿树工作室文本输入框",
"desc"=>"阿树工作室版权所有",
"size"=>"60",
"type"=>"text"
);
$options[] = array(
"name"=>"文本域",
"id"=>"_ashu_textarea",
"std"=>"阿树工作室文本域",
"desc"=>"阿树工作室版权所有",
"size"=>"60",
"type"=>"textarea"
);
$options[] = array(
"name" => "图片上传",
"desc" => "请上传一个图片或填写一个图片地址",
"std"=>"",
"id" => "_ashu_logo",
"type" => "upload");
$options[] = array( "name" => "单选框",
"desc" => "请选择",
"id" => "_ashu_radio",
"type" => "radio",
"buttons" => array('Yes','No'),
"std" => 1);
$options[] = array( "name" => "复选框",
"desc" => "请选择",
"id" => "checkbox_ashu", //id必须以checkbox_开头
"std" => 1,
"buttons" => array('汽车','自行车','三轮车','公交车'),
"type" => "checkbox");
$options[] = array( "name" => "页面下拉框",
"desc" => "请选择一个页面",
"id" => "_ashu_page_select",
"type" => "dropdown",
"subtype" => 'page'
);
$options[] = array( "name" => "分类下拉框",
"desc" => "请选择大杂烩页面",
"id" => "_ashu_cate_select",
"type" => "dropdown",
"subtype" => 'cat'
);
$options[] = array( "name" => "分类下拉框",
"desc" => "请选择大杂烩页面",
"id" => "_ashu_side_select",
"type" => "dropdown",
"subtype" => 'sidebar'
);
$options[] = array( "name" => "下拉框",
"desc" => "请选择",
"id" => "_ashu_select",
"type" => "dropdown",
"subtype" => array(
'苹果'=>'apple',
'香蕉'=>'banana',
'桔子'=>'orange'
)
);
$options[] = array(
"name" => "编辑器",
"desc" => "",
"id" => "tinymce_ashu", //id必须以 tinymce_开头
"std" => "",
"type" => "tinymce"
);
$options[] = array(
"name" => "数组信息",
"desc" => "请输入一组id，以英文分号隔开，例如 1,2,3",
"id" => "numbers_ashu", //id必须以 numbers_开头
"size"=>60,
"std" => "",
"type" => "numbers_array"
);
$options[] = array( "type" => "close");
$options_page = new ashu_option_class($options, $pageinfo);
?>

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

效果图：

前台调用(重要)：

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

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

<?php
global $ashu_option;
var_dump($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-360x200.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)

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

！转载请注明来自：阿树工作室-wordpress主题定制,制作教程（wordpress主题定制-阿树工作室）

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

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

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

已有60条评论

ww : 回复 2017-08-08 14:15

五年前的就这么厉害了
小折 : 回复 2017-07-31 12:30

请问你这个兼容4.8版本吗? 我入进去后后台出错
Fatal error: Class ‘ashu_option_class’ not found in D:\wamp\www\wp-content\themes\twentyseventeen\option.php on line 103
- 阿树工作室回复小折: 回复 2017-07-31 21:32
  
  您好，本教程写于5年前，并没有测试兼容。使用阿树工作室提供的框架可兼容最新版。
xiyouzi : 回复 2016-12-02 04:40

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’)这个值
qinnek : 回复 2015-09-28 22:06

我想在前台设置一个公告，但把输出代码怎么写都不行，都显示null，请问一下文本框输出代码怎么用，id是tips，谢谢
- 阿树工作室回复qinnek: 回复 2015-09-28 23:19
  
  你好，此教程已经是2012年的了，请查看最新的本站框架。
  - qinnek 回复阿树工作室: 回复 2015-09-29 19:50
    
    你好，我试了很多遍你的框架，看不明白，不知道怎么输出，请问一下文本框输出代码怎么用，id是tips。能出一个视频教程就好了。
小朋友 : 回复 2015-03-24 23:18

树哥前台调用图片地址怎么调用啊，按你之前调用的方式没有显示。
小朋友 : 回复 2015-03-21 00:46

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

这个要具体怎么解决，麻烦您了！
- 阿树工作室回复小朋友: 回复 2015-03-21 21:56
  
  输出之前有用 global $ashu_option;么
  - 小朋友回复阿树工作室: 回复 2015-03-22 23:14
    
    <?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)
    
    打扰树哥宝贵时间了还望指教！谢谢！
    - 阿树工作室回复小朋友: 回复 2015-03-23 11:40
      
      你想输出的是：<?php echo $ashu_option[‘ashu’][‘numbers_ashu’]; ?>，但是看你打印的代码numbers_ashu用的是一个数组，数组是不能用echo直接输出的。。。。。
      - 小朋友回复阿树工作室: 回复 2015-03-23 12:21
        
        这样啊！谢谢树哥！
        
        那数组要怎么使用或怎么调用啊
小安 : 回复 2014-11-07 20:39

阿树你好我一直在使用你写的主题选项面板源码，最近几天发现在 wp4.0中文下设置一个logo上传选项然后把顶部文件分离出来做成header.php文件然后在 index.php中引入header文件。结果发现前台的logo图片地址获取不到了，找了半天不知道什么原因如果不分离顶部文件只是一个index文件又是正常的望有空也有兴趣的时候帮我看看问题吧，很多时候都习惯做主题分离出头部顶部。
- 阿树工作室回复小安: 回复 2014-11-07 20:48
  
  如果你是在header.php中输出，请在header.php中加上global $ashu_option;
周公解梦 : 回复 2014-10-25 14:36

请教一下，这个插入图片的功能好像不行，插入的后显示空白，麻烦博主解答一下
- 阿树工作室回复周公解梦: 回复 2014-10-25 20:20
  
  请直接下载本站提供的后台框架，成品类文件http://www.ashuwp.com/courses/highgrade/627.html
laiydesign.com : 回复 2014-08-14 18:12

我在本地信息都添加好，保存了，换个域名上传到网上就不行了，显示空白了，是怎么回事呀？
- laiydesign.com 回复laiydesign.com: 回复 2014-08-14 18:17
  
  去查找数据库，这些信息在数据库都能找到，就是显示不到后台上，求解决方法，谢谢。
痕迹 : 回复 2014-08-08 15:24

图片上传好像不行，插入文章显示空白的。请问博主怎么解决这个问题？
萨龙龙 : 回复 2013-09-27 17:48

$options_page = new ashu_option_class($options, $pageinfo);，这段代码显示错误，麻烦看下什么原因？谢谢
- 阿树工作室回复萨龙龙: 回复 2013-09-28 10:29
  
  这一句没有错误，你是不是后面多了个逗号。。。
  - 小张回复阿树工作室: 回复 2013-10-25 19:57
    
    我也想知道我下载的压缩包直接按照教程的步骤使用也出现错误
    - 小张回复小张: 回复 2013-10-25 20:10
      
      知道问题所在了，在写进functions.php的时候。需要先写include_once(‘optionclass.php’); 然后再include_once(‘option.php’); 搞错顺序弄你半天！
呆瓜小贼 : 回复 2013-06-24 16:20

非常感谢啊树写了这么好的教程。特别是写了这么给力的一个类。
多梦 : 回复 2013-04-13 17:32

无尽感激啊…那个调用类的搞了几个小时…准备留言问问题的，没想到已经有兄弟帮我问过了。复制粘贴一试，成功了！心里那个激动。谢谢！谢谢！谢谢！
doghap : 回复 2013-02-10 01:56

首先真的很感谢你的这一系列的教程,对我有了不少的帮助…在下我想问一下,类文件中的上传图片功能中,能不能实现显示favion图标,即.ico格式的图标,如果能的话希望你指示指示….谢谢!
- 阿树工作室回复doghap: 回复 2013-02-10 08:32
  
  额。。。。能的，这个不需要指示
  - doghap 回复阿树工作室: 回复 2013-02-10 14:19
    
    原来是我把地址搞错了无法显示….还有一个如果要在上传图片的位置添加一个复选框,比如说,LOGO上传那里添加一个是否显示文字LOGO之类的复选框,怎么操作?
    - 阿树工作室回复doghap: 回复 2013-02-10 18:25
      
      你可以单独设置一个复选框，也可以改类文件。。。
imagic : 回复 2013-01-26 15:07

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

就是这方面的功能应该如何实现呢？
- imagic 回复imagic: 回复 2013-01-26 15:21
  
  不好意思阿树，我在你进阶教程看到的= =
  
  就是这个函数：register_post_type
  - 阿树工作室回复imagic: 回复 2013-01-26 19:25
    
    找到了啊。。
Abby : 回复 2012-12-19 16:56

我的js，jquary 逻辑很差，想知道为什么insert image 点击没有出现wordpress自带的上传框，而是一直读条，也不知道是哪里错了
- Abby 回复Abby: 回复 2012-12-19 17:03
  
  找到错的地方了.. 一个标签属性写错了 href 只写了 ef
  - 阿树工作室回复Abby: 回复 2012-12-19 17:23
    
    囧
    - imagic 回复阿树工作室: 回复 2013-01-26 15:07
      
      阿树，像ifanr的http://www.ifanr.com/news 这个页面下的文章好像不是分类模板控制的，推测http://www.ifanr.com/news是页面，http://www.ifanr.com/news下的文章是其页面下的文章。
      
      那他们是不是在后台增加了一个菜单可以像发文章一样的方式发布http://www.ifanr.com/news下的文章，并且跟Wordpress原本的写文章发表的地方不一样。
      
      像我以前在看国外主题的时候，主题就带有相关的菜单，可以发布幻灯啊、产品啊之类的
monad : 回复 2012-12-10 06:53

啊树用后台配置的类文件给前台添加下拉框怎么只能添加三个选项、怎么可以改吗！
- 阿树工作室回复monad: 回复 2012-12-10 10:38
  
  你把这个用到前台？？下拉框的选项应该是可以加的，如果你真的只能显示三个。。那我就真不知道了
  - monaf 回复阿树工作室: 回复 2012-12-11 04:41
    
    可以添加的、找到原因了、因为我少打了一个分号！
imagic : 回复 2012-12-05 15:37

到不是因为没有值。比如选择了2，我保存了，它不是post了么，然后返回的页面里面选择在2上，但是下方没有出现2次循环的内容。而是需要再点击保存或者重新打开设置页面才会出现。
- odayou 回复imagic: 回复 2013-01-22 18:19
  
  你好，我也在想怎么做关联设置。按照这个思路，我只能执行一次do，while的条件条件直接不符合了,也就是中$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]取不到值。不知道有没有什么建议？
  - imagic 回复odayou: 回复 2013-01-26 15:00
    
    我这串代码是没问题的，唯一的一个问题就是它不是选择数量后实时显示，而且提交保存后得在此刷新页面后才能出现你选择数量的文本框数。
imagic : 回复 2012-12-04 01:36

为什么<?php echo $ashu_option[‘ashu’][‘ashu_stat’]; ?>在footer.php里面就不能用。在index.php和header都可以调用。在footer里面 var_dump 结果是null
- imagic 回复imagic: 回复 2012-12-04 02:08
  
  这个问题我我知道了。我忘记在footer加全局函数了。有什么办法可以让所有设置集中在一个页面，然后可以切换不同的设置。国外的好多主题不都是所有不同设置集中在一个页面的么？
  - 阿树工作室回复imagic: 回复 2012-12-04 09:32
    
    我个人觉得那样没多大意思，因为大多也是都显示在一个页面只不过通过js和css弄成那种选项卡的效果。。。
    - imagic 回复阿树工作室: 回复 2012-12-04 14:48
      
      $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: 回复 2012-12-04 18:36
        
        弄个这么复杂的。。。。你这是通过一保存的值$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]来输出一串循环里面的设置对吧。。。第一次运行的时候，$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]应该是没有值的，所以就不输出，当你保存了一个$Sunpaq_option[‘Sunpaq’][‘Sunpaq_num’]值之后，应该就可以了吧。。。。我建议你再自己定义一种类型“text”之类的，直接配置一个这种类型，则输出4个text，当然这得多费一下心了
季陶 : 回复 2012-11-28 16:33

子菜单添加成功后，第一个子菜单跟父菜单是一样的名字，要如何修改呢？
- 阿树工作室回复季陶: 回复 2012-11-28 19:03
  
  修改配置输出中$pageinfo里面的信息哇
庄周小梦 : 回复 2012-10-19 10:46

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

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

假如我要调用_ashu_logo这个类，该怎么调用呢？

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

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

这个也不行

困惑了….

期待看到你的解答，麻烦了！
- 阿树工作室回复庄周小梦: 回复 2012-10-19 11:40
  
  你可以先global $ashu_option;然后使用var_dump( $ashu_option )打印$ashu_option就知道了，这应该是个二维数组。
  - 庄周小梦回复阿树工作室: 回复 2012-10-19 11:48
    
    这个你们已经在文章中打印出来了，结果就是：
    
    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基础太差了
    - 阿树工作室回复庄周小梦: 回复 2012-10-19 12:13
      
      比如：echo $ashu_option[‘ashu’][‘_ashu_text’];
      - 庄周小梦回复阿树工作室: 回复 2012-10-19 16:11
        
        恩恩看到了然后…… 嘿嘿
      - 庄周小梦回复阿树工作室: 回复 2012-10-19 13:41
        
        有的时候果然是懂的人一指点胜过自己揣摩几天…搞定了非常感谢！把贵站的教程翻来覆去看了3篇都没看出解决方案却原来结果只会这么简单。话说你家网站确实朴素搞的我想点个广告表示下支持都没办法呵呵
        
        阿树工作室回复庄周小梦: 回复 2012-10-19 16:07
        
        额。。有广告的，每篇文章的相关教程旁边是谷歌广告，不过为毛这几天没显示就不知道了。。
庄周小梦 : 回复 2012-10-18 11:24

请教一下如果想在这个构架上添加一个子菜单项，应该怎么操作呢？前面不使用类倒是挺简单的使用了类之后就有点没办法理解有空的话请指点一下谢谢！
- 阿树工作室回复庄周小梦: 回复 2012-10-18 20:20
  
  这个配置文件就是给类实例化，你可以再建一个配置文件，换一些参数，比如’optionname’=>’ashu’,这个菜单名换了 ‘child’=>false, 这个改成true等等。。
  - 庄周小梦回复阿树工作室: 回复 2012-10-19 11:02
    
    感谢博主，添加子菜单完美测试通过谢谢 ^_^

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

前台调用(重要)：

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

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

已有60条评论

向imagic进行回复 取消回复

向imagic进行回复取消回复