wordpress进阶教程(八):在自定义面板中添加tinymce编辑器

我从来没见过在自定义面板添加编辑器的应用,直到昨天一个网友说有这个需求,但是我昨天尝试了一下没成功,原因是太晚了,脑袋不清醒,函数都没写完整。

好了废话不多说,怎样在wordpress的自定义面板中添加一个可视化的编辑器呢?我们还是沿用上一篇教程中的测试文件,直接在该文件中添加一项。

首先打开我们的metabox.php文件,在配置数组中添加一项:

  1. "checkbox" => array(   
  2.         "name" => "_meta_eidtor",   
  3.         "std" => '',      
  4.         "title" => "编辑器",   
  5.         "type"=>"editor"),  

接下来我们只需要改动显示的函数new_meta_boxes,在它的switch语句中添加一项即可:

  1. case 'editor':   
  2.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  3.                 wp_editor( $meta_box['std'], $meta_box['name'].'_value' );   
  4.                 //带配置参数   
  5.                 /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式
  6.                     tinymce=>1,//可视化模式  
  7.                     media_buttons=>0,//取消媒体上传  
  8.                     textarea_rows=>5,//行数设为5  
  9.                     editor_class=>"textareastyle") ); */  
  10.             break;  

其实调用编辑器很简单,只需要使用wp_editor函数即可。

效果图:

wordrpess自定义面板调用编辑器

