WordPress中建立一個簡單的CRM：建立自訂字段

在本系列中，我們一直在研究如何在 WordPress 中建立簡單的 CRM 系統。在本系列的第一部分中，我們建立了一個註冊「聯絡人」自訂貼文類型的 WordPress 插件，但我們尚未介紹如何儲存聯絡人的其他資訊。

建立自訂欄位

WordPress 具有 add_meta_box() 函數，該函數允許外掛程式和主題開發人員針對各種 WordPress 管理畫面註冊自訂元框。

WordPress 會註冊一些自己的元框，以便在您建立貼文或頁面時顯示。例如，在頁面上，您有頁面屬性元框：

#讓我們為聯絡人自訂貼文類型新增一個元框。開啟您在本系列第一篇教學中建立的插件檔案。然後，在插件的建構函式中，更新程式碼以符合以下內容。這將我們的 register_meta_boxes() 函數註冊到 add_meta_boxes 操作：

/**
* Constructor. Called when plugin is initialised
*/
function __construct() {

	add_action( 'init', array( $this, 'register_custom_post_type' ) );
	add_action( 'add_meta_boxes', array( $this, 'register_meta_boxes' ) ); 
    
}

接下來，在我們的 register_meta_boxes() 函數中，我們加入對 add_meta_box() 的呼叫。這告訴 WordPress 我們需要一個名為 Contact Details 的元框，它由 output_meta_box() 函數呈現。在建構函式後加入以下程式碼：

/**
* Registers a Meta Box on our Contact Custom Post Type, called 'Contact Details'
*/
function register_meta_boxes() {
	add_meta_box( 'contact-details', 'Contact Details', array( $this, 'output_meta_box' ), 'contact', 'normal', 'high' );	
}

最後，我們需要一個output_meta_box()函數，該函數是由上面的add_meta_box呼叫的。在register_meta_boxes()函數後面加入以下程式碼：

/**
* Output a Contact Details meta box
*
* @param WP_Post $post WordPress Post object
*/
function output_meta_box($post) {

}

讓我們檢查一下我們的聯絡人自訂貼文類型上是否出現了一個元框。前往聯絡人 > 新增聯絡人

，在 WordPress 儀表板中建立新聯絡人。

如果所有內容都正確編寫，您應該會看到類似於以下螢幕截圖的內容：

#使用欄位填入元框

讓我們繼續在此元框中新增一個電子郵件地址欄位。將 output_meta_box 函數更改為以下程式碼：

/**
* Output a Contact Details meta box
*
* @param WP_Post $post WordPress Post object
*/
function output_meta_box( $post ) {
	// Output label and field
    echo ( '<label for="contact_email">' . __( 'Email Address', 'tuts-crm' ) . '</label>'  );
	echo ( '<input type="text" name="contact_email" id="contact_email" value="' . esc_attr( $email ) . '" />'  );
    
}

儲存您的外掛程式碼，然後重新載入「新增聯絡人」畫面。您應該會看到我們的新電子郵件地址欄位出現在「聯絡資訊」元框中：

#儲存自訂欄位資料

我們還沒有完全完成。我們需要告訴 WordPress 保存使用者在該欄位中輸入的內容。在 WordPress 中，我們透過針對 save_post 作業註冊一個函數來實現此目的。

與大多數操作一樣，我們將在插件的建構子中註冊我們的操作：

/**
* Constructor. Called when plugin is initialised
*/
function __construct() {

	add_action( 'init', array( $this, 'register_custom_post_type' ) );
	add_action( 'add_meta_boxes', array( $this, 'register_meta_boxes' ) ); 
	add_action( 'save_post', array( $this, 'save_meta_boxes' ) );
    
}

接下來，讓我們建立 save_meta_boxes() 函數：

/**
* Saves the meta box field data
*
* @param int $post_id Post ID
*/
function save_meta_boxes( $post_id ) {

	// Check this is the Contact Custom Post Type
	if ( 'contact' != $_POST['post_type'] ) {
		return $post_id;
	}

	// Check the logged in user has permission to edit this post
	if ( ! current_user_can( 'edit_post', $post_id ) ) {
		return $post_id;
	}

	// OK to save meta data
	$email = sanitize_text_field( $_POST['contact_email'] );
	update_post_meta( $post_id, '_contact_email', $email );
    
}

此函數執行多個操作，因為 WordPress 和其他外掛程式可以非常頻繁地呼叫 save_post 操作（例如，當定期自動儲存草稿或儲存不同的貼文類型時）。我們需要確保僅在使用者儲存或更新聯絡人時才保存自訂欄位資料。

如果我們要儲存聯絡人，我們會清理電子郵件地址。來自 WordPress 法典：

