我构建了一个小/简单的示例，希望它能帮助您。
Admin dashboard widget with an save button
首先，我们注册一个函数，告诉wordpress我们要创建一个管理仪表板小部件
/**
* Registration of the Admin dashboard widget
*/
function ch_add_dashboard_widgets() {
wp_add_dashboard_widget(
\'user_email_admin_dashboard_widget\', // Widget slug
__(\'Extra profile information\', \'ch_user_widget\'), // Title
\'ch_user_email_admin_dashboard_widget\' // Display function
);
}
// hook to register the Admin dashboard widget
add_action( \'wp_dashboard_setup\', \'ch_add_dashboard_widgets\' );
然后我们创建呈现小部件的函数
/**
* Output the html content of the dashboard widget
*/
function ch_user_email_admin_dashboard_widget() {
// detect the current user to get his phone number
$user = wp_get_current_user();
?>
<form id="ch_form" action="<?php echo esc_url( admin_url( \'admin-ajax.php\' ) ); ?>" method="post" >
<!-- controlls on which function the post will send -->
<input type="hidden" name="cp_action" id="cp_action" value="ch_user_data">
<?php wp_nonce_field( \'ch_nonce\', \'ch_nonce_field\' ); ?>
<p>Please add your phone number</p>
<p>
<label for="phone">Phone Number</label>
<input type="text" name="phone" id="cp_phone_number" value="<?php echo esc_attr( get_the_author_meta( \'phone\', $user->ID ) ); ?>" class="regular-text" />
</p>
<p>
<input name="save-data" id="save-data" class="button button-primary" value="Save" type="submit">
<br class="clear">
</p>
</form>
<?php
}
好的，下一部分是保存。有两种方法可以保存小部件数据。
第一种是通过正常的“表单post请求”发送数据。这就是网站上典型表单的工作方式。这意味着你有一个表单，你输入日期，点击提交按钮，数据将发送到服务器。服务器会处理这些数据，然后用户会重定向到另一个页面，例如“谢谢”页面。
第二种方法与第一种方法几乎相同，但有一个例外是“form post request”将通过AJAX发送（简称Asynchronous JavaScript And XML这种方式的优点是，我们保持在同一页上（用一种非常简单的方式表达）。
要你用第二种方式告诉wordpress两个想法。首先，ajax请求应该调用哪个函数以及javascript文件所在的位置。
/**
* Saves the data from the admin widget
*/
function ch_save_user_data() {
$msg = \'\';
if(array_key_exists(\'nonce\', $_POST) AND wp_verify_nonce( $_POST[\'nonce\'], \'ch_nonce\' ) )
{
// detect the current user to get his phone number
$user = wp_get_current_user();
// change the phone number
update_usermeta( $user->id, \'phone\', $_POST[\'phone_number\'] );
// success message
$msg = \'Phone number was saved\';
}
else
{
// error message
$msg = \'Phone number was not saved\';
}
wp_send_json( $msg );
}
/**
* ajax hook for registered users
*/
add_action( \'wp_ajax_ch_user_data\', \'ch_save_user_data\' );
/**
* Add javascript file
*/
function ch_add_script($hook){
// add JS-File only on the dashboard page
if (\'index.php\' !== $hook) {
return;
}
wp_enqueue_script( \'ch_widget_script\', plugin_dir_url(__FILE__) ."/js/widget-script.js", array(), NULL, true );
}
/**
* hook to add js
*/
add_action( \'admin_enqueue_scripts\', \'ch_add_script\' );
确定最后一点，这是javascript文件的内容。
jQuery("#ch_form").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the form element */
var url = jQuery( this ).attr( \'action\' );
/* Send the data using post */
jQuery.ajax({
type: \'POST\',
url: url,
data: {
action: jQuery(\'#cp_action\').val(),
phone_number: jQuery(\'#cp_phone_number\').val(),
nonce: jQuery(\'#ch_nonce_field\').val()
},
success: function (data, textStatus, XMLHttpRequest) {
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
好的，最后是一些有用的链接：
"AJAX in Plugins" on wordpress.org
What is Ajax? Plugin Handbook on wordpress.org
Dashboard Widgets API on wordpress.org
Handling POST Requests the WordPress Way on sitepoint.com
EDIT: 我将整个代码放入一个插件中，并将其发布在github上。
链接：https://github.com/user141080/admindashboardwidget