至此,为了方便很多不愿意折腾的访客,我们直接贴出到现在为止的整个metabox.php文件的代码,你只需要在主题中加载这个文件即可,至于怎么配置,我想无需多说。

  1. <?php   
  2. $new_meta_boxes =    
  3. array(   
  4.     "title" => array(   
  5.         "name" => "_meta_title",   
  6.         "std" => "",   
  7.         "title" => "标题",   
  8.         "type"=>"title"),      
  9.      
  10.     "keywords" => array(   
  11.         "name" => "_meta_keywords",   
  12.         "std" => "",      
  13.         "title" => "关键字",   
  14.         "type"=>"text"),   
  15.            
  16.     "description" => array(   
  17.         "name" => "_meta_description",   
  18.         "std" => "",      
  19.         "title" => "描述",   
  20.         "type"=>"textarea"),   
  21.            
  22.     "category" => array(   
  23.         "name" => "_meta_cate",   
  24.         "std" => "",      
  25.         "title" => "选择分类",   
  26.         "subtype"=> "cat",   
  27.         "type"=>"dropdown"),   
  28.            
  29.     "radio" => array(   
  30.         "name" => "_meta_radio",   
  31.         "std" => 1,      
  32.         "title" => "单选框",   
  33.         "buttons" => array('Yes','No'),   
  34.         "type"=>"radio"),   
  35.            
  36.     "checkbox" => array(   
  37.         "name" => "_meta_checkbox",   
  38.         "std" => 1,      
  39.         "title" => "复选框",   
  40.         "type"=>"checkbox"),   
  41.            
  42.     "checkbox" => array(   
  43.         "name" => "_meta_eidtor",   
  44.         "std" => '',      
  45.         "title" => "编辑器",   
  46.         "type"=>"editor"),   
  47.            
  48. );   
  49.   
  50.   
  51. function new_meta_boxes() {   
  52.     global $post$new_meta_boxes;   
  53.     foreach($new_meta_boxes as $meta_box) {   
  54.         //获取保存的是   
  55.         $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);   
  56.         if($meta_box_value != "")      
  57.             $meta_box['std'] = $meta_box_value;//将默认值替换为以保存的值   
  58.            
  59.         echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';   
  60.         //通过选择类型输出不同的html代码   
  61.         switch ( $meta_box['type'] ){   
  62.             case 'title':   
  63.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  64.                 break;   
  65.             case 'text':   
  66.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  67.                 echo '<input type="text" size="40" name="'.$meta_box['name'].'_value" value="'.$meta_box['std'].'" /><br />';   
  68.                 break;   
  69.             case 'textarea':   
  70.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  71.                 echo '<textarea cols="60" rows="3" name="'.$meta_box['name'].'_value">'.$meta_box['std'].'</textarea><br />';   
  72.                 break;   
  73.             case 'dropdown':   
  74.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  75.                 if($meta_box['subtype'] == 'cat'){   
  76.                     $select = 'Select category';   
  77.                     $entries = get_categories('title_li=&orderby=name&hide_empty=0');//获取分类   
  78.                 }   
  79.                 echo '<p><select name="'.$meta_box['name'].'_value"> ';   
  80.                 echo '<option value="">'.$select .'</option>  ';   
  81.                 foreach ($entries as $key => $entry){   
  82.                     $id = $entry->term_id;   
  83.                     $title = $entry->name;   
  84.                     if ( $meta_box['std'] == $id ){   
  85.                         $selected = "selected='selected'";   
  86.                     }else{   
  87.                         $selected = "";   
  88.                     }   
  89.                     echo "<option $selected value='"$id."'>"$title."</option>";   
  90.                 }   
  91.                 echo '</select><br />';   
  92.                 break;   
  93.             case 'radio':   
  94.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  95.                 $counter = 1;   
  96.                 foreach$meta_box['buttons'] as $radiobutton ) {   
  97.                     $checked ="";   
  98.                     if(isset($meta_box['std']) && $meta_box['std'] == $counter) {   
  99.                         $checked = 'checked = "checked"';   
  100.                     }   
  101.                     echo '<input '.$checked.' type="radio" class="kcheck" value="'.$counter.'" name="'.$meta_box['name'].'_value"/>'.$radiobutton;   
  102.                     $counter++;   
  103.                 }   
  104.                 break;   
  105.             case 'checkbox':   
  106.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  107.                 if( isset($meta_box['std']) && $meta_box['std'] == 'true' )   
  108.                     $checked = 'checked = "checked"';   
  109.                 else  
  110.                     $checked  = '';    
  111.                 echo '<input type="checkbox" name="'.$meta_box['name'].'_value" value="true"  '.$checked.' />';   
  112.                 break;   
  113.             //编辑器   
  114.             case 'editor':   
  115.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  116.                 wp_editor( $meta_box['std'], $meta_box['name'].'_value' );   
  117.                 //带配置参数   
  118.                 /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式
  119.                     tinymce=>1,//可视化模式  
  120.                     media_buttons=>0,//取消媒体上传  
  121.                     textarea_rows=>5,//行数设为5  
  122.                     editor_class=>"textareastyle") ); */  
  123.             break;   
  124.                
  125.         }             
  126.     }      
  127. }   
  128.   
  129. function create_meta_box() {      
  130.     global $theme_name;      
  131.      
  132.     if ( function_exists('add_meta_box') ) {      
  133.         add_meta_box( 'new-meta-boxes', '自定义模块', 'new_meta_boxes', 'post', 'normal', 'high' );      
  134.     }      
  135. }   
  136. function save_postdata( $post_id ) {      
  137.     global $post$new_meta_boxes;      
  138.      
  139.     foreach($new_meta_boxes as $meta_box) {      
  140.         if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) ))  {      
  141.             return $post_id;      
  142.         }      
  143.      
  144.         if ( 'page' == $_POST['post_type'] ) {      
  145.             if ( !current_user_can( 'edit_page', $post_id ))      
  146.                 return $post_id;      
  147.         }       
  148.         else {      
  149.             if ( !current_user_can( 'edit_post', $post_id ))      
  150.                 return $post_id;      
  151.         }      
  152.      
  153.         $data = $_POST[$meta_box['name'].'_value'];      
  154.      
  155.         if(get_post_meta($post_id$meta_box['name'].'_value') == "")      
  156.             add_post_meta($post_id$meta_box['name'].'_value', $data, true);      
  157.         elseif($data != get_post_meta($post_id$meta_box['name'].'_value', true))      
  158.             update_post_meta($post_id$meta_box['name'].'_value', $data);      
  159.         elseif($data == "")      
  160.             delete_post_meta($post_id$meta_box['name'].'_value', get_post_meta($post_id$meta_box['name'].'_value', true));      
  161.     }      
  162. }   
  163.   
  164. add_action('admin_menu', 'create_meta_box');      
  165. add_action('save_post', 'save_postdata');   
  166. ?>  

 

调用,使用get_post_meta函数获取即可,不过主要我们保存的字段名称,虽然我们的配置数组中配置了name,但是保存自定义字段的时候我们在字段名称后面加了_value,以我们今天新增的_meta_eidtor为例,获取应该是:

  1. $ashu_eidtor = get_post_meta($post->ID, "_meta_eidtor_value", true);  

 