檢查無效的 UTF-8，將單一 < 字元轉換為實體，剝離所有標籤，刪除換行符、製表符和額外的空格，剝離八位元組。 < 字符转换为实体，剥离所有标签，删除换行符、制表符和额外的空格，剥离八位字节。

簡而言之，我們確保文字字串中沒有任何時髦的格式。

最後，我們使用 update_post_meta 將電子郵件地址儲存在貼文元資料中。將帖子元視為附加到帖子的一系列鍵/值對。您可以根據自己的喜好選擇任意數量。在我們的範例中，我們根據鍵 _contact_email 儲存自訂欄位的值。

讀取自訂欄位資料

建立新的聯絡人並輸入電子郵件地址。儲存新的聯絡人，您會發現電子郵件地址沒有出現在欄位中：

#我們需要編輯 output_meta_box() 函數來讀取 Post 元，並將其顯示在輸入欄位中。將 output_meta_box() 函數更改為以下程式碼：

/**
* Output a Contact Details meta box
*
* @param WP_Post $post WordPress Post object
*/
function output_meta_box($post) {

	$email = get_post_meta( $post->ID, '_contact_email', true );
	
	// Output label and field
    echo ( '<label for="contact_email">' . __( 'Email Address', 'tuts-crm' ) . '</label>' );
	echo ( '<input type="text" name="contact_email" id="contact_email" value="' . esc_attr( $email ) . '" />' );
    
}

我們使用 get_post_meta() 來取得給定貼文 ID 和元鍵組合的值。我們知道元鍵是 _contact_email，因為這就是我們在 update_post_meta()

中保存自定义字段值时使用的键

安全

提交和处理表单数据时，安全性极其重要。我们在保存数据时需要知道数据的来源是可信的。如果我们不能信任数据的来源，我们就不能存储它——数据可能会因试图利用错误或安全缺陷而受到损害或损坏。

WordPress 为我们提供了随机数（“使用一次的数字”），可以与表单数据一起发送。当我们的保存例程运行时，可以检查这个随机数，以确保它与我们期望的值匹配。

这有助于防止跨站点请求伪造 (CSRF) 攻击，即有人试图从不同的网站向我们的保存例程提交表单数据。

我们需要在上面的代码的两个地方添加安全性：

1. output_meta_box()：向表单添加随机数
2. save_meta_boxes()：验证提交的随机数值

让我们编辑 output_meta_box() 函数，将其替换为以下代码：

/**
* Output a Contact Details meta box
*
* @param WP_Post $post WordPress Post object
*/
function output_meta_box($post) {

    $email = get_post_meta( $post->ID, '_contact_email', true );
	
	// Add a nonce field so we can check for it later.
	wp_nonce_field( 'save_contact', 'contacts_nonce' );
	
	// Output label and field
	echo ( '<label for="contact_email">' . __( 'Email Address', 'tuts-crm' ) . '</label>' );
	echo ( '<input type="text" name="contact_email" id="contact_email" value="' . esc_attr( $email ) . '" />' );
    
}

这使用 wp_nonce_field() 生成一个名为 contacts_nonce 的隐藏字段，并执行名为 save_contact 的操作。它的价值是由WordPress产生的。

接下来，让我们在 save_meta_boxes() 中编辑保存例程：

/**
* Saves the meta box field data
*
* @param int $post_id Post ID
*/
function save_meta_boxes( $post_id ) {

	// Check if our nonce is set.
	if ( ! isset( $_POST['contacts_nonce'] ) ) {
		return $post_id;	
	}

	// Verify that the nonce is valid.
	if ( ! wp_verify_nonce( $_POST['contacts_nonce'], 'save_contact' ) ) {
		return $post_id;
	}

	// Check this is the Contact Custom Post Type
	if ( 'contact' != $_POST['post_type'] ) {
		return $post_id;
	}

	// Check the logged in user has permission to edit this post
	if ( ! current_user_can( 'edit_post', $post_id ) ) {
		return $post_id;
	}

	// OK to save meta data
	$email = sanitize_text_field( $_POST['contact_email'] );
	update_post_meta( $post_id, '_contact_email', $email );
    
}

这为我们的保存例程添加了两项检查：

1. 检查我们的表单中是否设置了随机数字段。如果没有，请不要保存任何内容。
2. 检查随机数字段的值是否符合我们的预期。如果没有，请不要保存任何内容。

创建或编辑您的联系人，并确保电子邮件地址现已保存。

下一个...

在下一篇文章中，我们将使用高级自定义字段将自定义字段添加到我们的联系人自定义帖子类型中，从而使我们能够创建具有更广泛输入类型的丰富用户界面.

以上是WordPress中建立一個簡單的CRM：建立自訂字段的詳細內容。更多資訊請關注PHP中文網其他相關文章！