wordpress后台制作教程-设置选项类文件

上一篇教程中我们介绍了一个配置wordpress后台选项的类文件构架,这里就将由阿树工作室整理的类文件源码贴出示众。

版本控制

2013.07.08,版本1.0

  1. 增加数组类型
  2. 修改复选框功能
  3. 添加编辑器功能

懒人下载

  1. <?php   
  2. /*wordpress后台设置类文件
  3. Version: 1.0  
  4. Author: 树是我的朋友  
  5. Author URI: http://www.ashuwp.com  
  6. License:http://www.ashuwp.com/courses/optionpage/214.html  
  7. */  
  8. class ashu_option_class{   
  9.   
  10.     var $options;   
  11.     var $pageinfo;   
  12.     var $database_options;   
  13.     var $saved_optionname;   
  14.        
  15.     //类的构建函数   
  16.     function ashu_option_class($options$pageinfo) {   
  17.         $this->options = $options;   
  18.         $this->pageinfo = $pageinfo;   
  19.         $this->make_data_available(); //准备设置选项数据   
  20.   
  21.         add_action( 'admin_menu', array(&$this, 'add_admin_menu') );   
  22.            
  23.         if( isset($_GET['page']) && ($_GET['page'] == $this->pageinfo['filename']) ) {   
  24.             //加载css js   
  25.             add_action('admin_init', array(&$this, 'enqueue_head'));       
  26.         }   
  27.     }   
  28.        
  29.     function enqueue_head() {   
  30.         //加载的js路径   
  31.         wp_enqueue_script('ashu_options_js', TEMJS_URI.'ashu_options.js');    
  32.         wp_enqueue_style('ashu_options_css', TEMJS_URI.'ashu_options.css');    
  33.         wp_enqueue_script('thickbox');   
  34.         wp_enqueue_style('thickbox');   
  35.     }   
  36.        
  37.     //创建菜单项函数   
  38.     function add_admin_menu() {   
  39.         //添加顶级菜单项   
  40.         $top_level = "主题设置";   
  41.         if(!$this->pageinfo['child']) {   
  42.             add_menu_page($top_level$top_level, 'edit_themes', $this->pageinfo['filename'], array(&$this, 'initialize'));   
  43.             define('TOP_LEVEL_BASEAME', $this->pageinfo['filename']);   
  44.         }else{   
  45.             add_submenu_page(TOP_LEVEL_BASEAME, $this->pageinfo['full_name'], $this->pageinfo['full_name'], 'edit_themes', $this->pageinfo['filename'], array(&$this, 'initialize'));   
  46.         }   
  47.     }   
  48.        
  49.     function make_data_available() {   
  50.         global $ashu_option//申明全局变量   
  51.            
  52.         foreach ($this->options as $option) {   
  53.             if( isset($option['std']) ) {   
  54.                 $ashu_option_std[$this->pageinfo['optionname']][$option['id']] = $option['std'];   
  55.             }   
  56.         }   
  57.         //选项组名称   
  58.         $this->saved_optionname = 'ashu_'.$this->pageinfo['optionname'];   
  59.         $ashu_option[$this->pageinfo['optionname']] = get_option($this->saved_optionname);   
  60.            
  61.         //合并数组   
  62.         $ashu_option[$this->pageinfo['optionname']] = array_merge((array)$ashu_option_std[$this->pageinfo['optionname']], (array)$ashu_option[$this->pageinfo['optionname']]);   
  63.            
  64.         //html实体转换   
  65.         $ashu_option[$this->pageinfo['optionname']] = $this->htmlspecialchars_deep($ashu_option[$this->pageinfo['optionname']]);   
  66.        
  67.     }   
  68.        
  69.     //使用递归将预定义html实体转换为字符   
  70.     function htmlspecialchars_deep($mixed$quote_style = ENT_QUOTES, $charset = 'UTF-8') {   
  71.         if (is_array($mixed) || is_object($mixed)) {   
  72.             foreach($mixed as $key => $value) {   
  73.                 $mixed[$key] = $this->htmlspecialchars_deep($value$quote_style$charset);   
  74.             }   
  75.         }   
  76.         elseif (is_string($mixed)) {   
  77.             $mixed = htmlspecialchars_decode($mixed$quote_style);   
  78.         }   
  79.         return $mixed;   
  80.     }    
  81.        
  82.     function initialize() {   
  83.         $this->get_save_options();   
  84.         $this->display();   
  85.     }   
  86.        
  87.     //显示表单项函数   
  88.     function display() {       
  89.         $saveoption = false;   
  90.         echo '<div class="wrap">';   
  91.         echo '<div class="icon32" id="icon-options-general"><br/></div>';   
  92.         echo '<h2>'.$this->pageinfo['full_name'].'</h2>';   
  93.         echo '<form method="post" action="">';   
  94.            
  95.         //根据选项类型执行对应函数   
  96.         foreach ($this->options as $option) {   
  97.             if (method_exists($this$option['type'])) {   
  98.                 $this->$option['type']($option);   
  99.                 $saveoption = true;   
  100.             }   
  101.         }   
  102.         if($saveoption) {   
  103.             echo '<p class="submit">';   
  104.             echo '<input type="hidden" value="1" name="save_my_options"/>';   
  105.             echo '<input type="submit" name="Submit" class="button-primary autowidth" value="Save Changes" /></p>';   
  106.         }   
  107.         echo '</form></div>';   
  108.     }   
  109.        
  110.     //更新数据   
  111.     function get_save_options() {   
  112.         $options = $newoptions  = get_option($this->saved_optionname);   
  113.         if ( isset( $_POST['save_my_options'] ) ) {   
  114.             echo '<div class="updated fade" id="message" style=""><p><strong>Settings saved.</strong></p></div>';   
  115.             $opion_count = 0;   
  116.             foreach ($_POST as $key => $value) {   
  117.                 if( preg_match("/^(numbers_)/"$key$result) ){   
  118.                     $numbers = explode( ',', $value );   
  119.                     $newoptions[$key] = $numbers;   
  120.                 }elseif( preg_match("/^(tinymce_)/"$key$result) ){   
  121.                     $value = stripslashes($value);   
  122.                     $newoptions[$key] = $value;   
  123.                 }elseif( preg_match("/^(checkbox_)/"$key$result) ){   
  124.                     $newoptions[$key] = $value;   
  125.                 }else{   
  126.                     $value = stripslashes($value);   
  127.                     $newoptions[$key] = htmlspecialchars($value, ENT_QUOTES,"UTF-8");   
  128.                 }   
  129.             }   
  130.         }   
  131.                
  132.         if ( $options != $newoptions ) {   
  133.             $options = $newoptions;   
  134.             update_option($this->saved_optionname, $options);   
  135.         }   
  136.            
  137.         if($options) {   
  138.             foreach ($options as $key => $value) {   
  139.                 $options[$key] = empty($options[$key]) ? false : $options[$key];   
  140.             }   
  141.         }   
  142.            
  143.         $this->database_options = $options;   
  144.     }   
  145.        
  146.     /************开头***************/  
  147.     function open($values) {   
  148.         if(!isset($values['desc'])) $values['desc'] = "";   
  149.            
  150.         echo '<table class="widefat">';   
  151.         echo '<thead><tr><th colspan="2">'.$values['desc'].'&nbsp;</th></tr></thead>';   
  152.     }   
  153.        
  154.     /***************结尾**************/  
  155.     function close($values) {   
  156.         echo '<tfoot><tr><th>&nbsp;</th><th>&nbsp;</th></tr></tfoot></table>';   
  157.     }   
  158.   
  159.     /**********标题***********************/  
  160.     function title($values) {   
  161.         echo '<h3>'.$values['name'].'</h3>';   
  162.         if (isset($values['desc'])) echo '<p>'.$values['desc'].'</p>';   
  163.     }   
  164.   
  165.     /*****************************文本域**********************************/  
  166.     function textarea($values) {   
  167.         if(isset($this->database_options[$values['id']]))   
  168.             $values['std'] = $this->database_options[$values['id']];   
  169.   
  170.         echo '<tr valign="top" >';   
  171.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  172.         echo '<td>'.$values['desc'].'<br/>';   
  173.         echo '<textarea name="'.$values['id'].'" cols="60" rows="7" id="'.$values['id'].'" style="width: 80%; font-size: 12px;" class="code">';   
  174.         echo $values['std'].'</textarea><br/>';   
  175.         echo '<br/></td>';   
  176.         echo '</tr>';   
  177.     }   
  178.        
  179.     /*********************文本框**************************/  
  180.     function text($values) {       
  181.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  182.            
  183.         echo '<tr valign="top" >';   
  184.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  185.         echo '<td>'.$values['desc'].'<br/>';   
  186.         echo '<input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';   
  187.         echo '<br/><br/></td>';   
  188.         echo '</tr>';   
  189.     }   
  190.        
  191.   
  192.     /**************复选框*******************/  
  193.     function checkbox($values) {   
  194.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  195.            
  196.         echo '<tr valign="top">';   
  197.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  198.         echo '<td>'.$values['desc'].'<br/>';   
  199.            
  200.         foreach$values['buttons'] as $key=>$value ) {   
  201.             $checked ="";   
  202.             ifis_array($values['std']) && in_array($key,$values['std'])) {   
  203.                 $checked = 'checked = "checked"';   
  204.             }   
  205.             echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;   
  206.         }   
  207.   
  208.            
  209.         echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/>';   
  210.         echo '<br/></td>';   
  211.         echo '</tr>';   
  212.     }   
  213.   
  214.     /**********************单选框******************************/  
  215.     function radio($values) {   
  216.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  217.            
  218.         echo '<tr valign="top" >';   
  219.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  220.         echo '<td>'.$values['desc'].'<br/>';   
  221.            
  222.         foreach($values['buttons'] as $key=>$value) {      
  223.             $checked ="";   
  224.             if(isset($values['std']) && ($values['std'] == $key)) {   
  225.                 $checked = 'checked = "checked"';   
  226.             }   
  227.            
  228.             echo '<p><input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>';   
  229.             echo '<label for="'.$values['id'].'">'.$value.'</label></p>';   
  230.         }   
  231.            
  232.         echo '<br/></td>';   
  233.         echo '</tr>';   
  234.     }   
  235.     /*****************数组***********************/  
  236.     function numbers_array($values){   
  237.         if(isset($this->database_options[$values['id']]))   
  238.             $values['std'] = $this->database_options[$values['id']];   
  239.         else  
  240.             $values['std']=array();   
  241.   
  242.         $nums = implode( ',', $values['std'] );   
  243.            
  244.         echo '<tr valign="top" >';   
  245.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  246.         echo '<td>'.$values['desc'].'<br/>';   
  247.         echo '<input type="text" size="'.$values['size'].'" value="'.$nums.'" id="'.$values['id'].'" name="'.$values['id'].'"/>';   
  248.         echo '<br/><br/></td>';   
  249.         echo '</tr>';   
  250.     }   
  251.   
  252.     /********************下拉框*********************/  
  253.     function dropdown($values) {       
  254.         if(!isset($this->database_options[$values['id']]) && isset($values['std'])) $this->database_options[$values['id']] = $values['std'];   
  255.                    
  256.         echo '<tr valign="top" >';   
  257.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  258.         echo '<td>'.$values['desc'].'<br/>';   
  259.            
  260.             if($values['subtype'] == 'page') {   
  261.                 $select = 'Select page';   
  262.                 $entries = get_pages('title_li=&orderby=name');   
  263.             }else if($values['subtype'] == 'sidebar'){   
  264.                 global $wp_registered_sidebars;   
  265.                 $select = 'Select a special sidebar';   
  266.                 $entries = $wp_registered_sidebars;   
  267.             }else if($values['subtype'] == 'cat'){   
  268.                 $select = 'Select category';   
  269.                 $entries = get_categories('title_li=&orderby=name&hide_empty=0');   
  270.             }   
  271.             else  
  272.             {      
  273.                 $select = 'Select...';   
  274.                 $entries = $values['subtype'];   
  275.             }   
  276.            
  277.             echo '<select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';   
  278.             echo '<option value="">'.$select .'</option>  ';   
  279.   
  280.             foreach ($entries as $key => $entry) {   
  281.                 if($values['subtype'] == 'page')   
  282.                 {   
  283.                     $id = $entry->ID;   
  284.                     $title = $entry->post_title;   
  285.                 }else if($values['subtype'] == 'cat'){   
  286.                     $id = $entry->term_id;   
  287.                     $title = $entry->name;   
  288.                 }else if($values['subtype'] == 'sidebar'){   
  289.                     $id = $entry['id'];   
  290.                     $title = $entry['name'];   
  291.                 }   
  292.                 else  
  293.                 {   
  294.                     $id = $key;    
  295.                     $title = $entry;           
  296.                 }   
  297.   
  298.                 if ($this->database_options[$values['id']] == $id )   
  299.                 {   
  300.                     $selected = "selected='selected'";     
  301.                 }   
  302.                 else  
  303.                 {   
  304.                     $selected = "";        
  305.                 }   
  306.                    
  307.                 echo"<option $selected value='"$id."'>"$title."</option>";   
  308.             }   
  309.            
  310.         echo '</select>';   
  311.             
  312.         echo '<br/><br/></td>';   
  313.         echo '</tr>';   
  314.     }   
  315.        
  316.     /*******************上传*****************************/  
  317.     function upload($values) {     
  318.         $prevImg = '';   
  319.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  320.         if($values['std'] != ''){$prevImg = '<img src='.$values['std'].' alt="" />';}   
  321.            
  322.         echo '<tr valign="top" >';   
  323.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  324.         echo '<td>';   
  325.         echo '<div class="preview_pic_optionspage" id="'.$values['id'].'_div">'.$prevImg.'</div>';   
  326.         echo $values['desc'].'<br/>';   
  327.         echo '<input type="text" size="60" value="'.$values['std'].'" name="'.$values['id'].'" class="upload_pic_input" />';   
  328.         echo '&nbsp;<a onclick="return false;" title="" class="k_hijack button thickbox" id="'.$values['id'].'" href="media-upload.php?type=image&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true">Insert Image</a>';   
  329.            
  330.         echo '<br/><br/></td>';   
  331.         echo '</tr>';   
  332.     }   
  333.     //编辑器   
  334.     function tinymce($values){   
  335.         if(isset($this->database_options[$values['id']]))   
  336.             $values['std'] = $this->database_options[$values['id']];   
  337.                
  338.         echo '<tr valign="top" >';   
  339.         echo '<th scope="row" width="200px">'.$values['name'].'</th>';   
  340.         echo '<td>'.$values['desc'].'<br/>';   
  341.         wp_editor( $values['std'], $values['id'],$settings=array('tinymce'=>1,'media_buttons'=>0,) );   
  342.         echo '<br/></td>';   
  343.         echo '</tr>';   
  344.     }   
  345.   
  346. }   
  347. ?>  