如何像普通文章一样输出?也就是自动加<p>标签和换行?如下:

  1. $ashu_editor = get_post_meta($post->ID, "_meta_eidtor_value", true);   
  2. $ashu_editor = apply_filters('the_content', $ashu_editor);   
  3. $ashu_editor = str_replace(']]>', ']]&gt;', $ashu_editor);   
  4. echo $ashu_editor;  

已有17条评论

  1. 人称丶小斌哥
    人称丶小斌哥 : 回复

    现在添加的文本编辑器,如果安装了编辑器插件,它就显示不出来那些编辑按钮。要如何调用出来呢。

  2. 一汪清水
    一汪清水 : 回复

    我最近在学习制作插件,设置选项中调用textarea或者wp_editor,需要输入的内容支持html和js,不知道如何实现

  3. 觅珍网
    觅珍网 : 回复

    树哥,我按照您这个方法添加了自定义面板,但是好像只能在post和page下才有哦,请问一下:

    如果我新建了自定义post类型banner,然后想在banner下新建文章的时候本篇教程的方法,怎么实现呢?继续树哥回答,非常感谢您,我折腾了好几天了都…

    • 阿树工作室
      阿树工作室 回复觅珍网: 回复

      请研究 add_meta_box 函数

  4. JIMMY
    JIMMY : 回复

    如何使发布的文章归类于自定义面板的下拉框分类目录中?THX?

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

      额。。这是多此一举嘛。。分类本来就可以在右边选择,何须再弄个下拉框来选择归属

  5. 陈生
    陈生 : 回复

    我在你最后面的基础上修改了一下,要不然如果是cms主题,加的字段太多了,每次都会新建N多字段,然后又删除,造成表的id大量空白,另外如果一篇文章编辑的次数多了,这个数据表就太恐怖了

            if(get_post_meta($post_id, $meta_box[‘name’].’_value’) == “”){
    if ($data != “”) {
    add_post_meta($post_id, $meta_box[‘name’].’_value’, $data, true);
    update_post_meta($post_id, $meta_box[‘name’].’_value’, $data);
    } continue;
    }
    if ($data == “”) {
    delete_post_meta($post_id, $meta_box[‘name’].’_value’, get_post_meta($post_id, $meta_box[‘name’].’_value’, true));
    continue;

    if($data != get_post_meta($post_id, $meta_box[‘name’].’_value’, true)) {      
    update_post_meta($post_id, $meta_box[‘name’].’_value’, $data);
    }
    continue;

    • 阿树工作室
      阿树工作室 回复陈生: 回复

      continue这样用??

      • 陈生
        陈生 回复阿树工作室: 回复

        哎,我不知道其它好的办法了,只能想到在面板里面如果某项值没填,默认也为空,就直接continue跳过本次循环,不采取任何动作,这样尽量减少post-meta表的id数,不创建了空数据又删除空数据,

        • 阿树工作室
          阿树工作室 回复陈生: 回复

          你的代码貌似逻辑上可行,但是同时使用add_post_meta和update_post_meta是啥作用?

          而且我在本站测试了一下,空值的字段没有被写入数据库啊

  6. 陈生
    陈生 : 回复

    怎么解决前台调用的模式问题呢,echo  get_post_meta($post->ID,”_meta_features_value”,true); 在前台显示成纯文本了,怎么达到the_content()的那种效果呢,自动加p和换行。谢谢

    • 阿树工作室
      阿树工作室 回复陈生: 回复
      $ashu_editor = get_post_meta($post->ID, "_meta_eidtor_value", true);
      $ashu_editor = apply_filters('the_content', $ashu_editor);
      $ashu_editor = str_replace(']]>', ']]&gt;', $ashu_editor);
      echo $ashu_editor;
      • 陈生
        陈生 回复阿树工作室: 回复

        哈哈,谢谢啦,后来突然想到了解决办法,使用wordpress的原生函数 wpautop() 就可以解决了,

        • 阿树工作室
          阿树工作室 回复陈生: 回复

          受教了。。不知道还有这个函数…

  7. 无尘
    无尘 : 回复

    博主的这个进阶教程写的太好了,以前学wordpress主题教程的时候参考的还是露兜博客。

  8. 天边
    天边 : 回复

    非插件实现自定义模块功能太好太强大了,感谢博主。希望改进版本在下拉选分类时能区分第2、3级分类。

    • 阿树工作室
      阿树工作室 回复天边: 回复

      嘿嘿。。这个代码不是最好的。。。接下来的教程会放类文件。。那才是最方便最好用的。。

发表评论