WordPress为文章编辑界面添加一个编辑器输入框

创客云

最近在网站开发中,客户要求在文章中添加一个字段,用于在文章页面的某个位置显示这个字段的内容,所以需要在文章的编辑界面添加一个带编辑器的输入框,效果如下图所示:

在这里我们主要使用 add_meta_box() 和 wp_editor() 两个函数,add_meta_box() 用于添加元字段框,wp_editor() 用于添加编辑器。

为了让大家理解功能的实现方式,我们做分部讲解。基本上,我们要做的是-初始化元字段框,在我们的文章编辑器中显示它,最后将该元框的数据存储在数据库中。让我们看看如何使用此简单功能将WYSIWYG编辑器添加到自定义元字段框。

初始化元字段框

  1. //初始化元字段框
  2. function wpkj_post_editor_meta_box() {    
  3.    add_meta_box ( 
  4.       'wpkj-post-editor', 
  5.       __('文章顶部内容', 'textdomain') , 
  6.       'wpkj_post_editor', 
  7.       'post' // 需要显示编辑框的文章类型,与下文的两处 $_POST['post'] 对应
  8.    );
  9.  
  10. }
  11. add_action('admin_init', 'wpkj_post_editor_meta_box');

首先,我们使用add_meta_box()函数初始化元框。此功能需要几个参数。您可以从Codex检查它们。在这里,我们使用了四个参数。

  1. 第一个是meta框的ID。在meta框的'id'属性中使用此属性。
  2. 第二个是meta框的标题。在这里,我使用“文章顶部内容”作为标题。双下划线用于翻译问题。
  3. 然后,回调函数将所需的内容填充到meta框中。您可以在下一节中找到此函数。
  4. 最后,我们要在其中添加元框的文章类型。在这里我们设置为文章 post

然后,我们将wpkj_editor_meta_box() 函数挂载到 admin_init 挂钩,以初始​​化该元字段框。

显示元字段框

  1. //显示元字段框
  2. function wpkj_post_editor($post) {          
  3.     $content = get_post_meta($post->ID, 'wpkj_post_editor', true);
  4.  
  5.     //添加 WYSIWYG 编辑器 
  6.     wp_editor ( 
  7.         $content , 
  8.         'wpkj_post_editor', 
  9.         array ( "media_buttons" => true ) 
  10.     );
  11.  
  12. }

此函数在文章编辑屏幕中显示元字段框。

这是初始化元字段框框时使用的回调函数。在这里,您可以看到我们使用了wp_editor() 函数来呈现WYSIWYG编辑器。该函数采用三个参数。

  1. 第一个是编辑器的初始内容。默认值为none
  2. 第二个是编辑器的HTML id属性值。不要使用连字符,编辑器可能无法正确显示。
  3. 第三个是用于自定义编辑器的参数数组。在这里,我仅使用一个参数在编辑器中显示“添加媒体”按钮。您可以使用多个参数来控制编辑器的工作方式,请在此处查看可用参数 。

保存元字段框数据

  1. //保存元字段框数据
  2. function wpkj_post_editor_save_postdata($post_id) {
  3.  
  4.     if( isset( $_POST['wpkj_post_editor_nonce'] ) && isset( $_POST['post'] ) ) {
  5.  
  6.         //Not save if the user hasn't submitted changes
  7.         if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
  8.             return;
  9.         } 
  10.  
  11.         // Verifying whether input is coming from the proper form
  12.         if ( ! wp_verify_nonce ( $_POST['wpkj_post_editor_nonce'] ) ) {
  13.             return;
  14.         } 
  15.  
  16.         // Making sure the user has permission
  17.         if( 'post' == $_POST['post'] ) {
  18.             if( ! current_user_can( 'edit_post', $post_id ) ) {
  19.                 return;
  20.             }
  21.         } 
  22.     }
  23.  
  24.     $content = get_post_meta($post_id, 'wpkj_post_editor', true);
  25.     // 如果编辑器中有内容或者之前有数据才保存
  26.     if( $content || !empty( $_POST['wpkj_post_editor'] ) ) {
  27.  
  28.         $data = $_POST['wpkj_post_editor'];
  29.         update_post_meta($post_id, 'wpkj_post_editor', $data);
  30.  
  31.     }
  32. }
  33. add_action('save_post', 'wpkj_post_editor_save_postdata');