注意类中还加载了一个自定义的js文件:ashu_options.js     这个js文件中的代码为:

  1. jQuery.noConflict();   
  2.   
  3. jQuery(document).ready(function()   
  4. {      
  5.     ashu_media_uploader();   
  6.     ashu_preview_pic();   
  7. });   
  8.   
  9. function ashu_preview_pic()   
  10. {   
  11.     jQuery('.upload_pic_input').each(function()   
  12.     {   
  13.         jQuery(this).bind('change focus blur ktrigger', function()   
  14.         {      
  15.                
  16.             $select = '#' + jQuery(this).attr('name') + '_div';   
  17.             $value = jQuery(this).val();   
  18.             $image = '<img src ="'+$value+'" />';   
  19.                            
  20.             var $image = jQuery($select).html('').append($image).find('img');   
  21.                
  22.             //set timeout because of safari   
  23.             window.setTimeout(function()   
  24.             {   
  25.                 if(parseInt($image.attr('width')) < 20)   
  26.                 {      
  27.                     jQuery($select).html('');   
  28.                 }   
  29.             },500);   
  30.         });   
  31.     });   
  32. }   
  33.   
  34. function ashu_media_uploader()   
  35. {          
  36.         $buttons = jQuery('.k_hijack');   
  37.         $realmediabuttons = jQuery('.media-buttons a');   
  38.            
  39.            
  40.         window.custom_editor = false;   
  41.            
  42.         // set a variable depending on what has been clicked, normal media uploader or kriesi hijacked uploader   
  43.         $buttons.click(function()   
  44.         {      
  45.             window.custom_editor = jQuery(this).attr('id');            
  46.         });   
  47.            
  48.         $realmediabuttons.click(function()   
  49.         {   
  50.             window.custom_editor = false;   
  51.         });   
  52.   
  53.         window.original_send_to_editor = window.send_to_editor;   
  54.         window.send_to_editor = function(html)   
  55.         {      
  56.                
  57.             if (custom_editor)    
  58.             {      
  59.                 $img = jQuery(html).attr('src') || jQuery(html).find('img').attr('src') || jQuery(html).attr('href');   
  60.                    
  61.                 jQuery('input[name='+custom_editor+']').val($img).trigger('ktrigger');   
  62.                 custom_editor = false;   
  63.                 window.tb_remove();   
  64.             }   
  65.             else    
  66.             {   
  67.                 window.original_send_to_editor(html);   
  68.             }   
  69.         };   
  70. }  

