在Users
(wp-admin/users.php
) 页面,WordPress使用wp_dropdown_users()
要生成您所指的用户下拉菜单,我建议使用wp_dropdown_users_args
hook 过滤用户查询,例如仅显示1个结果(或10个,但肯定不是55k!)然后使用JavaScript添加/加载其他结果。
在这个答案中,我将向你展示如何做到这一点,我们在哪里使用Select2 添加“键入并搜索”功能。请注意,我使用的是一个自定义REST API端点,它以Select2所期望的格式返回结果,这样,JavaScript部分/代码对我们来说也会更简单(即代码更短)。
Step #1: Filter the users query for the reassign_user
drop-down menu.
function my_filter_reassign_user_query( $query_args, $parsed_args ) {
// Make sure we\'re on the users.php page on the admin side.
if ( is_admin() && \'users\' === get_current_screen()->id &&
// .. and the action is deleting a user
( isset( $_GET[\'action\'] ) && \'delete\' === $_GET[\'action\'] ) &&
// .. and the <select>\'s name is set to reassign_user.
\'reassign_user\' === $parsed_args[\'name\']
) {
// You can also use 10, etc., but the point is, we don\'t want 55k (or
// LOTS OF) <option> tags!
$query_args[\'number\'] = 1;
}
return $query_args;
}
add_filter( \'wp_dropdown_users_args\', \'my_filter_reassign_user_query\', 10, 2 );
Step #2: Enqueue the Select2
scripts and styles, and our AJAX script.
function my_enqueue_select2_scripts() {
// Make sure we\'re on the users.php page on the admin side.
if ( is_admin() && \'users\' === get_current_screen()->id ) {
wp_enqueue_style( \'select2\', \'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css\', [], null );
wp_enqueue_script( \'select2\', \'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js\', [], null );
wp_enqueue_script( \'users-ajax\', \'/path/to/users-ajax.js\', [ \'select2\', \'jquery\' ], \'1.0\' );
wp_localize_script( \'users-ajax\', \'users_ajax\', [
\'root\' => esc_url_raw( get_rest_url() ),
\'nonce\' => wp_create_nonce( \'wp_rest\' ),
] );
}
}
add_action( \'admin_enqueue_scripts\', \'my_enqueue_select2_scripts\' );
Step #3: Register the custom REST API endpoint.
我只是给你密码,看看官方
handbook 如果你没有。你还想检查一下
WP_User_Query::prepare_query()
对于可以使用的参数。
function my_select2_users( $request ) {
$search = $request->get_param( \'term\' ); // the search keyword
$per_page = $request->get_param( \'per_page\' ); // results per page
$page = $request->get_param( \'page\' ); // current page number
$per_page = $per_page ? $per_page : 10;
$page = $page ? $page : 1;
$args = [
\'number\' => $per_page,
\'paged\' => $page,
\'search_columns\' => [ \'user_login\', \'display_name\' ],
\'fields\' => [ \'ID\', \'display_name\', \'user_login\' ],
\'who\' => \'authors\',
];
if ( $search ) {
$args[\'search\'] = \'*\' . sanitize_text_field( $search ) . \'*\';
}
$query = new WP_User_Query( $args );
$items = [];
foreach ( $query->get_results() as $user ) {
$items[] = [
\'id\' => $user->ID,
\'text\' => $user->display_name . \' (\' . $user->user_login . \')\',
];
}
return [
\'results\' => $items,
\'pagination\' => [ \'more\' => $page * $per_page < $query->get_total() ],
\'total\' => $query->get_total(),
];
}
add_action( \'rest_api_init\', function () {
// You should rename the my-plugin to a meaningful one..
register_rest_route( \'my-plugin/v1\', \'/select2_users\', [
\'methods\' => \'GET\',
\'callback\' => \'my_select2_users\',
\'permission_callback\' => function () {
return current_user_can( \'delete_users\' );
}
] );
} );
Step #4: The JavaScript/AJAX script (placed in users-ajax.js
).
检查
here 选择2的参数(如
ajax
) 您可以使用。
jQuery( function ( $ ) {
$( \'select[name="reassign_user"]\' ).on( \'select2:open\', function () {
$( \'#delete_option1\' ).prop( \'checked\', true );
} ).on( \'select2:select\', function( e ) {
$( \'#submit\' ).removeProp( \'disabled\' );
} ).on( \'select2:unselect\', function( e ) {
$( \'#submit\' ).prop( \'disabled\', true );
} ).select2( {
ajax: {
url: users_ajax.root + \'my-plugin/v1/select2_users\',
dataType: \'json\',
headers: { \'X-WP-NONCE\': users_ajax.nonce }
},
minimumInputLength: 2
} );
} );
当所有代码组合在一起时,您会得到如下结果: