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

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

    • 珂李斯

    发布于

    by

    我从来没见过在自定义面板添加编辑器的应用，直到昨天一个网友说有这个需求，但是我昨天尝试了一下没成功，原因是太晚…

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

    好了废话不多说，怎样在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函数即可。

    效果图：

    至此，为了方便很多不愿意折腾的访客，我们直接贴出到现在为止的整个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;  
    类别：WordPress 进阶教程、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT


  • 评论功能已经关闭!