限于篇幅,使用方法请参考下一篇文章:阿树工作室设置类文件的使用方法

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

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

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

已有24条评论

  1. 华子
    华子 : 回复

    使用最新框架测试,设置选项类文件配置了默认值 ‘std’ ,如下:

    $ashu_options[] = array(
    ‘name’ => ‘首页关键词(keywords)’,
    ‘id’ => ‘seo_keywords’,
    ‘desc’ => ‘多个词间用英文逗号隔开’,
    ‘std’ => ‘这里填写关键词信息’,
    ‘type’ => ‘text’
    );

    但是设置页面后台调用是出来了,但是如果清空保存之后,默认值没有保存下来 ,分类目录和文章可以,估计是数据保存问题,只会套用配置,不懂保存怎么修改,这个可以修复下吗?

    • 阿树工作室
      阿树工作室 回复华子: 回复

      个人认为这个有时候需要清空数据,给你几个建议,建议一、在输出数据的时候判断是否为空,设定默认值。 建议二、在设置的描述中加提示问题,提醒。
      当然如果要修改的话,主要修改ashuwp_options_feild.php这个文件中的make_data_available函数,将第40行的判断代码修改。
      默认的判断代码:if( isset($option[‘id’]) && isset($ashu_option[$this->pageinfo[‘optionname’]][$option[‘id’]]))
      修改为:if( isset($option[‘id’]) && isset($ashu_option[$this->pageinfo[‘optionname’]][$option[‘id’]]) && $ashu_option[$this->pageinfo[‘optionname’]][$option[‘id’]]!=” )

  2. 刘东
    刘东 : 回复

    树您好 请问下载下来的东西放在哪个文件夹啊?我是新手

    • 阿树工作室
      阿树工作室 回复刘东: 回复

      请直接下载本站框架。。

  3. 亮说
    亮说 : 回复

    1、下载的文件下不下来啊~验证之后下载的文件“未知大小”,解压显示压缩包损坏;

    2、这个代码php+js上传之后,也引用了,但是后台为什么找不到呢~

  4. wchm001
    wchm001 : 回复

    教程太好了,真的非常感谢啊!

  5. 酷剑
    酷剑 : 回复

    发现直接应用在没有主题选项的主题中,并不能创建主题选项这个菜单,需要把

    add_menu_page($top_level$top_level, ‘edit_themes’, $this->pageinfo[‘filename’], array(&$this, ‘initialize’));   

    改为

    add_theme_page……

    不知道能否解惑一下,我哪里看漏了吗?

    • 阿树工作室
      阿树工作室 回复酷剑: 回复

      额。。。。不应该会出现你这样的问题。新制作的主题,每个都是没有主题选项的。

      不过提醒一下:使用的时候,配置文件一定要先创建一个顶级菜单,再创建子菜单。。。

  6. laoan
    laoan : 回复

    树好:

    这句:$options = $newoptions  = get_option($this->saved_optionname); 

    是不是等同于:

    $newoptions  = get_option($this->saved_optionname); 

    $options = $newoptions

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

      是的

  7. 小朋友
    小朋友 : 回复

    问题解决了,是我没有设置好js的路径…

  8. 小朋友
    小朋友 : 回复

    这个类图片上传有问题啊 我上传图片后点击插入文章 然后就是一片空白。。

  9. 小朋友
    小朋友 : 回复

    LZ的思路十分清晰,佩服

  10. Ivan
    Ivan : 回复

    教程很好啊,請問有沒有這個後臺教程源碼下載?我複製進去好像有些代碼亂了。。。

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

      增加了压缩包。。请自由下载

  11. 卢卡斯
    卢卡斯 : 回复

    博主牛逼,写的都是干货,原创,赞一个

  12. 小新
    小新 : 回复

    我只是想问你一下  ,你这最后两篇文章中的代码放在后台以后为什么会导致新建分类目录出现错误呢 ???

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

      对不起,我不知道你什么主题,也不知道你的错误代码,我怎么猜得出。。

  13. 小新
    小新 : 回复

    什么意思  ???

    你看不见图片是吧  !!!!

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

      难道你看得到。。

  14. 小新
    小新 : 回复

    为什么我在主题里添加了两个文件代码之后会与wordpress本的文件发冲突呢,就是在新建分类目录的时候,但是在打开分类目录的时候刚才新建的分类目录就出现了。这是什么回事啊 ???请教一下   啊树 哥!!!这是在后台截图的ress后台原

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

      你的图挂了。。

  15. xuefeng3600
    xuefeng3600 : 回复

    前面几篇主题后台教程看懂了,到这里有点晕了,我先回去补习一下类方面的知识! 写的很清晰,赞一个!就是个人水平有限啊~~~

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

      其实这样简单的类还是很简单的。。。

发表评论