然后,我们创建一个函数来进行一些安全检查并保存来自元字段框的数据。

  1. 首先,我们检查用户是否提交了任何更改,否则将不保存任何内容。
  2. 然后,检查输入是否来自正确的表单。
  3. 最后确保用户是否有权编辑该文章。如果一切正常,将保存数据。

函数update_post_meta()用于更新元字段框的任何现有值。编辑文章时,这就是更新数据的方式。

最后,我们使用'save_post'挂钩来挂载我们的保存数据功能。

所有功能代码

  1. /**
  2.  * 添加一个编辑器字段到文章编辑界面
  3.  * https://imtiazrayhan.com/add-wysiwyg-editor-custom-meta-boxes/
  4.  */
  5. //This function initializes the meta box.
  6. function wpkj_post_editor_meta_box() {    
  7.    add_meta_box ( 
  8.       'wpkj-post-editor', 
  9.       __('文章顶部内容', 'textdomain') , 
  10.       'wpkj_post_editor', 
  11.       'post' // 需要显示编辑框的文章类型,与下文的两处 $_POST['post'] 对应
  12.    );
  13.  
  14. }
  15. add_action('admin_init', 'wpkj_post_editor_meta_box');
  16.  
  17. //Displaying the meta box
  18. function wpkj_post_editor($post) {          
  19.     $content = get_post_meta($post->ID, 'wpkj_post_editor', true);
  20.  
  21.     //This function adds the WYSIWYG Editor 
  22.     wp_editor ( 
  23.         $content , 
  24.         'wpkj_post_editor', 
  25.         array ( "media_buttons" => true ) 
  26.     );
  27.  
  28. }
  29.  
  30. //This function saves the data you put in the meta box
  31. function wpkj_post_editor_save_postdata($post_id) {
  32.  
  33.     if( isset( $_POST['wpkj_post_editor_nonce'] ) && isset( $_POST['post'] ) ) {
  34.  
  35.         //Not save if the user hasn't submitted changes
  36.         if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
  37.             return;
  38.         } 
  39.  
  40.         // Verifying whether input is coming from the proper form
  41.         if ( ! wp_verify_nonce ( $_POST['wpkj_post_editor_nonce'] ) ) {
  42.             return;
  43.         } 
  44.  
  45.         // Making sure the user has permission
  46.         if( 'post' == $_POST['post'] ) {
  47.             if( ! current_user_can( 'edit_post', $post_id ) ) {
  48.                 return;
  49.             }
  50.         } 
  51.     }
  52.  
  53.     $content = get_post_meta($post_id, 'wpkj_post_editor', true);
  54.     // 如果编辑器中有内容或者之前有数据才保存
  55.     if( $content || !empty( $_POST['wpkj_post_editor'] ) ) {
  56.  
  57.         $data = $_POST['wpkj_post_editor'];
  58.         update_post_meta($post_id, 'wpkj_post_editor', $data);
  59.  
  60.     }
  61. }
  62. add_action('save_post', 'wpkj_post_editor_save_postdata');

以上就是我们最终的代码。最终的输出效果如文章开头的图片所示。如果要调用这个字段的内容,可以参考下面的代码示例:

  1. <?php
  2. global $post;
  3. $content = get_post_meta( $post->ID, 'wpkj_post_editor', true ); // 获取字段内容
  4.  
  5. if( $content ) { // 如果有内容
  6.     echo $content;  // 输出内容
  7. }
  8. ?>
本文来源WordPress大学,经授权后由CityMall发布,观点不代表创客云的立场,转载请联系原作者。
云模板

发表评论

热销模板

高端信息技术产品展示DedeCMS织梦中英文模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!