首页 » Wordpress » Wordpress进阶教程
网站地图

wordpress进阶教程(十):后台创建自定义面板类文件

丢了这么多天没更新教程了，自己写到哪里都快忘了。。

前面几篇教程演示了如何在wordpress后台文章编辑页面添加自定义面板，今天的这篇文章不能算教程，和wordpress后台教程的结尾一样，直接放出一个便于使用的类文件，实际使用的时候只需要包含这个类文件，然后加载配置文件即可使用。

使用该类文件可以创建标题、文本框、文本域、下拉框、复选框、图片实时预览上传。不过少了单选框(radio)和文本编辑器，因为个人很少用到这两个，所以就没加上，如果有需要的，完全可以参照我们前面几篇教程自己添加上。

说实话，这个类文件也不完全是我写的，我也是从一个主题上弄来的，然后修改。

文件下载(压缩包内功四个文件，分别是类文件、配置文件、js文件、css文件)

懒人下载

版本控制

2013.07.08，版本1.0

  1. 修改复选框功能
  2. 增加编辑器功能

类文件metaboxclass.php：

  2. <?php   
  3. /* 
  4. wordpress文章自定义字段类文件  
  5. Version: 1.0  
  6. Author: 树是我的朋友  
  7. Author URI: http://www.shouce.ren  
  8. License: http://www.shouce.ren/courses/highgrade/298.html  
  9. */  
  10. class ashu_meta_box{   
  11.     var $options;   
  12.     var $boxinfo;   
  13.        
  14.     //构造函数   
  15.     function ashu_meta_box($options,$boxinfo){   
  16.         $this->options = $options;   
  17.         $this->boxinfo = $boxinfo;   
  18.            
  19.         add_action('admin_menu', array(&$this, 'init_boxes'));   
  20.         add_action('save_post', array(&$this, 'save_postdata'));   
  21.     }   
  22.        
  23.     //初始化   
  24.     function init_boxes(){   
  25.         $this->add_script_and_styles();   
  26.         $this->create_meta_box();   
  27.     }   
  28.        
  29.     //加载css和js脚本   
  30.     function add_script_and_styles(){   
  31.         if(basename( $_SERVER['PHP_SELF']) == "page.php"    
  32.         || basename( $_SERVER['PHP_SELF']) == "page-new.php"    
  33.         || basename( $_SERVER['PHP_SELF']) == "post-new.php"    
  34.         || basename( $_SERVER['PHP_SELF']) == "post.php"  
  35.         || basename( $_SERVER['PHP_SELF']) == "media-upload.php")   
  36.         {      
  37.             //注意加载的脚本的url   
  38.             wp_enqueue_style('metabox_fields_css', TEMJS_URI. 'metabox_fields.css');   
  39.             wp_enqueue_script('metabox_fields_js',TEMJS_URI. 'metabox_fields.js');   
  40.             wp_enqueue_style('thickbox');   
  41.             wp_enqueue_script('media-upload');   
  42.             wp_enqueue_script('thickbox');   
  43.                
  44.   
  45.             if(isset($_GET['hijack_target']))   
  46.             {      
  47.                 add_action('admin_head', array(&$this,'add_hijack_var'));   
  48.             }   
  49.         }   
  50.     }   
  51.        
  52.     /*************************/  
  53.     function add_hijack_var()   
  54.     {   
  55.         echo "<meta name='hijack_target' content='".$_GET['hijack_target']."' />\n";   
  56.     }   
  57.        
  58.     //创建自定义面板   
  59.     function create_meta_box(){   
  60.         if ( function_exists('add_meta_box') && is_array($this->boxinfo['page']) )    
  61.         {   
  62.             foreach ($this->boxinfo['page'] as $area)   
  63.             {      
  64.                 if ($this->boxinfo['callback'] == '') $this->boxinfo['callback'] = 'new_meta_boxes';   
  65.                    
  66.                 add_meta_box(      
  67.                     $this->boxinfo['id'],    
  68.                     $this->boxinfo['title'],   
  69.                     array(&$this, $this->boxinfo['callback']),   
  70.                     $area, $this->boxinfo['context'],    
  71.                     $this->boxinfo['priority']   
  72.                 );     
  73.             }   
  74.         }     
  75.     }   
  76.        
  77.     //创建自定义面板的显示函数   
  78.     function new_meta_boxes(){   
  79.         global $post;   
  80.         //根据类型调用显示函数   
  81.         foreach ($this->options as $option)   
  82.         {                  
  83.             if (method_exists($this, $option['type']))   
  84.             {   
  85.                 $meta_box_value = get_post_meta($post->ID, $option['id'], true);    
  86.                 if($meta_box_value != "") $option['std'] = $meta_box_value;     
  87.                    
  88.                 echo '<div class="alt kriesi_meta_box_alt meta_box_'.$option['type'].' meta_box_'.$this->boxinfo['context'].'">';   
  89.                 $this->$option['type']($option);   
  90.                 echo '</div>';   
  91.             }   
  92.         }   
  93.            
  94.         //隐藏域   
  95.         echo'<input type="hidden" name="'.$this->boxinfo['id'].'_noncename" id="'.$this->boxinfo['id'].'_noncename" value="'.wp_create_nonce( 'ashumetabox' ).'" />';     
  96.     }   
  97.        
  98.     //保存字段数据   
  99.     function save_postdata() {   
  100.         if( isset( $_POST['post_type'] ) && in_array($_POST['post_type'],$this->boxinfo['page'] ) && (isset($_POST['save']) || isset($_POST['publish']) ) ){   
  101.         $post_id = $_POST['post_ID'];   
  102.            
  103.         foreach ($this->options as $option) {   
  104.             if (!wp_verify_nonce($_POST[$this->boxinfo['id'].'_noncename'], 'ashumetabox')) {      
  105.                 return $post_id ;   
  106.             }   
  107.             //判断权限   
  108.             if ( 'page' == $_POST['post_type'] ) {   
  109.                 if ( !current_user_can( 'edit_page', $post_id  ))   
  110.                 return $post_id ;   
  111.             } else {   
  112.                 if ( !current_user_can( 'edit_post', $post_id  ))   
  113.                 return $post_id ;   
  114.             }   
  115.             //将预定义字符转换为html实体   
  116.             if( $option['type'] == 'tinymce' ){   
  117.                     $data =  stripslashes($_POST[$option['id']]);   
  118.             }elseif( $option['type'] == 'checkbox' ){   
  119.                     $data =  $_POST[$option['id']];   
  120.             }else{   
  121.                 $data = htmlspecialchars($_POST[$option['id']], ENT_QUOTES,"UTF-8");   
  122.             }   
  123.                
  124.             if(get_post_meta($post_id , $option['id']) == "")   
  125.             add_post_meta($post_id , $option['id'], $data, true);   
  126.                
  127.             elseif($data != get_post_meta($post_id , $option['id'], true))   
  128.             update_post_meta($post_id , $option['id'], $data);   
  129.                
  130.             elseif($data == "")   
  131.             delete_post_meta($post_id , $option['id'], get_post_meta($post_id , $option['id'], true));   
  132.                
  133.         }   
  134.         }   
  135.     }   
  136.     //显示标题   
  137.     function title($values){   
  138.         echo '<p>'.$values['name'].'</p>';   
  139.     }   
  140.     //文本框   
  141.     function text($values){    
  142.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  143.            
  144.         echo '<p>'.$values['name'].'</p>';   
  145.         echo '<p><input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';   
  146.         echo $values['desc'].'<br/></p>';   
  147.         echo '<br/>';   
  148.     }   
  149.     //文本域   
  150.     function textarea($values){   
  151.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  152.            
  153.         echo '<p>'.$values['name'].'</p>';   
  154.         echo '<p><textarea class="kriesi_textarea" cols="60" rows="5" id="'.$values['id'].'" name="'.$values['id'].'">'.$values['std'].'</textarea>';   
  155.         echo $values['desc'].'<br/></p>';   
  156.         echo '<br/>';   
  157.     }   
  158.     //媒体上传   
  159.     function media($values){   
  160.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  161.            
  162.         //图片上传按钮   
  163.         global $post_ID, $temp_ID;   
  164.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);   
  165.         $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";   
  166.         $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&amp;type=image");   
  167.            
  168.         $button = '<a href="'.$image_upload_iframe_src.'&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true" id="'.$values['id'].'" class="k_hijack button thickbox" onclick="return false;" >上传</a>';   
  169.            
  170.         //判断图片格式,图片预览   
  171.         $image = '';   
  172.         if($values['std'] != '') {   
  173.             $fileextension = substr($values['std'], strrpos($values['std'], '.') + 1);   
  174.             $extensions = array('png','gif','jpeg','jpg','pdf','tif');   
  175.                
  176.             if(in_array($fileextension, $extensions))   
  177.             {   
  178.                 $image = '<img src="'.$values['std'].'" />';   
  179.             }   
  180.         }   
  181.            
  182.         echo '<div id="'.$values['id'].'_div" class="kriesi_preview_pic">'.$image .'</div>';   
  183.         echo '<p>'.$values['name'].'</p><p>';   
  184.         if($values['desc'] != "") echo '<p>'.$values['desc'].'<br/>';   
  185.         echo '<input class="kriesi_preview_pic_input" type="text" size="'.$values['size'].'" value="'.$values['std'].'" name="'.$values['id'].'"/>'.$button;   
  186.         echo '</p>';   
  187.         echo '<br/>';   
  188.     }   
  189.     //单选框   
  190.     function radio( $values ){   
  191.         if(isset($this->database_options[$values['id']]))   
  192.             $values['std'] = $this->database_options[$values['id']];   
  193.         echo '<p>'.$values['name'].'</p>';   
  194.         foreach( $values['buttons'] as $key=>$value ) {   
  195.             $checked ="";   
  196.             if($values['std'] == $key) {   
  197.                 $checked = 'checked = "checked"';   
  198.             }   
  199.             echo '<input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>'.$value;   
  200.         }   
  201.     }   
  202.     //复选框   
  203.     function checkbox($values){   
  204.         echo '<p>'.$values['name'].'</p>';   
  205.         foreach( $values['buttons'] as $key=>$value ) {   
  206.             $checked ="";   
  207.             if( is_array($values['std']) && in_array($key,$values['std'])) {   
  208.                 $checked = 'checked = "checked"';   
  209.             }   
  210.             echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;   
  211.         }   
  212.         echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/></p>';   
  213.     }   
  214.     //下拉框   
  215.     function dropdown($values){   
  216.         echo '<p>'.$values['name'].'</p>';   
  217.             //选择内容可以使页面、分类、菜单、侧边栏和自定义内容   
  218.             if($values['subtype'] == 'page'){   
  219.                 $select = 'Select page';   
  220.                 $entries = get_pages('title_li=&orderby=name');   
  221.             }else if($values['subtype'] == 'cat'){   
  222.                 $select = 'Select category';   
  223.                 $entries = get_categories('title_li=&orderby=name&hide_empty=0');   
  224.             }else if($values['subtype'] == 'menu'){   
  225.                 $select = 'Select Menu in page left';   
  226.                 $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) );   
  227.             }else if($values['subtype'] == 'sidebar'){   
  228.                 global $wp_registered_sidebars;   
  229.                 $select = 'Select a special sidebar';   
  230.                 $entries = $wp_registered_sidebars;   
  231.             }else{     
  232.                 $select = 'Select...';   
  233.                 $entries = $values['subtype'];   
  234.             }   
  235.            
  236.             echo '<p><select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';   
  237.             echo '<option value="">'.$select .'</option>  ';   
  238.                
  239.             foreach ($entries as $key => $entry){   
  240.                 if($values['subtype'] == 'page'){   
  241.                     $id = $entry->ID;   
  242.                     $title = $entry->post_title;   
  243.                 }else if($values['subtype'] == 'cat'){   
  244.                     $id = $entry->term_id;   
  245.                     $title = $entry->name;   
  246.                 }else if($values['subtype'] == 'menu'){   
  247.                     $id = $entry->term_id;   
  248.                     $title = $entry->name;   
  249.                 }else if($values['subtype'] == 'sidebar'){   
  250.                     $id = $entry['id'];   
  251.                     $title = $entry['name'];   
  252.                 }else{   
  253.                     $id = $entry;   
  254.                     $title = $key;                 
  255.                 }   
  256.   
  257.                 if ($values['std'] == $id ){   
  258.                     $selected = "selected='selected'";     
  259.                 }else{   
  260.                     $selected = "";        
  261.                 }   
  262.                    
  263.                 echo"<option $selected value='". $id."'>". $title."</option>";   
  264.             }   
  265.            
  266.         echo '</select>';   
  267.         echo $values['desc'].'<br/></p>';    
  268.         echo '<br/>';   
  269.     }   
  270.        
  271.     //编辑器   
  272.     function tinymce($values){   
  273.         if(isset($this->database_options[$values['id']]))   
  274.             $values['std'] = $this->database_options[$values['id']];   
  275.            
  276.         echo '<p>'.$values['name'].'</p>';   
  277.         wp_editor( $values['std'], $values['id'] );   
  278.         //wp_editor( $values['std'], 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) );   
  279.         //带配置参数   
  280.         /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式 
  281.         tinymce=>1,//可视化模式  
  282.         media_buttons=>0,//取消媒体上传  
  283.         textarea_rows=>5,//行数设为5  
  284.         editor_class=>"textareastyle") ); */  
  285.     }   
  286.   
  287. }   
  288. ?>  
  291. jQuery.noConflict();   
  292. jQuery(document).ready(function(){     
  293.     hijack_media_uploader();   
  294.     hijack_preview_pic();   
  295. });   
  296.   
  297. function hijack_preview_pic(){   
  298.     jQuery('.kriesi_preview_pic_input').each(function(){   
  299.         jQuery(this).bind('change focus blur ktrigger', function(){    
  300.             $select = '#' + jQuery(this).attr('name') + '_div';   
  301.             $value = jQuery(this).val();   
  302.             $image = '<img src ="'+$value+'" />';   
  303.             var $image = jQuery($select).html('').append($image).find('img');   
  304.             //set timeout because of safari   
  305.             window.setTimeout(function(){   
  306.                 if(parseInt($image.attr('width')) < 20){       
  307.                     jQuery($select).html('');   
  308.                 }   
  309.             },500);   
  310.         });   
  311.     });   
  312. }   
  313.   
  314. function hijack_media_uploader(){          
  315.         $buttons = jQuery('.k_hijack');   
  316.         $realmediabuttons = jQuery('.media-buttons a');   
  317.         window.custom_editor = false;   
  318.         $buttons.click(function(){     
  319.             window.custom_editor = jQuery(this).attr('id');            
  320.         });   
  321.         $realmediabuttons.click(function(){   
  322.             window.custom_editor = false;   
  323.         });   
  324.         window.original_send_to_editor = window.send_to_editor;   
  325.         window.send_to_editor = function(html){    
  326.             if (custom_editor) {       
  327.                 $img = jQuery(html).attr('src') || jQuery(html).find('img').attr('src') || jQuery(html).attr('href');   
  328.                    
  329.                 jQuery('input[name='+custom_editor+']').val($img).trigger('ktrigger');   
  330.                 custom_editor = false;   
  331.                 window.tb_remove();   
  332.             }else{   
  333.                 window.original_send_to_editor(html);   
  334.             }   
  335.         };   
  336. }   
  339. <?php      
  340. //自定义面板类的实例化      
  341. /**********title*************/     
  342. $options = array();      
  343. //page参数为在页面和文章中都添加面板 ，可以添加自定义文章类型   
  344. //context参数为面板在后台的位置，比如side则显示在侧栏      
  345. $boxinfo = array('title' => 'meta box', 'id'=>'ashubox', 'page'=>array('page','post'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');      
  346.      
  347. $options[] = array( "name" => "标题",      
  348.             "type" => "title");      
  349.                   
  350. $options[] = array(      
  351.             "name" => "文本框",      
  352.             "desc" => "",      
  353.             "id" => "ashu_text",      
  354.             "size"=>"40",      
  355.             "std" => "",      
  356.             "type" => "text"     
  357.             );      
  358.                   
  359. $options[] = array(      
  360.             "name" => "文本域",      
  361.             "desc" => "",      
  362.             "id" => "ashu_textarea",      
  363.             "std" => "",      
  364.             "type" => "textarea"     
  365.             );      
  366.                   
  367. $options[] = array(      
  368.             "name" => "图片上传",      
  369.             "desc" => "",      
  370.             "id" => "ashu_upimg",      
  371.             "std" => "",      
  372.             "button_label"=>'上传图片',      
  373.             "type" => "media"     
  374.             );      
  375.                   
  376. $options[] = array(      
  377.             "name" => "单选框",      
  378.             "desc" => "",      
  379.             "id" => "ashu_radio",      
  380.             "std" => 1,      
  381.             "buttons" => array('Yes','No'),   
  382.             "type" => "radio"     
  383.             );      
  384.                   
  385. $options[] = array(      
  386.             "name" => "复选框",      
  387.             "desc" => "喜欢吃啥？",      
  388.             "id" => "ashu_checkbox",      
  389.             "buttons" => array('苹果','香蕉','西瓜','芒果'),   
  390.             "type" => "checkbox"     
  391.             );      
  392.      
  393. $options[] = array(      
  394.             "name" => "下拉选择",      
  395.             "desc" => "",      
  396.             "id" => "ashu_dropdown",      
  397.             "subtype"=> array(      
  398.                 '1'=>'1',      
  399.                 '2'=>'2',      
  400.                 '3'=>'3'      
  401.             ),      
  402.             "type" => "dropdown"     
  403.             );      
  404.                   
  405. $options[] = array(      
  406.             "name" => "选择分类",      
  407.             "desc" => "",      
  408.             "id" => "ashu_cat",      
  409.             "subtype"=> "cat",      
  410.             "type" => "dropdown"     
  411.             );      
  412.                   
  413. $options[] = array(      
  414.             "name" => "选择页面",      
  415.             "desc" => "",      
  416.             "id" => "ashu_page",      
  417.             "subtype"=> "page",      
  418.             "type" => "dropdown"     
  419.             );      
  420.                   
  421. $options[] = array(      
  422.             "name" => "选择菜单",      
  423.             "desc" => "",      
  424.             "id" => "ashu_menu",      
  425.             "subtype"=> "menu",      
  426.             "type" => "dropdown"     
  427.             );      
  428.                   
  429. $options[] = array(      
  430.             "name" => "选择侧边栏",      
  431.             "desc" => "",      
  432.             "id" => "ashu_sidebar",      
  433.             "subtype"=> "sidebar",      
  434.             "type" => "dropdown"     
  435.             );   
  436.   
  437.                   
  438. $options[] = array(      
  439.             "name" => "编辑器",      
  440.             "desc" => "",      
  441.             "id" => "ashu_tinymce",      
  442.             "std" => "",   
  443.             "type" => "tinymce"     
  444.             );                 
  445.                   
  446. $new_box = new ashu_meta_box($options, $boxinfo);      
  447. ?>   
  450. include_once('metaboxclass.php');   
  451. include_once('metabox.php');  
  454. $ashu_eitor = get_post_meta($post->ID, "ashu_text", true); //ashu_text为配置文件中文本框的id  

对应的js文件metabox_fields.js，如果用不到图片上传，可不需要加载js：

  2. <?php   
  3. /* 
  4. wordpress文章自定义字段类文件  
  5. Version: 1.0  
  6. Author: 树是我的朋友  
  7. Author URI: http://www.shouce.ren  
  8. License: http://www.shouce.ren/courses/highgrade/298.html  
  9. */  
  10. class ashu_meta_box{   
  11.     var $options;   
  12.     var $boxinfo;   
  13.        
  14.     //构造函数   
  15.     function ashu_meta_box($options,$boxinfo){   
  16.         $this->options = $options;   
  17.         $this->boxinfo = $boxinfo;   
  18.            
  19.         add_action('admin_menu', array(&$this, 'init_boxes'));   
  20.         add_action('save_post', array(&$this, 'save_postdata'));   
  21.     }   
  22.        
  23.     //初始化   
  24.     function init_boxes(){   
  25.         $this->add_script_and_styles();   
  26.         $this->create_meta_box();   
  27.     }   
  28.        
  29.     //加载css和js脚本   
  30.     function add_script_and_styles(){   
  31.         if(basename( $_SERVER['PHP_SELF']) == "page.php"    
  32.         || basename( $_SERVER['PHP_SELF']) == "page-new.php"    
  33.         || basename( $_SERVER['PHP_SELF']) == "post-new.php"    
  34.         || basename( $_SERVER['PHP_SELF']) == "post.php"  
  35.         || basename( $_SERVER['PHP_SELF']) == "media-upload.php")   
  36.         {      
  37.             //注意加载的脚本的url   
  38.             wp_enqueue_style('metabox_fields_css', TEMJS_URI. 'metabox_fields.css');   
  39.             wp_enqueue_script('metabox_fields_js',TEMJS_URI. 'metabox_fields.js');   
  40.             wp_enqueue_style('thickbox');   
  41.             wp_enqueue_script('media-upload');   
  42.             wp_enqueue_script('thickbox');   
  43.                
  44.   
  45.             if(isset($_GET['hijack_target']))   
  46.             {      
  47.                 add_action('admin_head', array(&$this,'add_hijack_var'));   
  48.             }   
  49.         }   
  50.     }   
  51.        
  52.     /*************************/  
  53.     function add_hijack_var()   
  54.     {   
  55.         echo "<meta name='hijack_target' content='".$_GET['hijack_target']."' />\n";   
  56.     }   
  57.        
  58.     //创建自定义面板   
  59.     function create_meta_box(){   
  60.         if ( function_exists('add_meta_box') && is_array($this->boxinfo['page']) )    
  61.         {   
  62.             foreach ($this->boxinfo['page'] as $area)   
  63.             {      
  64.                 if ($this->boxinfo['callback'] == '') $this->boxinfo['callback'] = 'new_meta_boxes';   
  65.                    
  66.                 add_meta_box(      
  67.                     $this->boxinfo['id'],    
  68.                     $this->boxinfo['title'],   
  69.                     array(&$this, $this->boxinfo['callback']),   
  70.                     $area, $this->boxinfo['context'],    
  71.                     $this->boxinfo['priority']   
  72.                 );     
  73.             }   
  74.         }     
  75.     }   
  76.        
  77.     //创建自定义面板的显示函数   
  78.     function new_meta_boxes(){   
  79.         global $post;   
  80.         //根据类型调用显示函数   
  81.         foreach ($this->options as $option)   
  82.         {                  
  83.             if (method_exists($this, $option['type']))   
  84.             {   
  85.                 $meta_box_value = get_post_meta($post->ID, $option['id'], true);    
  86.                 if($meta_box_value != "") $option['std'] = $meta_box_value;     
  87.                    
  88.                 echo '<div class="alt kriesi_meta_box_alt meta_box_'.$option['type'].' meta_box_'.$this->boxinfo['context'].'">';   
  89.                 $this->$option['type']($option);   
  90.                 echo '</div>';   
  91.             }   
  92.         }   
  93.            
  94.         //隐藏域   
  95.         echo'<input type="hidden" name="'.$this->boxinfo['id'].'_noncename" id="'.$this->boxinfo['id'].'_noncename" value="'.wp_create_nonce( 'ashumetabox' ).'" />';     
  96.     }   
  97.        
  98.     //保存字段数据   
  99.     function save_postdata() {   
  100.         if( isset( $_POST['post_type'] ) && in_array($_POST['post_type'],$this->boxinfo['page'] ) && (isset($_POST['save']) || isset($_POST['publish']) ) ){   
  101.         $post_id = $_POST['post_ID'];   
  102.            
  103.         foreach ($this->options as $option) {   
  104.             if (!wp_verify_nonce($_POST[$this->boxinfo['id'].'_noncename'], 'ashumetabox')) {      
  105.                 return $post_id ;   
  106.             }   
  107.             //判断权限   
  108.             if ( 'page' == $_POST['post_type'] ) {   
  109.                 if ( !current_user_can( 'edit_page', $post_id  ))   
  110.                 return $post_id ;   
  111.             } else {   
  112.                 if ( !current_user_can( 'edit_post', $post_id  ))   
  113.                 return $post_id ;   
  114.             }   
  115.             //将预定义字符转换为html实体   
  116.             if( $option['type'] == 'tinymce' ){   
  117.                     $data =  stripslashes($_POST[$option['id']]);   
  118.             }elseif( $option['type'] == 'checkbox' ){   
  119.                     $data =  $_POST[$option['id']];   
  120.             }else{   
  121.                 $data = htmlspecialchars($_POST[$option['id']], ENT_QUOTES,"UTF-8");   
  122.             }   
  123.                
  124.             if(get_post_meta($post_id , $option['id']) == "")   
  125.             add_post_meta($post_id , $option['id'], $data, true);   
  126.                
  127.             elseif($data != get_post_meta($post_id , $option['id'], true))   
  128.             update_post_meta($post_id , $option['id'], $data);   
  129.                
  130.             elseif($data == "")   
  131.             delete_post_meta($post_id , $option['id'], get_post_meta($post_id , $option['id'], true));   
  132.                
  133.         }   
  134.         }   
  135.     }   
  136.     //显示标题   
  137.     function title($values){   
  138.         echo '<p>'.$values['name'].'</p>';   
  139.     }   
  140.     //文本框   
  141.     function text($values){    
  142.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  143.            
  144.         echo '<p>'.$values['name'].'</p>';   
  145.         echo '<p><input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';   
  146.         echo $values['desc'].'<br/></p>';   
  147.         echo '<br/>';   
  148.     }   
  149.     //文本域   
  150.     function textarea($values){   
  151.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  152.            
  153.         echo '<p>'.$values['name'].'</p>';   
  154.         echo '<p><textarea class="kriesi_textarea" cols="60" rows="5" id="'.$values['id'].'" name="'.$values['id'].'">'.$values['std'].'</textarea>';   
  155.         echo $values['desc'].'<br/></p>';   
  156.         echo '<br/>';   
  157.     }   
  158.     //媒体上传   
  159.     function media($values){   
  160.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  161.            
  162.         //图片上传按钮   
  163.         global $post_ID, $temp_ID;   
  164.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);   
  165.         $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";   
  166.         $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&amp;type=image");   
  167.            
  168.         $button = '<a href="'.$image_upload_iframe_src.'&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true" id="'.$values['id'].'" class="k_hijack button thickbox" onclick="return false;" >上传</a>';   
  169.            
  170.         //判断图片格式,图片预览   
  171.         $image = '';   
  172.         if($values['std'] != '') {   
  173.             $fileextension = substr($values['std'], strrpos($values['std'], '.') + 1);   
  174.             $extensions = array('png','gif','jpeg','jpg','pdf','tif');   
  175.                
  176.             if(in_array($fileextension, $extensions))   
  177.             {   
  178.                 $image = '<img src="'.$values['std'].'" />';   
  179.             }   
  180.         }   
  181.            
  182.         echo '<div id="'.$values['id'].'_div" class="kriesi_preview_pic">'.$image .'</div>';   
  183.         echo '<p>'.$values['name'].'</p><p>';   
  184.         if($values['desc'] != "") echo '<p>'.$values['desc'].'<br/>';   
  185.         echo '<input class="kriesi_preview_pic_input" type="text" size="'.$values['size'].'" value="'.$values['std'].'" name="'.$values['id'].'"/>'.$button;   
  186.         echo '</p>';   
  187.         echo '<br/>';   
  188.     }   
  189.     //单选框   
  190.     function radio( $values ){   
  191.         if(isset($this->database_options[$values['id']]))   
  192.             $values['std'] = $this->database_options[$values['id']];   
  193.         echo '<p>'.$values['name'].'</p>';   
  194.         foreach( $values['buttons'] as $key=>$value ) {   
  195.             $checked ="";   
  196.             if($values['std'] == $key) {   
  197.                 $checked = 'checked = "checked"';   
  198.             }   
  199.             echo '<input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>'.$value;   
  200.         }   
  201.     }   
  202.     //复选框   
  203.     function checkbox($values){   
  204.         echo '<p>'.$values['name'].'</p>';   
  205.         foreach( $values['buttons'] as $key=>$value ) {   
  206.             $checked ="";   
  207.             if( is_array($values['std']) && in_array($key,$values['std'])) {   
  208.                 $checked = 'checked = "checked"';   
  209.             }   
  210.             echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;   
  211.         }   
  212.         echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/></p>';   
  213.     }   
  214.     //下拉框   
  215.     function dropdown($values){   
  216.         echo '<p>'.$values['name'].'</p>';   
  217.             //选择内容可以使页面、分类、菜单、侧边栏和自定义内容   
  218.             if($values['subtype'] == 'page'){   
  219.                 $select = 'Select page';   
  220.                 $entries = get_pages('title_li=&orderby=name');   
  221.             }else if($values['subtype'] == 'cat'){   
  222.                 $select = 'Select category';   
  223.                 $entries = get_categories('title_li=&orderby=name&hide_empty=0');   
  224.             }else if($values['subtype'] == 'menu'){   
  225.                 $select = 'Select Menu in page left';   
  226.                 $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) );   
  227.             }else if($values['subtype'] == 'sidebar'){   
  228.                 global $wp_registered_sidebars;   
  229.                 $select = 'Select a special sidebar';   
  230.                 $entries = $wp_registered_sidebars;   
  231.             }else{     
  232.                 $select = 'Select...';   
  233.                 $entries = $values['subtype'];   
  234.             }   
  235.            
  236.             echo '<p><select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';   
  237.             echo '<option value="">'.$select .'</option>  ';   
  238.                
  239.             foreach ($entries as $key => $entry){   
  240.                 if($values['subtype'] == 'page'){   
  241.                     $id = $entry->ID;   
  242.                     $title = $entry->post_title;   
  243.                 }else if($values['subtype'] == 'cat'){   
  244.                     $id = $entry->term_id;   
  245.                     $title = $entry->name;   
  246.                 }else if($values['subtype'] == 'menu'){   
  247.                     $id = $entry->term_id;   
  248.                     $title = $entry->name;   
  249.                 }else if($values['subtype'] == 'sidebar'){   
  250.                     $id = $entry['id'];   
  251.                     $title = $entry['name'];   
  252.                 }else{   
  253.                     $id = $entry;   
  254.                     $title = $key;                 
  255.                 }   
  256.   
  257.                 if ($values['std'] == $id ){   
  258.                     $selected = "selected='selected'";     
  259.                 }else{   
  260.                     $selected = "";        
  261.                 }   
  262.                    
  263.                 echo"<option $selected value='". $id."'>". $title."</option>";   
  264.             }   
  265.            
  266.         echo '</select>';   
  267.         echo $values['desc'].'<br/></p>';    
  268.         echo '<br/>';   
  269.     }   
  270.        
  271.     //编辑器   
  272.     function tinymce($values){   
  273.         if(isset($this->database_options[$values['id']]))   
  274.             $values['std'] = $this->database_options[$values['id']];   
  275.            
  276.         echo '<p>'.$values['name'].'</p>';   
  277.         wp_editor( $values['std'], $values['id'] );   
  278.         //wp_editor( $values['std'], 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) );   
  279.         //带配置参数   
  280.         /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式 
  281.         tinymce=>1,//可视化模式  
  282.         media_buttons=>0,//取消媒体上传  
  283.         textarea_rows=>5,//行数设为5  
  284.         editor_class=>"textareastyle") ); */  
  285.     }   
  286.   
  287. }   
  288. ?>  
  291. jQuery.noConflict();   
  292. jQuery(document).ready(function(){     
  293.     hijack_media_uploader();   
  294.     hijack_preview_pic();   
  295. });   
  296.   
  297. function hijack_preview_pic(){   
  298.     jQuery('.kriesi_preview_pic_input').each(function(){   
  299.         jQuery(this).bind('change focus blur ktrigger', function(){    
  300.             $select = '#' + jQuery(this).attr('name') + '_div';   
  301.             $value = jQuery(this).val();   
  302.             $image = '<img src ="'+$value+'" />';   
  303.             var $image = jQuery($select).html('').append($image).find('img');   
  304.             //set timeout because of safari   
  305.             window.setTimeout(function(){   
  306.                 if(parseInt($image.attr('width')) < 20){       
  307.                     jQuery($select).html('');   
  308.                 }   
  309.             },500);   
  310.         });   
  311.     });   
  312. }   
  313.   
  314. function hijack_media_uploader(){          
  315.         $buttons = jQuery('.k_hijack');   
  316.         $realmediabuttons = jQuery('.media-buttons a');   
  317.         window.custom_editor = false;   
  318.         $buttons.click(function(){     
  319.             window.custom_editor = jQuery(this).attr('id');            
  320.         });   
  321.         $realmediabuttons.click(function(){   
  322.             window.custom_editor = false;   
  323.         });   
  324.         window.original_send_to_editor = window.send_to_editor;   
  325.         window.send_to_editor = function(html){    
  326.             if (custom_editor) {       
  327.                 $img = jQuery(html).attr('src') || jQuery(html).find('img').attr('src') || jQuery(html).attr('href');   
  328.                    
  329.                 jQuery('input[name='+custom_editor+']').val($img).trigger('ktrigger');   
  330.                 custom_editor = false;   
  331.                 window.tb_remove();   
  332.             }else{   
  333.                 window.original_send_to_editor(html);   
  334.             }   
  335.         };   
  336. }   
  339. <?php      
  340. //自定义面板类的实例化      
  341. /**********title*************/     
  342. $options = array();      
  343. //page参数为在页面和文章中都添加面板 ，可以添加自定义文章类型   
  344. //context参数为面板在后台的位置，比如side则显示在侧栏      
  345. $boxinfo = array('title' => 'meta box', 'id'=>'ashubox', 'page'=>array('page','post'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');      
  346.      
  347. $options[] = array( "name" => "标题",      
  348.             "type" => "title");      
  349.                   
  350. $options[] = array(      
  351.             "name" => "文本框",      
  352.             "desc" => "",      
  353.             "id" => "ashu_text",      
  354.             "size"=>"40",      
  355.             "std" => "",      
  356.             "type" => "text"     
  357.             );      
  358.                   
  359. $options[] = array(      
  360.             "name" => "文本域",      
  361.             "desc" => "",      
  362.             "id" => "ashu_textarea",      
  363.             "std" => "",      
  364.             "type" => "textarea"     
  365.             );      
  366.                   
  367. $options[] = array(      
  368.             "name" => "图片上传",      
  369.             "desc" => "",      
  370.             "id" => "ashu_upimg",      
  371.             "std" => "",      
  372.             "button_label"=>'上传图片',      
  373.             "type" => "media"     
  374.             );      
  375.                   
  376. $options[] = array(      
  377.             "name" => "单选框",      
  378.             "desc" => "",      
  379.             "id" => "ashu_radio",      
  380.             "std" => 1,      
  381.             "buttons" => array('Yes','No'),   
  382.             "type" => "radio"     
  383.             );      
  384.                   
  385. $options[] = array(      
  386.             "name" => "复选框",      
  387.             "desc" => "喜欢吃啥？",      
  388.             "id" => "ashu_checkbox",      
  389.             "buttons" => array('苹果','香蕉','西瓜','芒果'),   
  390.             "type" => "checkbox"     
  391.             );      
  392.      
  393. $options[] = array(      
  394.             "name" => "下拉选择",      
  395.             "desc" => "",      
  396.             "id" => "ashu_dropdown",      
  397.             "subtype"=> array(      
  398.                 '1'=>'1',      
  399.                 '2'=>'2',      
  400.                 '3'=>'3'      
  401.             ),      
  402.             "type" => "dropdown"     
  403.             );      
  404.                   
  405. $options[] = array(      
  406.             "name" => "选择分类",      
  407.             "desc" => "",      
  408.             "id" => "ashu_cat",      
  409.             "subtype"=> "cat",      
  410.             "type" => "dropdown"     
  411.             );      
  412.                   
  413. $options[] = array(      
  414.             "name" => "选择页面",      
  415.             "desc" => "",      
  416.             "id" => "ashu_page",      
  417.             "subtype"=> "page",      
  418.             "type" => "dropdown"     
  419.             );      
  420.                   
  421. $options[] = array(      
  422.             "name" => "选择菜单",      
  423.             "desc" => "",      
  424.             "id" => "ashu_menu",      
  425.             "subtype"=> "menu",      
  426.             "type" => "dropdown"     
  427.             );      
  428.                   
  429. $options[] = array(      
  430.             "name" => "选择侧边栏",      
  431.             "desc" => "",      
  432.             "id" => "ashu_sidebar",      
  433.             "subtype"=> "sidebar",      
  434.             "type" => "dropdown"     
  435.             );   
  436.   
  437.                   
  438. $options[] = array(      
  439.             "name" => "编辑器",      
  440.             "desc" => "",      
  441.             "id" => "ashu_tinymce",      
  442.             "std" => "",   
  443.             "type" => "tinymce"     
  444.             );                 
  445.                   
  446. $new_box = new ashu_meta_box($options, $boxinfo);      
  447. ?>   
  450. include_once('metaboxclass.php');   
  451. include_once('metabox.php');  
  454. $ashu_eitor = get_post_meta($post->ID, "ashu_text", true); //ashu_text为配置文件中文本框的id  

类文件实例化对应的配置文件metabox.php:

注意

复选框保存的数据为数组

  2. <?php   
  3. /* 
  4. wordpress文章自定义字段类文件  
  5. Version: 1.0  
  6. Author: 树是我的朋友  
  7. Author URI: http://www.shouce.ren  
  8. License: http://www.shouce.ren/courses/highgrade/298.html  
  9. */  
  10. class ashu_meta_box{   
  11.     var $options;   
  12.     var $boxinfo;   
  13.        
  14.     //构造函数   
  15.     function ashu_meta_box($options,$boxinfo){   
  16.         $this->options = $options;   
  17.         $this->boxinfo = $boxinfo;   
  18.            
  19.         add_action('admin_menu', array(&$this, 'init_boxes'));   
  20.         add_action('save_post', array(&$this, 'save_postdata'));   
  21.     }   
  22.        
  23.     //初始化   
  24.     function init_boxes(){   
  25.         $this->add_script_and_styles();   
  26.         $this->create_meta_box();   
  27.     }   
  28.        
  29.     //加载css和js脚本   
  30.     function add_script_and_styles(){   
  31.         if(basename( $_SERVER['PHP_SELF']) == "page.php"    
  32.         || basename( $_SERVER['PHP_SELF']) == "page-new.php"    
  33.         || basename( $_SERVER['PHP_SELF']) == "post-new.php"    
  34.         || basename( $_SERVER['PHP_SELF']) == "post.php"  
  35.         || basename( $_SERVER['PHP_SELF']) == "media-upload.php")   
  36.         {      
  37.             //注意加载的脚本的url   
  38.             wp_enqueue_style('metabox_fields_css', TEMJS_URI. 'metabox_fields.css');   
  39.             wp_enqueue_script('metabox_fields_js',TEMJS_URI. 'metabox_fields.js');   
  40.             wp_enqueue_style('thickbox');   
  41.             wp_enqueue_script('media-upload');   
  42.             wp_enqueue_script('thickbox');   
  43.                
  44.   
  45.             if(isset($_GET['hijack_target']))   
  46.             {      
  47.                 add_action('admin_head', array(&$this,'add_hijack_var'));   
  48.             }   
  49.         }   
  50.     }   
  51.        
  52.     /*************************/  
  53.     function add_hijack_var()   
  54.     {   
  55.         echo "<meta name='hijack_target' content='".$_GET['hijack_target']."' />\n";   
  56.     }   
  57.        
  58.     //创建自定义面板   
  59.     function create_meta_box(){   
  60.         if ( function_exists('add_meta_box') && is_array($this->boxinfo['page']) )    
  61.         {   
  62.             foreach ($this->boxinfo['page'] as $area)   
  63.             {      
  64.                 if ($this->boxinfo['callback'] == '') $this->boxinfo['callback'] = 'new_meta_boxes';   
  65.                    
  66.                 add_meta_box(      
  67.                     $this->boxinfo['id'],    
  68.                     $this->boxinfo['title'],   
  69.                     array(&$this, $this->boxinfo['callback']),   
  70.                     $area, $this->boxinfo['context'],    
  71.                     $this->boxinfo['priority']   
  72.                 );     
  73.             }   
  74.         }     
  75.     }   
  76.        
  77.     //创建自定义面板的显示函数   
  78.     function new_meta_boxes(){   
  79.         global $post;   
  80.         //根据类型调用显示函数   
  81.         foreach ($this->options as $option)   
  82.         {                  
  83.             if (method_exists($this, $option['type']))   
  84.             {   
  85.                 $meta_box_value = get_post_meta($post->ID, $option['id'], true);    
  86.                 if($meta_box_value != "") $option['std'] = $meta_box_value;     
  87.                    
  88.                 echo '<div class="alt kriesi_meta_box_alt meta_box_'.$option['type'].' meta_box_'.$this->boxinfo['context'].'">';   
  89.                 $this->$option['type']($option);   
  90.                 echo '</div>';   
  91.             }   
  92.         }   
  93.            
  94.         //隐藏域   
  95.         echo'<input type="hidden" name="'.$this->boxinfo['id'].'_noncename" id="'.$this->boxinfo['id'].'_noncename" value="'.wp_create_nonce( 'ashumetabox' ).'" />';     
  96.     }   
  97.        
  98.     //保存字段数据   
  99.     function save_postdata() {   
  100.         if( isset( $_POST['post_type'] ) && in_array($_POST['post_type'],$this->boxinfo['page'] ) && (isset($_POST['save']) || isset($_POST['publish']) ) ){   
  101.         $post_id = $_POST['post_ID'];   
  102.            
  103.         foreach ($this->options as $option) {   
  104.             if (!wp_verify_nonce($_POST[$this->boxinfo['id'].'_noncename'], 'ashumetabox')) {      
  105.                 return $post_id ;   
  106.             }   
  107.             //判断权限   
  108.             if ( 'page' == $_POST['post_type'] ) {   
  109.                 if ( !current_user_can( 'edit_page', $post_id  ))   
  110.                 return $post_id ;   
  111.             } else {   
  112.                 if ( !current_user_can( 'edit_post', $post_id  ))   
  113.                 return $post_id ;   
  114.             }   
  115.             //将预定义字符转换为html实体   
  116.             if( $option['type'] == 'tinymce' ){   
  117.                     $data =  stripslashes($_POST[$option['id']]);   
  118.             }elseif( $option['type'] == 'checkbox' ){   
  119.                     $data =  $_POST[$option['id']];   
  120.             }else{   
  121.                 $data = htmlspecialchars($_POST[$option['id']], ENT_QUOTES,"UTF-8");   
  122.             }   
  123.                
  124.             if(get_post_meta($post_id , $option['id']) == "")   
  125.             add_post_meta($post_id , $option['id'], $data, true);   
  126.                
  127.             elseif($data != get_post_meta($post_id , $option['id'], true))   
  128.             update_post_meta($post_id , $option['id'], $data);   
  129.                
  130.             elseif($data == "")   
  131.             delete_post_meta($post_id , $option['id'], get_post_meta($post_id , $option['id'], true));   
  132.                
  133.         }   
  134.         }   
  135.     }   
  136.     //显示标题   
  137.     function title($values){   
  138.         echo '<p>'.$values['name'].'</p>';   
  139.     }   
  140.     //文本框   
  141.     function text($values){    
  142.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  143.            
  144.         echo '<p>'.$values['name'].'</p>';   
  145.         echo '<p><input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';   
  146.         echo $values['desc'].'<br/></p>';   
  147.         echo '<br/>';   
  148.     }   
  149.     //文本域   
  150.     function textarea($values){   
  151.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  152.            
  153.         echo '<p>'.$values['name'].'</p>';   
  154.         echo '<p><textarea class="kriesi_textarea" cols="60" rows="5" id="'.$values['id'].'" name="'.$values['id'].'">'.$values['std'].'</textarea>';   
  155.         echo $values['desc'].'<br/></p>';   
  156.         echo '<br/>';   
  157.     }   
  158.     //媒体上传   
  159.     function media($values){   
  160.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  161.            
  162.         //图片上传按钮   
  163.         global $post_ID, $temp_ID;   
  164.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);   
  165.         $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";   
  166.         $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&amp;type=image");   
  167.            
  168.         $button = '<a href="'.$image_upload_iframe_src.'&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true" id="'.$values['id'].'" class="k_hijack button thickbox" onclick="return false;" >上传</a>';   
  169.            
  170.         //判断图片格式,图片预览   
  171.         $image = '';   
  172.         if($values['std'] != '') {   
  173.             $fileextension = substr($values['std'], strrpos($values['std'], '.') + 1);   
  174.             $extensions = array('png','gif','jpeg','jpg','pdf','tif');   
  175.                
  176.             if(in_array($fileextension, $extensions))   
  177.             {   
  178.                 $image = '<img src="'.$values['std'].'" />';   
  179.             }   
  180.         }   
  181.            
  182.         echo '<div id="'.$values['id'].'_div" class="kriesi_preview_pic">'.$image .'</div>';   
  183.         echo '<p>'.$values['name'].'</p><p>';   
  184.         if($values['desc'] != "") echo '<p>'.$values['desc'].'<br/>';   
  185.         echo '<input class="kriesi_preview_pic_input" type="text" size="'.$values['size'].'" value="'.$values['std'].'" name="'.$values['id'].'"/>'.$button;   
  186.         echo '</p>';   
  187.         echo '<br/>';   
  188.     }   
  189.     //单选框   
  190.     function radio( $values ){   
  191.         if(isset($this->database_options[$values['id']]))   
  192.             $values['std'] = $this->database_options[$values['id']];   
  193.         echo '<p>'.$values['name'].'</p>';   
  194.         foreach( $values['buttons'] as $key=>$value ) {   
  195.             $checked ="";   
  196.             if($values['std'] == $key) {   
  197.                 $checked = 'checked = "checked"';   
  198.             }   
  199.             echo '<input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>'.$value;   
  200.         }   
  201.     }   
  202.     //复选框   
  203.     function checkbox($values){   
  204.         echo '<p>'.$values['name'].'</p>';   
  205.         foreach( $values['buttons'] as $key=>$value ) {   
  206.             $checked ="";   
  207.             if( is_array($values['std']) && in_array($key,$values['std'])) {   
  208.                 $checked = 'checked = "checked"';   
  209.             }   
  210.             echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;   
  211.         }   
  212.         echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/></p>';   
  213.     }   
  214.     //下拉框   
  215.     function dropdown($values){   
  216.         echo '<p>'.$values['name'].'</p>';   
  217.             //选择内容可以使页面、分类、菜单、侧边栏和自定义内容   
  218.             if($values['subtype'] == 'page'){   
  219.                 $select = 'Select page';   
  220.                 $entries = get_pages('title_li=&orderby=name');   
  221.             }else if($values['subtype'] == 'cat'){   
  222.                 $select = 'Select category';   
  223.                 $entries = get_categories('title_li=&orderby=name&hide_empty=0');   
  224.             }else if($values['subtype'] == 'menu'){   
  225.                 $select = 'Select Menu in page left';   
  226.                 $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) );   
  227.             }else if($values['subtype'] == 'sidebar'){   
  228.                 global $wp_registered_sidebars;   
  229.                 $select = 'Select a special sidebar';   
  230.                 $entries = $wp_registered_sidebars;   
  231.             }else{     
  232.                 $select = 'Select...';   
  233.                 $entries = $values['subtype'];   
  234.             }   
  235.            
  236.             echo '<p><select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';   
  237.             echo '<option value="">'.$select .'</option>  ';   
  238.                
  239.             foreach ($entries as $key => $entry){   
  240.                 if($values['subtype'] == 'page'){   
  241.                     $id = $entry->ID;   
  242.                     $title = $entry->post_title;   
  243.                 }else if($values['subtype'] == 'cat'){   
  244.                     $id = $entry->term_id;   
  245.                     $title = $entry->name;   
  246.                 }else if($values['subtype'] == 'menu'){   
  247.                     $id = $entry->term_id;   
  248.                     $title = $entry->name;   
  249.                 }else if($values['subtype'] == 'sidebar'){   
  250.                     $id = $entry['id'];   
  251.                     $title = $entry['name'];   
  252.                 }else{   
  253.                     $id = $entry;   
  254.                     $title = $key;                 
  255.                 }   
  256.   
  257.                 if ($values['std'] == $id ){   
  258.                     $selected = "selected='selected'";     
  259.                 }else{   
  260.                     $selected = "";        
  261.                 }   
  262.                    
  263.                 echo"<option $selected value='". $id."'>". $title."</option>";   
  264.             }   
  265.            
  266.         echo '</select>';   
  267.         echo $values['desc'].'<br/></p>';    
  268.         echo '<br/>';   
  269.     }   
  270.        
  271.     //编辑器   
  272.     function tinymce($values){   
  273.         if(isset($this->database_options[$values['id']]))   
  274.             $values['std'] = $this->database_options[$values['id']];   
  275.            
  276.         echo '<p>'.$values['name'].'</p>';   
  277.         wp_editor( $values['std'], $values['id'] );   
  278.         //wp_editor( $values['std'], 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) );   
  279.         //带配置参数   
  280.         /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式 
  281.         tinymce=>1,//可视化模式  
  282.         media_buttons=>0,//取消媒体上传  
  283.         textarea_rows=>5,//行数设为5  
  284.         editor_class=>"textareastyle") ); */  
  285.     }   
  286.   
  287. }   
  288. ?>  
  291. jQuery.noConflict();   
  292. jQuery(document).ready(function(){     
  293.     hijack_media_uploader();   
  294.     hijack_preview_pic();   
  295. });   
  296.   
  297. function hijack_preview_pic(){   
  298.     jQuery('.kriesi_preview_pic_input').each(function(){   
  299.         jQuery(this).bind('change focus blur ktrigger', function(){    
  300.             $select = '#' + jQuery(this).attr('name') + '_div';   
  301.             $value = jQuery(this).val();   
  302.             $image = '<img src ="'+$value+'" />';   
  303.             var $image = jQuery($select).html('').append($image).find('img');   
  304.             //set timeout because of safari   
  305.             window.setTimeout(function(){   
  306.                 if(parseInt($image.attr('width')) < 20){       
  307.                     jQuery($select).html('');   
  308.                 }   
  309.             },500);   
  310.         });   
  311.     });   
  312. }   
  313.   
  314. function hijack_media_uploader(){          
  315.         $buttons = jQuery('.k_hijack');   
  316.         $realmediabuttons = jQuery('.media-buttons a');   
  317.         window.custom_editor = false;   
  318.         $buttons.click(function(){     
  319.             window.custom_editor = jQuery(this).attr('id');            
  320.         });   
  321.         $realmediabuttons.click(function(){   
  322.             window.custom_editor = false;   
  323.         });   
  324.         window.original_send_to_editor = window.send_to_editor;   
  325.         window.send_to_editor = function(html){    
  326.             if (custom_editor) {       
  327.                 $img = jQuery(html).attr('src') || jQuery(html).find('img').attr('src') || jQuery(html).attr('href');   
  328.                    
  329.                 jQuery('input[name='+custom_editor+']').val($img).trigger('ktrigger');   
  330.                 custom_editor = false;   
  331.                 window.tb_remove();   
  332.             }else{   
  333.                 window.original_send_to_editor(html);   
  334.             }   
  335.         };   
  336. }   
  339. <?php      
  340. //自定义面板类的实例化      
  341. /**********title*************/     
  342. $options = array();      
  343. //page参数为在页面和文章中都添加面板 ，可以添加自定义文章类型   
  344. //context参数为面板在后台的位置，比如side则显示在侧栏      
  345. $boxinfo = array('title' => 'meta box', 'id'=>'ashubox', 'page'=>array('page','post'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');      
  346.      
  347. $options[] = array( "name" => "标题",      
  348.             "type" => "title");      
  349.                   
  350. $options[] = array(      
  351.             "name" => "文本框",      
  352.             "desc" => "",      
  353.             "id" => "ashu_text",      
  354.             "size"=>"40",      
  355.             "std" => "",      
  356.             "type" => "text"     
  357.             );      
  358.                   
  359. $options[] = array(      
  360.             "name" => "文本域",      
  361.             "desc" => "",      
  362.             "id" => "ashu_textarea",      
  363.             "std" => "",      
  364.             "type" => "textarea"     
  365.             );      
  366.                   
  367. $options[] = array(      
  368.             "name" => "图片上传",      
  369.             "desc" => "",      
  370.             "id" => "ashu_upimg",      
  371.             "std" => "",      
  372.             "button_label"=>'上传图片',      
  373.             "type" => "media"     
  374.             );      
  375.                   
  376. $options[] = array(      
  377.             "name" => "单选框",      
  378.             "desc" => "",      
  379.             "id" => "ashu_radio",      
  380.             "std" => 1,      
  381.             "buttons" => array('Yes','No'),   
  382.             "type" => "radio"     
  383.             );      
  384.                   
  385. $options[] = array(      
  386.             "name" => "复选框",      
  387.             "desc" => "喜欢吃啥？",      
  388.             "id" => "ashu_checkbox",      
  389.             "buttons" => array('苹果','香蕉','西瓜','芒果'),   
  390.             "type" => "checkbox"     
  391.             );      
  392.      
  393. $options[] = array(      
  394.             "name" => "下拉选择",      
  395.             "desc" => "",      
  396.             "id" => "ashu_dropdown",      
  397.             "subtype"=> array(      
  398.                 '1'=>'1',      
  399.                 '2'=>'2',      
  400.                 '3'=>'3'      
  401.             ),      
  402.             "type" => "dropdown"     
  403.             );      
  404.                   
  405. $options[] = array(      
  406.             "name" => "选择分类",      
  407.             "desc" => "",      
  408.             "id" => "ashu_cat",      
  409.             "subtype"=> "cat",      
  410.             "type" => "dropdown"     
  411.             );      
  412.                   
  413. $options[] = array(      
  414.             "name" => "选择页面",      
  415.             "desc" => "",      
  416.             "id" => "ashu_page",      
  417.             "subtype"=> "page",      
  418.             "type" => "dropdown"     
  419.             );      
  420.                   
  421. $options[] = array(      
  422.             "name" => "选择菜单",      
  423.             "desc" => "",      
  424.             "id" => "ashu_menu",      
  425.             "subtype"=> "menu",      
  426.             "type" => "dropdown"     
  427.             );      
  428.                   
  429. $options[] = array(      
  430.             "name" => "选择侧边栏",      
  431.             "desc" => "",      
  432.             "id" => "ashu_sidebar",      
  433.             "subtype"=> "sidebar",      
  434.             "type" => "dropdown"     
  435.             );   
  436.   
  437.                   
  438. $options[] = array(      
  439.             "name" => "编辑器",      
  440.             "desc" => "",      
  441.             "id" => "ashu_tinymce",      
  442.             "std" => "",   
  443.             "type" => "tinymce"     
  444.             );                 
  445.                   
  446. $new_box = new ashu_meta_box($options, $boxinfo);      
  447. ?>   
  450. include_once('metaboxclass.php');   
  451. include_once('metabox.php');  
  454. $ashu_eitor = get_post_meta($post->ID, "ashu_text", true); //ashu_text为配置文件中文本框的id  

使用方法：在主题中加载这两个文件，比如在主题的functions.php中加载两个文件：

  2. <?php   
  3. /* 
  4. wordpress文章自定义字段类文件  
  5. Version: 1.0  
  6. Author: 树是我的朋友  
  7. Author URI: http://www.shouce.ren  
  8. License: http://www.shouce.ren/courses/highgrade/298.html  
  9. */  
  10. class ashu_meta_box{   
  11.     var $options;   
  12.     var $boxinfo;   
  13.        
  14.     //构造函数   
  15.     function ashu_meta_box($options,$boxinfo){   
  16.         $this->options = $options;   
  17.         $this->boxinfo = $boxinfo;   
  18.            
  19.         add_action('admin_menu', array(&$this, 'init_boxes'));   
  20.         add_action('save_post', array(&$this, 'save_postdata'));   
  21.     }   
  22.        
  23.     //初始化   
  24.     function init_boxes(){   
  25.         $this->add_script_and_styles();   
  26.         $this->create_meta_box();   
  27.     }   
  28.        
  29.     //加载css和js脚本   
  30.     function add_script_and_styles(){   
  31.         if(basename( $_SERVER['PHP_SELF']) == "page.php"    
  32.         || basename( $_SERVER['PHP_SELF']) == "page-new.php"    
  33.         || basename( $_SERVER['PHP_SELF']) == "post-new.php"    
  34.         || basename( $_SERVER['PHP_SELF']) == "post.php"  
  35.         || basename( $_SERVER['PHP_SELF']) == "media-upload.php")   
  36.         {      
  37.             //注意加载的脚本的url   
  38.             wp_enqueue_style('metabox_fields_css', TEMJS_URI. 'metabox_fields.css');   
  39.             wp_enqueue_script('metabox_fields_js',TEMJS_URI. 'metabox_fields.js');   
  40.             wp_enqueue_style('thickbox');   
  41.             wp_enqueue_script('media-upload');   
  42.             wp_enqueue_script('thickbox');   
  43.                
  44.   
  45.             if(isset($_GET['hijack_target']))   
  46.             {      
  47.                 add_action('admin_head', array(&$this,'add_hijack_var'));   
  48.             }   
  49.         }   
  50.     }   
  51.        
  52.     /*************************/  
  53.     function add_hijack_var()   
  54.     {   
  55.         echo "<meta name='hijack_target' content='".$_GET['hijack_target']."' />\n";   
  56.     }   
  57.        
  58.     //创建自定义面板   
  59.     function create_meta_box(){   
  60.         if ( function_exists('add_meta_box') && is_array($this->boxinfo['page']) )    
  61.         {   
  62.             foreach ($this->boxinfo['page'] as $area)   
  63.             {      
  64.                 if ($this->boxinfo['callback'] == '') $this->boxinfo['callback'] = 'new_meta_boxes';   
  65.                    
  66.                 add_meta_box(      
  67.                     $this->boxinfo['id'],    
  68.                     $this->boxinfo['title'],   
  69.                     array(&$this, $this->boxinfo['callback']),   
  70.                     $area, $this->boxinfo['context'],    
  71.                     $this->boxinfo['priority']   
  72.                 );     
  73.             }   
  74.         }     
  75.     }   
  76.        
  77.     //创建自定义面板的显示函数   
  78.     function new_meta_boxes(){   
  79.         global $post;   
  80.         //根据类型调用显示函数   
  81.         foreach ($this->options as $option)   
  82.         {                  
  83.             if (method_exists($this, $option['type']))   
  84.             {   
  85.                 $meta_box_value = get_post_meta($post->ID, $option['id'], true);    
  86.                 if($meta_box_value != "") $option['std'] = $meta_box_value;     
  87.                    
  88.                 echo '<div class="alt kriesi_meta_box_alt meta_box_'.$option['type'].' meta_box_'.$this->boxinfo['context'].'">';   
  89.                 $this->$option['type']($option);   
  90.                 echo '</div>';   
  91.             }   
  92.         }   
  93.            
  94.         //隐藏域   
  95.         echo'<input type="hidden" name="'.$this->boxinfo['id'].'_noncename" id="'.$this->boxinfo['id'].'_noncename" value="'.wp_create_nonce( 'ashumetabox' ).'" />';     
  96.     }   
  97.        
  98.     //保存字段数据   
  99.     function save_postdata() {   
  100.         if( isset( $_POST['post_type'] ) && in_array($_POST['post_type'],$this->boxinfo['page'] ) && (isset($_POST['save']) || isset($_POST['publish']) ) ){   
  101.         $post_id = $_POST['post_ID'];   
  102.            
  103.         foreach ($this->options as $option) {   
  104.             if (!wp_verify_nonce($_POST[$this->boxinfo['id'].'_noncename'], 'ashumetabox')) {      
  105.                 return $post_id ;   
  106.             }   
  107.             //判断权限   
  108.             if ( 'page' == $_POST['post_type'] ) {   
  109.                 if ( !current_user_can( 'edit_page', $post_id  ))   
  110.                 return $post_id ;   
  111.             } else {   
  112.                 if ( !current_user_can( 'edit_post', $post_id  ))   
  113.                 return $post_id ;   
  114.             }   
  115.             //将预定义字符转换为html实体   
  116.             if( $option['type'] == 'tinymce' ){   
  117.                     $data =  stripslashes($_POST[$option['id']]);   
  118.             }elseif( $option['type'] == 'checkbox' ){   
  119.                     $data =  $_POST[$option['id']];   
  120.             }else{   
  121.                 $data = htmlspecialchars($_POST[$option['id']], ENT_QUOTES,"UTF-8");   
  122.             }   
  123.                
  124.             if(get_post_meta($post_id , $option['id']) == "")   
  125.             add_post_meta($post_id , $option['id'], $data, true);   
  126.                
  127.             elseif($data != get_post_meta($post_id , $option['id'], true))   
  128.             update_post_meta($post_id , $option['id'], $data);   
  129.                
  130.             elseif($data == "")   
  131.             delete_post_meta($post_id , $option['id'], get_post_meta($post_id , $option['id'], true));   
  132.                
  133.         }   
  134.         }   
  135.     }   
  136.     //显示标题   
  137.     function title($values){   
  138.         echo '<p>'.$values['name'].'</p>';   
  139.     }   
  140.     //文本框   
  141.     function text($values){    
  142.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  143.            
  144.         echo '<p>'.$values['name'].'</p>';   
  145.         echo '<p><input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';   
  146.         echo $values['desc'].'<br/></p>';   
  147.         echo '<br/>';   
  148.     }   
  149.     //文本域   
  150.     function textarea($values){   
  151.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  152.            
  153.         echo '<p>'.$values['name'].'</p>';   
  154.         echo '<p><textarea class="kriesi_textarea" cols="60" rows="5" id="'.$values['id'].'" name="'.$values['id'].'">'.$values['std'].'</textarea>';   
  155.         echo $values['desc'].'<br/></p>';   
  156.         echo '<br/>';   
  157.     }   
  158.     //媒体上传   
  159.     function media($values){   
  160.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  161.            
  162.         //图片上传按钮   
  163.         global $post_ID, $temp_ID;   
  164.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);   
  165.         $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";   
  166.         $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&amp;type=image");   
  167.            
  168.         $button = '<a href="'.$image_upload_iframe_src.'&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true" id="'.$values['id'].'" class="k_hijack button thickbox" onclick="return false;" >上传</a>';   
  169.            
  170.         //判断图片格式,图片预览   
  171.         $image = '';   
  172.         if($values['std'] != '') {   
  173.             $fileextension = substr($values['std'], strrpos($values['std'], '.') + 1);   
  174.             $extensions = array('png','gif','jpeg','jpg','pdf','tif');   
  175.                
  176.             if(in_array($fileextension, $extensions))   
  177.             {   
  178.                 $image = '<img src="'.$values['std'].'" />';   
  179.             }   
  180.         }   
  181.            
  182.         echo '<div id="'.$values['id'].'_div" class="kriesi_preview_pic">'.$image .'</div>';   
  183.         echo '<p>'.$values['name'].'</p><p>';   
  184.         if($values['desc'] != "") echo '<p>'.$values['desc'].'<br/>';   
  185.         echo '<input class="kriesi_preview_pic_input" type="text" size="'.$values['size'].'" value="'.$values['std'].'" name="'.$values['id'].'"/>'.$button;   
  186.         echo '</p>';   
  187.         echo '<br/>';   
  188.     }   
  189.     //单选框   
  190.     function radio( $values ){   
  191.         if(isset($this->database_options[$values['id']]))   
  192.             $values['std'] = $this->database_options[$values['id']];   
  193.         echo '<p>'.$values['name'].'</p>';   
  194.         foreach( $values['buttons'] as $key=>$value ) {   
  195.             $checked ="";   
  196.             if($values['std'] == $key) {   
  197.                 $checked = 'checked = "checked"';   
  198.             }   
  199.             echo '<input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>'.$value;   
  200.         }   
  201.     }   
  202.     //复选框   
  203.     function checkbox($values){   
  204.         echo '<p>'.$values['name'].'</p>';   
  205.         foreach( $values['buttons'] as $key=>$value ) {   
  206.             $checked ="";   
  207.             if( is_array($values['std']) && in_array($key,$values['std'])) {   
  208.                 $checked = 'checked = "checked"';   
  209.             }   
  210.             echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;   
  211.         }   
  212.         echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/></p>';   
  213.     }   
  214.     //下拉框   
  215.     function dropdown($values){   
  216.         echo '<p>'.$values['name'].'</p>';   
  217.             //选择内容可以使页面、分类、菜单、侧边栏和自定义内容   
  218.             if($values['subtype'] == 'page'){   
  219.                 $select = 'Select page';   
  220.                 $entries = get_pages('title_li=&orderby=name');   
  221.             }else if($values['subtype'] == 'cat'){   
  222.                 $select = 'Select category';   
  223.                 $entries = get_categories('title_li=&orderby=name&hide_empty=0');   
  224.             }else if($values['subtype'] == 'menu'){   
  225.                 $select = 'Select Menu in page left';   
  226.                 $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) );   
  227.             }else if($values['subtype'] == 'sidebar'){   
  228.                 global $wp_registered_sidebars;   
  229.                 $select = 'Select a special sidebar';   
  230.                 $entries = $wp_registered_sidebars;   
  231.             }else{     
  232.                 $select = 'Select...';   
  233.                 $entries = $values['subtype'];   
  234.             }   
  235.            
  236.             echo '<p><select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';   
  237.             echo '<option value="">'.$select .'</option>  ';   
  238.                
  239.             foreach ($entries as $key => $entry){   
  240.                 if($values['subtype'] == 'page'){   
  241.                     $id = $entry->ID;   
  242.                     $title = $entry->post_title;   
  243.                 }else if($values['subtype'] == 'cat'){   
  244.                     $id = $entry->term_id;   
  245.                     $title = $entry->name;   
  246.                 }else if($values['subtype'] == 'menu'){   
  247.                     $id = $entry->term_id;   
  248.                     $title = $entry->name;   
  249.                 }else if($values['subtype'] == 'sidebar'){   
  250.                     $id = $entry['id'];   
  251.                     $title = $entry['name'];   
  252.                 }else{   
  253.                     $id = $entry;   
  254.                     $title = $key;                 
  255.                 }   
  256.   
  257.                 if ($values['std'] == $id ){   
  258.                     $selected = "selected='selected'";     
  259.                 }else{   
  260.                     $selected = "";        
  261.                 }   
  262.                    
  263.                 echo"<option $selected value='". $id."'>". $title."</option>";   
  264.             }   
  265.            
  266.         echo '</select>';   
  267.         echo $values['desc'].'<br/></p>';    
  268.         echo '<br/>';   
  269.     }   
  270.        
  271.     //编辑器   
  272.     function tinymce($values){   
  273.         if(isset($this->database_options[$values['id']]))   
  274.             $values['std'] = $this->database_options[$values['id']];   
  275.            
  276.         echo '<p>'.$values['name'].'</p>';   
  277.         wp_editor( $values['std'], $values['id'] );   
  278.         //wp_editor( $values['std'], 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) );   
  279.         //带配置参数   
  280.         /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式 
  281.         tinymce=>1,//可视化模式  
  282.         media_buttons=>0,//取消媒体上传  
  283.         textarea_rows=>5,//行数设为5  
  284.         editor_class=>"textareastyle") ); */  
  285.     }   
  286.   
  287. }   
  288. ?>  
  291. jQuery.noConflict();   
  292. jQuery(document).ready(function(){     
  293.     hijack_media_uploader();   
  294.     hijack_preview_pic();   
  295. });   
  296.   
  297. function hijack_preview_pic(){   
  298.     jQuery('.kriesi_preview_pic_input').each(function(){   
  299.         jQuery(this).bind('change focus blur ktrigger', function(){    
  300.             $select = '#' + jQuery(this).attr('name') + '_div';   
  301.             $value = jQuery(this).val();   
  302.             $image = '<img src ="'+$value+'" />';   
  303.             var $image = jQuery($select).html('').append($image).find('img');   
  304.             //set timeout because of safari   
  305.             window.setTimeout(function(){   
  306.                 if(parseInt($image.attr('width')) < 20){       
  307.                     jQuery($select).html('');   
  308.                 }   
  309.             },500);   
  310.         });   
  311.     });   
  312. }   
  313.   
  314. function hijack_media_uploader(){          
  315.         $buttons = jQuery('.k_hijack');   
  316.         $realmediabuttons = jQuery('.media-buttons a');   
  317.         window.custom_editor = false;   
  318.         $buttons.click(function(){     
  319.             window.custom_editor = jQuery(this).attr('id');            
  320.         });   
  321.         $realmediabuttons.click(function(){   
  322.             window.custom_editor = false;   
  323.         });   
  324.         window.original_send_to_editor = window.send_to_editor;   
  325.         window.send_to_editor = function(html){    
  326.             if (custom_editor) {       
  327.                 $img = jQuery(html).attr('src') || jQuery(html).find('img').attr('src') || jQuery(html).attr('href');   
  328.                    
  329.                 jQuery('input[name='+custom_editor+']').val($img).trigger('ktrigger');   
  330.                 custom_editor = false;   
  331.                 window.tb_remove();   
  332.             }else{   
  333.                 window.original_send_to_editor(html);   
  334.             }   
  335.         };   
  336. }   
  339. <?php      
  340. //自定义面板类的实例化      
  341. /**********title*************/     
  342. $options = array();      
  343. //page参数为在页面和文章中都添加面板 ，可以添加自定义文章类型   
  344. //context参数为面板在后台的位置，比如side则显示在侧栏      
  345. $boxinfo = array('title' => 'meta box', 'id'=>'ashubox', 'page'=>array('page','post'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');      
  346.      
  347. $options[] = array( "name" => "标题",      
  348.             "type" => "title");      
  349.                   
  350. $options[] = array(      
  351.             "name" => "文本框",      
  352.             "desc" => "",      
  353.             "id" => "ashu_text",      
  354.             "size"=>"40",      
  355.             "std" => "",      
  356.             "type" => "text"     
  357.             );      
  358.                   
  359. $options[] = array(      
  360.             "name" => "文本域",      
  361.             "desc" => "",      
  362.             "id" => "ashu_textarea",      
  363.             "std" => "",      
  364.             "type" => "textarea"     
  365.             );      
  366.                   
  367. $options[] = array(      
  368.             "name" => "图片上传",      
  369.             "desc" => "",      
  370.             "id" => "ashu_upimg",      
  371.             "std" => "",      
  372.             "button_label"=>'上传图片',      
  373.             "type" => "media"     
  374.             );      
  375.                   
  376. $options[] = array(      
  377.             "name" => "单选框",      
  378.             "desc" => "",      
  379.             "id" => "ashu_radio",      
  380.             "std" => 1,      
  381.             "buttons" => array('Yes','No'),   
  382.             "type" => "radio"     
  383.             );      
  384.                   
  385. $options[] = array(      
  386.             "name" => "复选框",      
  387.             "desc" => "喜欢吃啥？",      
  388.             "id" => "ashu_checkbox",      
  389.             "buttons" => array('苹果','香蕉','西瓜','芒果'),   
  390.             "type" => "checkbox"     
  391.             );      
  392.      
  393. $options[] = array(      
  394.             "name" => "下拉选择",      
  395.             "desc" => "",      
  396.             "id" => "ashu_dropdown",      
  397.             "subtype"=> array(      
  398.                 '1'=>'1',      
  399.                 '2'=>'2',      
  400.                 '3'=>'3'      
  401.             ),      
  402.             "type" => "dropdown"     
  403.             );      
  404.                   
  405. $options[] = array(      
  406.             "name" => "选择分类",      
  407.             "desc" => "",      
  408.             "id" => "ashu_cat",      
  409.             "subtype"=> "cat",      
  410.             "type" => "dropdown"     
  411.             );      
  412.                   
  413. $options[] = array(      
  414.             "name" => "选择页面",      
  415.             "desc" => "",      
  416.             "id" => "ashu_page",      
  417.             "subtype"=> "page",      
  418.             "type" => "dropdown"     
  419.             );      
  420.                   
  421. $options[] = array(      
  422.             "name" => "选择菜单",      
  423.             "desc" => "",      
  424.             "id" => "ashu_menu",      
  425.             "subtype"=> "menu",      
  426.             "type" => "dropdown"     
  427.             );      
  428.                   
  429. $options[] = array(      
  430.             "name" => "选择侧边栏",      
  431.             "desc" => "",      
  432.             "id" => "ashu_sidebar",      
  433.             "subtype"=> "sidebar",      
  434.             "type" => "dropdown"     
  435.             );   
  436.   
  437.                   
  438. $options[] = array(      
  439.             "name" => "编辑器",      
  440.             "desc" => "",      
  441.             "id" => "ashu_tinymce",      
  442.             "std" => "",   
  443.             "type" => "tinymce"     
  444.             );                 
  445.                   
  446. $new_box = new ashu_meta_box($options, $boxinfo);      
  447. ?>   
  450. include_once('metaboxclass.php');   
  451. include_once('metabox.php');  
  454. $ashu_eitor = get_post_meta($post->ID, "ashu_text", true); //ashu_text为配置文件中文本框的id  

则后台文章和页面的编辑页面都会出现配置的自定义面板。

 

字段调用，比如调用上面配置文件中的文本框字段：

  2. <?php   
  3. /* 
  4. wordpress文章自定义字段类文件  
  5. Version: 1.0  
  6. Author: 树是我的朋友  
  7. Author URI: http://www.shouce.ren  
  8. License: http://www.shouce.ren/courses/highgrade/298.html  
  9. */  
  10. class ashu_meta_box{   
  11.     var $options;   
  12.     var $boxinfo;   
  13.        
  14.     //构造函数   
  15.     function ashu_meta_box($options,$boxinfo){   
  16.         $this->options = $options;   
  17.         $this->boxinfo = $boxinfo;   
  18.            
  19.         add_action('admin_menu', array(&$this, 'init_boxes'));   
  20.         add_action('save_post', array(&$this, 'save_postdata'));   
  21.     }   
  22.        
  23.     //初始化   
  24.     function init_boxes(){   
  25.         $this->add_script_and_styles();   
  26.         $this->create_meta_box();   
  27.     }   
  28.        
  29.     //加载css和js脚本   
  30.     function add_script_and_styles(){   
  31.         if(basename( $_SERVER['PHP_SELF']) == "page.php"    
  32.         || basename( $_SERVER['PHP_SELF']) == "page-new.php"    
  33.         || basename( $_SERVER['PHP_SELF']) == "post-new.php"    
  34.         || basename( $_SERVER['PHP_SELF']) == "post.php"  
  35.         || basename( $_SERVER['PHP_SELF']) == "media-upload.php")   
  36.         {      
  37.             //注意加载的脚本的url   
  38.             wp_enqueue_style('metabox_fields_css', TEMJS_URI. 'metabox_fields.css');   
  39.             wp_enqueue_script('metabox_fields_js',TEMJS_URI. 'metabox_fields.js');   
  40.             wp_enqueue_style('thickbox');   
  41.             wp_enqueue_script('media-upload');   
  42.             wp_enqueue_script('thickbox');   
  43.                
  44.   
  45.             if(isset($_GET['hijack_target']))   
  46.             {      
  47.                 add_action('admin_head', array(&$this,'add_hijack_var'));   
  48.             }   
  49.         }   
  50.     }   
  51.        
  52.     /*************************/  
  53.     function add_hijack_var()   
  54.     {   
  55.         echo "<meta name='hijack_target' content='".$_GET['hijack_target']."' />\n";   
  56.     }   
  57.        
  58.     //创建自定义面板   
  59.     function create_meta_box(){   
  60.         if ( function_exists('add_meta_box') && is_array($this->boxinfo['page']) )    
  61.         {   
  62.             foreach ($this->boxinfo['page'] as $area)   
  63.             {      
  64.                 if ($this->boxinfo['callback'] == '') $this->boxinfo['callback'] = 'new_meta_boxes';   
  65.                    
  66.                 add_meta_box(      
  67.                     $this->boxinfo['id'],    
  68.                     $this->boxinfo['title'],   
  69.                     array(&$this, $this->boxinfo['callback']),   
  70.                     $area, $this->boxinfo['context'],    
  71.                     $this->boxinfo['priority']   
  72.                 );     
  73.             }   
  74.         }     
  75.     }   
  76.        
  77.     //创建自定义面板的显示函数   
  78.     function new_meta_boxes(){   
  79.         global $post;   
  80.         //根据类型调用显示函数   
  81.         foreach ($this->options as $option)   
  82.         {                  
  83.             if (method_exists($this, $option['type']))   
  84.             {   
  85.                 $meta_box_value = get_post_meta($post->ID, $option['id'], true);    
  86.                 if($meta_box_value != "") $option['std'] = $meta_box_value;     
  87.                    
  88.                 echo '<div class="alt kriesi_meta_box_alt meta_box_'.$option['type'].' meta_box_'.$this->boxinfo['context'].'">';   
  89.                 $this->$option['type']($option);   
  90.                 echo '</div>';   
  91.             }   
  92.         }   
  93.            
  94.         //隐藏域   
  95.         echo'<input type="hidden" name="'.$this->boxinfo['id'].'_noncename" id="'.$this->boxinfo['id'].'_noncename" value="'.wp_create_nonce( 'ashumetabox' ).'" />';     
  96.     }   
  97.        
  98.     //保存字段数据   
  99.     function save_postdata() {   
  100.         if( isset( $_POST['post_type'] ) && in_array($_POST['post_type'],$this->boxinfo['page'] ) && (isset($_POST['save']) || isset($_POST['publish']) ) ){   
  101.         $post_id = $_POST['post_ID'];   
  102.            
  103.         foreach ($this->options as $option) {   
  104.             if (!wp_verify_nonce($_POST[$this->boxinfo['id'].'_noncename'], 'ashumetabox')) {      
  105.                 return $post_id ;   
  106.             }   
  107.             //判断权限   
  108.             if ( 'page' == $_POST['post_type'] ) {   
  109.                 if ( !current_user_can( 'edit_page', $post_id  ))   
  110.                 return $post_id ;   
  111.             } else {   
  112.                 if ( !current_user_can( 'edit_post', $post_id  ))   
  113.                 return $post_id ;   
  114.             }   
  115.             //将预定义字符转换为html实体   
  116.             if( $option['type'] == 'tinymce' ){   
  117.                     $data =  stripslashes($_POST[$option['id']]);   
  118.             }elseif( $option['type'] == 'checkbox' ){   
  119.                     $data =  $_POST[$option['id']];   
  120.             }else{   
  121.                 $data = htmlspecialchars($_POST[$option['id']], ENT_QUOTES,"UTF-8");   
  122.             }   
  123.                
  124.             if(get_post_meta($post_id , $option['id']) == "")   
  125.             add_post_meta($post_id , $option['id'], $data, true);   
  126.                
  127.             elseif($data != get_post_meta($post_id , $option['id'], true))   
  128.             update_post_meta($post_id , $option['id'], $data);   
  129.                
  130.             elseif($data == "")   
  131.             delete_post_meta($post_id , $option['id'], get_post_meta($post_id , $option['id'], true));   
  132.                
  133.         }   
  134.         }   
  135.     }   
  136.     //显示标题   
  137.     function title($values){   
  138.         echo '<p>'.$values['name'].'</p>';   
  139.     }   
  140.     //文本框   
  141.     function text($values){    
  142.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  143.            
  144.         echo '<p>'.$values['name'].'</p>';   
  145.         echo '<p><input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';   
  146.         echo $values['desc'].'<br/></p>';   
  147.         echo '<br/>';   
  148.     }   
  149.     //文本域   
  150.     function textarea($values){   
  151.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  152.            
  153.         echo '<p>'.$values['name'].'</p>';   
  154.         echo '<p><textarea class="kriesi_textarea" cols="60" rows="5" id="'.$values['id'].'" name="'.$values['id'].'">'.$values['std'].'</textarea>';   
  155.         echo $values['desc'].'<br/></p>';   
  156.         echo '<br/>';   
  157.     }   
  158.     //媒体上传   
  159.     function media($values){   
  160.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];   
  161.            
  162.         //图片上传按钮   
  163.         global $post_ID, $temp_ID;   
  164.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);   
  165.         $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";   
  166.         $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&amp;type=image");   
  167.            
  168.         $button = '<a href="'.$image_upload_iframe_src.'&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true" id="'.$values['id'].'" class="k_hijack button thickbox" onclick="return false;" >上传</a>';   
  169.            
  170.         //判断图片格式,图片预览   
  171.         $image = '';   
  172.         if($values['std'] != '') {   
  173.             $fileextension = substr($values['std'], strrpos($values['std'], '.') + 1);   
  174.             $extensions = array('png','gif','jpeg','jpg','pdf','tif');   
  175.                
  176.             if(in_array($fileextension, $extensions))   
  177.             {   
  178.                 $image = '<img src="'.$values['std'].'" />';   
  179.             }   
  180.         }   
  181.            
  182.         echo '<div id="'.$values['id'].'_div" class="kriesi_preview_pic">'.$image .'</div>';   
  183.         echo '<p>'.$values['name'].'</p><p>';   
  184.         if($values['desc'] != "") echo '<p>'.$values['desc'].'<br/>';   
  185.         echo '<input class="kriesi_preview_pic_input" type="text" size="'.$values['size'].'" value="'.$values['std'].'" name="'.$values['id'].'"/>'.$button;   
  186.         echo '</p>';   
  187.         echo '<br/>';   
  188.     }   
  189.     //单选框   
  190.     function radio( $values ){   
  191.         if(isset($this->database_options[$values['id']]))   
  192.             $values['std'] = $this->database_options[$values['id']];   
  193.         echo '<p>'.$values['name'].'</p>';   
  194.         foreach( $values['buttons'] as $key=>$value ) {   
  195.             $checked ="";   
  196.             if($values['std'] == $key) {   
  197.                 $checked = 'checked = "checked"';   
  198.             }   
  199.             echo '<input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>'.$value;   
  200.         }   
  201.     }   
  202.     //复选框   
  203.     function checkbox($values){   
  204.         echo '<p>'.$values['name'].'</p>';   
  205.         foreach( $values['buttons'] as $key=>$value ) {   
  206.             $checked ="";   
  207.             if( is_array($values['std']) && in_array($key,$values['std'])) {   
  208.                 $checked = 'checked = "checked"';   
  209.             }   
  210.             echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;   
  211.         }   
  212.         echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/></p>';   
  213.     }   
  214.     //下拉框   
  215.     function dropdown($values){   
  216.         echo '<p>'.$values['name'].'</p>';   
  217.             //选择内容可以使页面、分类、菜单、侧边栏和自定义内容   
  218.             if($values['subtype'] == 'page'){   
  219.                 $select = 'Select page';   
  220.                 $entries = get_pages('title_li=&orderby=name');   
  221.             }else if($values['subtype'] == 'cat'){   
  222.                 $select = 'Select category';   
  223.                 $entries = get_categories('title_li=&orderby=name&hide_empty=0');   
  224.             }else if($values['subtype'] == 'menu'){   
  225.                 $select = 'Select Menu in page left';   
  226.                 $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) );   
  227.             }else if($values['subtype'] == 'sidebar'){   
  228.                 global $wp_registered_sidebars;   
  229.                 $select = 'Select a special sidebar';   
  230.                 $entries = $wp_registered_sidebars;   
  231.             }else{     
  232.                 $select = 'Select...';   
  233.                 $entries = $values['subtype'];   
  234.             }   
  235.            
  236.             echo '<p><select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';   
  237.             echo '<option value="">'.$select .'</option>  ';   
  238.                
  239.             foreach ($entries as $key => $entry){   
  240.                 if($values['subtype'] == 'page'){   
  241.                     $id = $entry->ID;   
  242.                     $title = $entry->post_title;   
  243.                 }else if($values['subtype'] == 'cat'){   
  244.                     $id = $entry->term_id;   
  245.                     $title = $entry->name;   
  246.                 }else if($values['subtype'] == 'menu'){   
  247.                     $id = $entry->term_id;   
  248.                     $title = $entry->name;   
  249.                 }else if($values['subtype'] == 'sidebar'){   
  250.                     $id = $entry['id'];   
  251.                     $title = $entry['name'];   
  252.                 }else{   
  253.                     $id = $entry;   
  254.                     $title = $key;                 
  255.                 }   
  256.   
  257.                 if ($values['std'] == $id ){   
  258.                     $selected = "selected='selected'";     
  259.                 }else{   
  260.                     $selected = "";        
  261.                 }   
  262.                    
  263.                 echo"<option $selected value='". $id."'>". $title."</option>";   
  264.             }   
  265.            
  266.         echo '</select>';   
  267.         echo $values['desc'].'<br/></p>';    
  268.         echo '<br/>';   
  269.     }   
  270.        
  271.     //编辑器   
  272.     function tinymce($values){   
  273.         if(isset($this->database_options[$values['id']]))   
  274.             $values['std'] = $this->database_options[$values['id']];   
  275.            
  276.         echo '<p>'.$values['name'].'</p>';   
  277.         wp_editor( $values['std'], $values['id'] );   
  278.         //wp_editor( $values['std'], 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) );   
  279.         //带配置参数   
  280.         /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式 
  281.         tinymce=>1,//可视化模式  
  282.         media_buttons=>0,//取消媒体上传  
  283.         textarea_rows=>5,//行数设为5  
  284.         editor_class=>"textareastyle") ); */  
  285.     }   
  286.   
  287. }   
  288. ?>  
  291. jQuery.noConflict();   
  292. jQuery(document).ready(function(){     
  293.     hijack_media_uploader();   
  294.     hijack_preview_pic();   
  295. });   
  296.   
  297. function hijack_preview_pic(){   
  298.     jQuery('.kriesi_preview_pic_input').each(function(){   
  299.         jQuery(this).bind('change focus blur ktrigger', function(){    
  300.             $select = '#' + jQuery(this).attr('name') + '_div';   
  301.             $value = jQuery(this).val();   
  302.             $image = '<img src ="'+$value+'" />';   
  303.             var $image = jQuery($select).html('').append($image).find('img');   
  304.             //set timeout because of safari   
  305.             window.setTimeout(function(){   
  306.                 if(parseInt($image.attr('width')) < 20){       
  307.                     jQuery($select).html('');   
  308.                 }   
  309.             },500);   
  310.         });   
  311.     });   
  312. }   
  313.   
  314. function hijack_media_uploader(){          
  315.         $buttons = jQuery('.k_hijack');   
  316.         $realmediabuttons = jQuery('.media-buttons a');   
  317.         window.custom_editor = false;   
  318.         $buttons.click(function(){     
  319.             window.custom_editor = jQuery(this).attr('id');            
  320.         });   
  321.         $realmediabuttons.click(function(){   
  322.             window.custom_editor = false;   
  323.         });   
  324.         window.original_send_to_editor = window.send_to_editor;   
  325.         window.send_to_editor = function(html){    
  326.             if (custom_editor) {       
  327.                 $img = jQuery(html).attr('src') || jQuery(html).find('img').attr('src') || jQuery(html).attr('href');   
  328.                    
  329.                 jQuery('input[name='+custom_editor+']').val($img).trigger('ktrigger');   
  330.                 custom_editor = false;   
  331.                 window.tb_remove();   
  332.             }else{   
  333.                 window.original_send_to_editor(html);   
  334.             }   
  335.         };   
  336. }   
  339. <?php      
  340. //自定义面板类的实例化      
  341. /**********title*************/     
  342. $options = array();      
  343. //page参数为在页面和文章中都添加面板 ，可以添加自定义文章类型   
  344. //context参数为面板在后台的位置，比如side则显示在侧栏      
  345. $boxinfo = array('title' => 'meta box', 'id'=>'ashubox', 'page'=>array('page','post'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');      
  346.      
  347. $options[] = array( "name" => "标题",      
  348.             "type" => "title");      
  349.                   
  350. $options[] = array(      
  351.             "name" => "文本框",      
  352.             "desc" => "",      
  353.             "id" => "ashu_text",      
  354.             "size"=>"40",      
  355.             "std" => "",      
  356.             "type" => "text"     
  357.             );      
  358.                   
  359. $options[] = array(      
  360.             "name" => "文本域",      
  361.             "desc" => "",      
  362.             "id" => "ashu_textarea",      
  363.             "std" => "",      
  364.             "type" => "textarea"     
  365.             );      
  366.                   
  367. $options[] = array(      
  368.             "name" => "图片上传",      
  369.             "desc" => "",      
  370.             "id" => "ashu_upimg",      
  371.             "std" => "",      
  372.             "button_label"=>'上传图片',      
  373.             "type" => "media"     
  374.             );      
  375.                   
  376. $options[] = array(      
  377.             "name" => "单选框",      
  378.             "desc" => "",      
  379.             "id" => "ashu_radio",      
  380.             "std" => 1,      
  381.             "buttons" => array('Yes','No'),   
  382.             "type" => "radio"     
  383.             );      
  384.                   
  385. $options[] = array(      
  386.             "name" => "复选框",      
  387.             "desc" => "喜欢吃啥？",      
  388.             "id" => "ashu_checkbox",      
  389.             "buttons" => array('苹果','香蕉','西瓜','芒果'),   
  390.             "type" => "checkbox"     
  391.             );      
  392.      
  393. $options[] = array(      
  394.             "name" => "下拉选择",      
  395.             "desc" => "",      
  396.             "id" => "ashu_dropdown",      
  397.             "subtype"=> array(      
  398.                 '1'=>'1',      
  399.                 '2'=>'2',      
  400.                 '3'=>'3'      
  401.             ),      
  402.             "type" => "dropdown"     
  403.             );      
  404.                   
  405. $options[] = array(      
  406.             "name" => "选择分类",      
  407.             "desc" => "",      
  408.             "id" => "ashu_cat",      
  409.             "subtype"=> "cat",      
  410.             "type" => "dropdown"     
  411.             );      
  412.                   
  413. $options[] = array(      
  414.             "name" => "选择页面",      
  415.             "desc" => "",      
  416.             "id" => "ashu_page",      
  417.             "subtype"=> "page",      
  418.             "type" => "dropdown"     
  419.             );      
  420.                   
  421. $options[] = array(      
  422.             "name" => "选择菜单",      
  423.             "desc" => "",      
  424.             "id" => "ashu_menu",      
  425.             "subtype"=> "menu",      
  426.             "type" => "dropdown"     
  427.             );      
  428.                   
  429. $options[] = array(      
  430.             "name" => "选择侧边栏",      
  431.             "desc" => "",      
  432.             "id" => "ashu_sidebar",      
  433.             "subtype"=> "sidebar",      
  434.             "type" => "dropdown"     
  435.             );   
  436.   
  437.                   
  438. $options[] = array(      
  439.             "name" => "编辑器",      
  440.             "desc" => "",      
  441.             "id" => "ashu_tinymce",      
  442.             "std" => "",   
  443.             "type" => "tinymce"     
  444.             );                 
  445.                   
  446. $new_box = new ashu_meta_box($options, $boxinfo);      
  447. ?>   
  450. include_once('metaboxclass.php');   
  451. include_once('metabox.php');  
  454. $ashu_eitor = get_post_meta($post->ID, "ashu_text", true); //ashu_text为配置文件中文本框的id  

有图有真相，李菊福：

wordpress文章编辑页面添加自定义面板