将自定义安全问题添加到自定义WordPress登录表单并停用登录按钮，直到回答

Question

我想知道是否有人可以安全地帮助我？我得到了一个定制的登录表单（template和functions.php），我需要在其中添加一个安全性问题，可以随时通过编辑模板直接对其进行修改。

安全性问题应该很容易，但是“很难”。我在想，“ 180-40 + 60是多少？”然后旁边有一个用于输入答案的框。

我真正需要的是使登录按钮保持不活动状态，直到给出正确的答案为止。

这是模板的代码：

<?php
/**
* Template name: Login
* Author: Custom text here
*
*/
get_header();
// Send the user to his account or any page if already logged in
if ( is_user_logged_in() ) {
wp_redirect( home_url('/') );
}

// Get login error messages
$login_errors = (isset($_GET['user-login']) ) ? $_GET['user-login'] : 0;

if ( $_POST['action'] == 'log-in' ) {

// Submit the user login inputs
$login = wp_login( $_POST['user-name'], $_POST['password'] );
$login = wp_signon( array( 'user_login' => $_POST['user-name'], 'user_password' => $_POST['password'], 'remember' => $_POST['remember-me'] ), false );

// Redirect to account page after successful login
if ( $login->ID ) {
wp_redirect( home_url('/') );
}}
?>

<div id="content" role="main" class = "user-login" >
<!--<h2 class="page-title"><?php the_title(); ?></h2> -->
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php
// output header error messages
if ( $login_errors === "failed" ) {
echo '<div class="input-error-wrapper"><span class="input-error">Custom text here</span></div>';
} elseif ( $login_errors === "empty" ) {
echo '<div class="input-error-wrapper"><span class="input-error">Custom text here</span></div>';
} elseif ( $login_errors === "false" ) {
echo '<div class="input-error-wrapper"><span class="input-error">Cutom text here</span>';
}

?>
<div class="ml-wrapper">
<div class="ml-section">
<form action="<?php the_permalink(); ?>" method="post" class="sign-in">
<p>
<label for="user-name"><?php _e('User ID'); ?></label>
<input type="text" name="user-name" id="user-name" value="<?php echo wp_specialchars( $_POST['user-name'], 1 ); ?>" />
<div class="space"></div>
<label for="password"><?php _e('Password'); ?></label>
<input type="password" name="password" id="password" />
</p>
<p>
<input type="submit" name="submit" value="<?php _e('Login'); ?>" id = "clfl" />
<input type="hidden" name="action" value="log-in" />
</p>
</form>
</div></div>
<?php endwhile; ?>

</div>
<?php
get_footer();

这是functions.php文件中的代码：

function redirect_login_page() {
$login_page  = home_url( '/login/' );
$page_viewed = basename($_SERVER['REQUEST_URI']);

if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_page);
exit;
}}
add_action('init','redirect_login_page');

function login_failed() {
$login_page  = home_url( '/login/' );
wp_redirect( $login_page . '?user-login=failed' );
exit;
}
add_action( 'wp_login_failed', 'login_failed' );

function verify_username_password( $user, $username, $password ) {
$login_page  = home_url( '/login/' );
if( $username == "" || $password == "" ) {
wp_redirect( $login_page . "?user-login=empty" );
exit;
}}
add_filter( 'authenticate', 'verify_username_password', 1, 3);

function logout_page() {
$login_page  = home_url( '/login/' );
wp_redirect( $login_page . "?user-login=false" );
exit;
}
add_action('wp_logout','logout_page');

我希望获得一些帮助，为此添加一个简单的“加减问题”，直到该问题得到解答之前，请停用登录按钮。