我的直觉是推出自己的AJAX回调。显然,您知道post ID(因为它位于前端)和字段名称,只需使用AJAX将其发回WP,并在那里以编程方式设置值即可。
Anuntested示例(道具到Kailey Lampert):
// Add checkboxes to post content
add_filter( \'the_content\', \'cba_add_checkboxes\');
function cba_add_checkboxes( $c ) {
$first = get_post_meta( get_the_ID(), \'first_item_key\', true );
$second = get_post_meta( get_the_ID(), \'second_item_key\', true );
$c .= \'<p class="cba"><input type="checkbox" name="test_value_1" \'. checked( $first, \'true\', false ) .\' /><br />
<input type="checkbox" name="test_value_2" \'. checked( $second, \'true\', false ) .\' />
<input type="hidden" name="post_id" value="\'. get_the_ID() .\'" /><br /><span class="response"></span></p>\';
return $c;
}
// Add scripts to the footer
add_action(\'wp_footer\', \'cba_script\');
function cba_script() {
wp_enqueue_script(\'jquery\');
?><script>
jQuery(function($) {
var ajaxurl = \'<?php echo admin_url( \'admin-ajax.php\' ); ?>\';
var spinner = \'<?php echo admin_url( \'images/loading.gif\' ); ?>\';
$(\'.cba input\').click( function() {
var p = $(this).parent(\'p\');
p.find(\'.response\').html(\'<img src="\'+spinner+\'" />\');
$.post(ajaxurl, {
\'action\': \'update_custom_fields\',
\'post_id\': p.find(\'input[name="post_id"]\').val(),
\'first_item\': p.find(\'input[name="test_value_1"]\').is(\':checked\'),
\'second_item\': p.find(\'input[name="test_value_2"]\').is(\':checked\')
}, function( response ) {
p.find(\'.response\').html(response);
}, \'text\');
});
});
</script><?php
}
// Add handlers within WordPress to deal with the AJAX post
add_action( \'wp_ajax_update_custom_fields\', \'cba_update_custom_fields\' ); // for logged-in users
add_action( \'wp_ajax_nopriv_update_custom_fields\', \'cba_update_custom_fields\' ); // for logged-out users
function cba_update_custom_fields() {
$post_id = $_POST[ \'post_id\' ];
$first_item = $_POST[ \'first_item\' ];
$second_item = $_POST[ \'second_item\' ];
update_post_meta( $post_id, \'first_item_key\', $first_item );
update_post_meta( $post_id, \'second_item_key\', $second_item );
die( \'updated\' );
}
基于标记的更新现在我们对您所做的有了更多的了解,我们可以对您需要使用的JS代码有更具体的了解。
基本上,我建议您在复选框中设置一个自定义类和一些数据元素。因此,您可以使用以下内容:
<td><input type="checkbox" name="28-scheduled" /></td>
<td><input type="checkbox" name="28-completed" /></td>
变成这样:
<td><input type="checkbox" name="28-scheduled" class="ajax-checkbox" data-post="28" data-type="scheduled" /></td>
<td><input type="checkbox" name="28-completed" class="ajax-checkbox" data-post="28" data-type="completed" /></td>
现在,您可以在整个表上设置一个jQuery事件监听器,分别查看每个输入:
jQuery(function($) {
$(\'table\').on(\'change\', \'input.ajax-checkbox\', function() {
var $this = $(this),
type = $this.data(\'type\'),
postID = $this.data(\'post\');
// ... Now send off your AJAX request as before
});
});
此事件侦听器将等待
change
所有事件
<input>
具有
ajax-checkbox
班然后,它将从
data-
属性,以便在AJAX请求中发送它们。您必须将其与上面的示例或已编写的自定义代码合并以分派消息。