Скрытие полей логина и пароля WordPress на странице входа

Вопрос или проблема

add_action( 'login_head', 'wpse_121687_hide_login' );
function wpse_121687_hide_login() {
    $style="";
    $style .= '<style type="text/css">';
    $style .= '.login form{ display: none }';
    $style .= '.login #nav a, .login #backtoblog a { display: none }';
    $style .= '</style>';

    echo $style; 
}

public static function remove_password_field($loginform) {

 ?>
 <style>
      .user-pass-wrap,
         .user-pass-wrap input[type="password"] {
             display: none !important;
         }
     </style>

<?php
    return $loginform;
}

/**
* Это скрывает поля для логина и пароля, так что видима только кнопка социального входа
*/    

add_action( 'login_head', 'wpse_121687_hide_login' );
function wpse_121687_hide_login() {
    $style="";
    $style .= '<style type="text/css">';
    $style .= '.login label{ display: none }';
    $style .= '.login .button.wp-hide-pw .dashicons{ display: none }';
    $style .= '.login form .input{ display: none }';
    $style .= '.login form .forgetmenot{ display: none }';
    $style .= '.login #nav a, .login #backtoblog a { display: none }';
    $style .= '</style>';

    echo $style; 
}

Ответ или решение

Чтобы скрыть поля ввода логина и пароля на странице входа в WordPress, сохраняя при этом функциональность социальных кнопок, таких как «Войти с помощью Google», можно внести следующие изменения в файл functions.php вашей темы. Приведенные ниже рекомендации помогут вам добиться желаемого результата.

Как скрыть поля логина и пароля в WordPress

1. Добавление пользовательского кода

   Откройте файл functions.php вашей активной темы и добавьте следующий код:

   /**
   * Скрывает поля логина и пароля, оставляя только кнопки социальных сетей
   */    
   
   add_action( 'login_head', 'custom_hide_login_fields' );
   
   function custom_hide_login_fields() {
       echo '<style type="text/css">
           .login #login { 
               display: flex; 
               flex-direction: column; 
               align-items: center; 
           }
           .login label { 
               display: none; 
           }
           .login #user_login, 
           .login #user_pass, 
           .login .forgetmenot, 
           .login .button {
               display: none !important; 
           }
           .login .social-login-buttons {
               display: block; 
               margin-top: 20px; 
           }
       </style>';
   }

2. Настройка кнопок социальных сетей

   Если вы используете плагин для авторизации через социальные сети, убедитесь, что внутри вашего шаблона уже есть код, отвечающий за отображение кнопок. Если кнопки не отображаются, вам нужно добавить необходимый HTML и JavaScript к вашему шаблону.

3. Дополнительные изменения

   Если вы хотите произвести дополнительные настройки и убрать другие элементы интерфейса, такие как заголовок или логотип, вы можете добавить дополнительные CSS-правила в предыдущий код. Например, чтобы скрыть заголовок формы входа WordPress:

   .login #login h1 {
       display: none;
   }

4. Тестирование

   После внесения изменений в functions.php, обязательно проверьте функциональность страницы входа. Зайдите на страницу входа и убедитесь, что поля логина и пароля скрыты, а кнопки для входа через социальные сети работают без проблем.

Рекомендации по улучшению

• Используйте Child Theme: Рекомендуется вносить изменения в дочернюю тему, чтобы предотвратить потерю изменений при обновлении основной темы.
• Кэширование: Если у вас активированы кэш-плагины, очистите кэш после внесения изменений, чтобы увидеть их немедленно.
• Обратная связь от пользователей: Прислушивайтесь к числу обращений пользователей о проблемах с входом через социальные сети, чтобы своевременно реагировать на возможные сбои.

Заключение

Скрытие полей логина и пароля в WordPress может реально повысить удобство использования сайта, особенно если вы хотите обеспечить пользователям вход через социальные сети. Следуя приведенным рекомендациям, вы сможете настроить интерфейс таким образом, чтобы он соответствовал вашим требованиям без ущерба для функциональности.