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

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

在这里我们r Z u = A )主要使用 add_meta_box() 和 wp_editor() 两个函数，add_m0 u p neta_box() 用于添加元字{ X q % } T 6 O p段框，wp_editor() 用于添加编辑器。

为了让大家理解功能的实f H v 4现方式，我们W I N + }做分部讲解。基本上，我们要做的是-初始化元字段框，在我们的文章编辑器中显示它，最后K 7 @ m e p将该元框的数据存储在数据库中。让我们看看如何使用此简单功能将 WYSI. A u k F 9 jWYG 编辑器添加到自定义元字段框。

初始化元字段框

//初始化元字段框
function wpkj_post_editor_mem u Z E w 3 Sta_box() {
add_meta_box (
'wpkj-post-editor',
__A R Q l P d p S t0;'文章顶部内容', 'textdomain') ,
'wpkj_post_editor',
'post' // 需要显示编辑框的文章类型，与下文的两处 $_POST['post'] 对应
);
}
add_action('admin_init', 'wpkj_post_editor_meta_b^ # c d _ i yox');

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

第一个是 meta 框的 ID。在 meta 框的'id'属性~ j : K a J . Q =中使用此属性。
第二个是 meta 框m A d V 6 0 f t d的标题。在这里，Y ] C B W ~我使用“文章顶部内容”作为标题。双下划线用于翻译问题。
然后，回调函数将所需的内容填充到 meta 框中。您可以在下一节中找到此函数。
最后，我们要在其中添加元框的文章类型。在这里我们设置为文章 post。

然后，我们将 wpkj_ex 5 ] E xditor_meta_box() 函数挂载到 admin_init 挂钩，以初始化该元字段框。

显示元字段框

//显示元字段框
function we C C T 3 c ^ 7 qpkj_post_editor($post) {
$content = get_post_meta($post->ID, 'wpkj_post_editor', true);
//添加 WYSIWYG 编辑器
wp_editor (
$content ,
'wpkj_poF Z [ k t | 3st_editor',
array ( "media_buttons"E ` E => true )
);
j E G |25;

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

这是初始化元字段框框时使用的回调函数。在这里，您可以看到我们使用了 wp_ede H r Y 0 A f R 6itor() 函数来呈现 WYSIWYG 编辑器。该函数采用三个参数。

第一个是编辑器的初始内容。默认值为none。
第二个是编辑器的H s v J ] Z N t g HTML id 属性值。不要使用连字符，编辑器可能无法正确显示。
第三个是用于自定义编辑器的参\ f L . @ m r 2 K数数组。在这里，我仅使用一个参数在编辑器中显示“添加媒体”按钮。您可以使用多个参数来控制编辑器的工作方式，请在此处T u i X )查看可用参数。

保存元字段框数据

//保存元字段框数据
function wpkj_post_editA x f L N C Eor_save_postdata($post_id) {
if( isset( $_POST['wpkj_post_editor_nonce'] ) && isset( $_POST['post'] ) ) p T I n O23;
//Not save if the user hasn't submitteL q [d changes
if( defined( 'DOIN! f 3 k vG_AUTOSAVE' ) && DOING_AUTa ! .OSAVE ) {
return;
}
// Verifying whether input is coming from the proper form
if ( ! wp_verify_nonce ( $_POST['wpkj_post_& [ = t E P g veditor_nonce'c k y 8 H ~93; ) ) {
return;
}
// Making sure the user has permission
if&? m 9 = [ b U#40; 'post' == $_POM R [ P k \ST['W J 8 9 F d !post'] ) , \ m3;
if( ! current_useV D (r_can( 'edit_post', $post_id ) ) {
return;
}
}4 ^ i 5 R k ; 6 R;
}
$content = get_post% v l z I 0_meta($post_id, 'wpkj_post_editor', true)[ J } x b { O;;
// 如果编辑器中有内容或者之前有数@ C ^ v W 9 ? (据才保存
if&r I Y 6 w 0#40; $content || !emB e * k bpty( $Q E 7 O n ,_POST['wpkj_post_} 0 l Neditor'] &\ e | - $#41; ) \ | 7 1 \ \ 823;
$data = $_POST['wpkj_post_- L D ~ ; ) S Geditor8 Y ( O g']\ 4 F } 6 G 1 V ?;;
upd# M p jate_p9 t 9 8 U - 5 3 most_meta(K , / y )$post_id, 'wpkj_& ] ) npost_edito, H e G qr', $dan 5 4 U b 9 5ta);
5 D H ^ N5;
}
add_actio/ j A j 8 wn('save_post',2 8 Z p : [ W 'wpkj_post_editor_save_postdata');

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

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

函数 update_post_meta()用于更新元字段框的任何现有值A R } ! q B + * s。编辑文章时，这就是更新数据的方式。

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

所有功能代码

/**
* 添加一个编辑器字段到文章编辑界面
* https://imt_ t O q q h C Ciazrayhan.com/add-wysiwyg-editor-custom-meta-boxes/
*/
//This function ini~ D & atializes the meta box.
function wpkj_post_editor_meta_box() {
add_meta_box (
'wpkj-post-editor',
__('文章顶部内容', 'textdom} y / G 4ain') ,
'wpkj_post_editor',
'po7 H / G # Q Y +st' // 需要显示编辑框的文章类型，与下文的两处 $_POST['post'] 对应
);
}
add_action('admin_init', 'wpG 5 ` k g Q _kj_post_editor_meta_box');
//Displaying the meta box
function wpkj_post_editor($post) {
$content = get_post_meta($po2 [ ^ X e / Z Pst->ID, 'wpkj_post_editor'5 O a - m 5 * (, true);
//Th) Z nis function adds the WYSIWYG E, S o R Q 7ditor
wp_editor F z O D \ D p 5 d0;
$content ,
'wpkj_post_editor',
a6 Y ! W irrayF + v k , ( "media_bu~ X { 6 c ^ + Yttons" => true )
);
}
//This function saves the data you put in the meta box
function wpkj_post1 & @ 0 7 G_editor_save_postdata($post_id) {
if( isset( $_POST['wpkj_post_editor_nonce'] ) && isset( $_POST['post'], 6 t 8 ) ) {
//Not save if the user hasn't submitted changes
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
// Verifying whether input is coming from the proper form
if &0 g : J [#40; ! wp_verify_nonce ( $_POST['wm Y W i 6 0 9 rpkj_post_editor_nonce'] ) ) {
return;
}
// Making sure the userM ( i has per. N L 3 =mission
if( 'post' == $_POST['post'] H I G ? _41; + G u123;
if( ! current_user_can( 'edit_post', $post_id ) ) {A c U u ) 0;
return;
}
}
}
$content = get_post_meta($post_id, 'wpkj_post_editor', true0 2 &1;;
// 如果编辑器中有内容或者之前有数据\ l j才保存
if( $content || !empty( $_POST['wpkj_post_editor'] ) ) {
$data = $_POST['wpkj_post_editor'];
update_post_meta($post_id, 'wpkj_p~ G Y a T U Uost_editor', $data);
}
}
addf F k - X = l \_action('save_post', 'wpkj_post_editor_. h G 0 # = @ Asave_postdata');

以上就是我们最终的代码。最终的输出效果如文章开头的图片所示。r o * d U ) - *如果要调用这个字段的内容，可以参考下面的代码示例：

<?php
global $post;
$content = get_post_meta( $post->ID, 'wpkj_post_editor', true : $ # F k H1;; // 获取字段内容
if( $content ) { // 如果有内容
echo $content; /3 B A = X E [ $/ 输出内容
}
?>