Создайте пользовательскую страницу входа в WordPress без плагина

Опубликовано: 2022-09-01

Вам когда-нибудь надоедала стандартная страница входа в WordPress?

Вы когда-нибудь задумывались, есть ли способ сделать страницу входа в систему совместимой с дизайном вашего сайта?

Если да, то вы пришли в нужное место. В этой статье мы расскажем вам о различных способах настройки страницы входа без каких-либо плагинов.

Что мы включили сегодня?

  • Страница входа в WordPress по умолчанию
  • Почему вы должны создать пользовательскую страницу входа?
  • Настроить страницу входа в WordPress по умолчанию
    • Настроить логотип страницы входа
    • Отключение переключателя языка на странице входа в WordPress
  • Создайте новую пользовательскую страницу входа

Страница входа в WordPress по умолчанию

По умолчанию вы можете получить доступ к странице входа в WordPress, добавив /login/, /admin/ или wp-login.php в конце URL вашего сайта.

Вы получаете этот экран входа в систему каждый раз, когда делаете это, не так ли?

PPWP Pro: страница входа в WordPress по умолчанию

Как видите, страница входа в WordPress содержит следующие элементы:

  1. Фон по умолчанию
  2. Логотип WordPress
  3. Поля ввода (имя пользователя и пароль)
  4. Флажок «Запомнить меня»
  5. Кнопка «Отправить»
  6. Ссылка «Забыли пароль»
  7. Вернуться к ссылке

Что делать, если вы хотите заменить эту общую страницу своей пользовательской, скажем, в целях брендинга?

Просто продолжайте читать наш блог до конца. Для вас будут сюрпризы.

Почему вы должны создать пользовательскую страницу входа в WordPress?

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

Однако представьте, что ваш сайт представляет собой интернет-магазин, и позволять покупателям входить на ваш сайт через скучный и небрендовый шлюз — не лучший вариант.

Лучше всего сделать так, чтобы страница входа соответствовала стилям вашего сайта.

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

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

Настроить страницу входа в WordPress по умолчанию

Знаете ли вы, что вы можете заменить логотипы и ссылки на странице входа в WordPress по умолчанию своими собственными?

Настроить логотип страницы входа

Чтобы заменить логотип WordPress, просто добавьте следующий фрагмент кода в файл functions.php вашей (дочерней) темы.

 функция ppwp_custom_login_logo() { ?>
    <тип стиля="текст/CSS">
        #логин h1 а, .логин h1 а {
фоновое изображение: URL ( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        высота: 100 пикселей ;
        ширина: 300 пикселей ;
        размер фона: 300px 100px ;
        фоновый повтор: без повтора ;
        padding-bottom: 10px ;
        }
    </стиль>
<?php }
add_action('login_enqueue_scripts', 'ppwp_custom_login_logo');

Это действие поможет вам заменить только логотип. При нажатии на свой логотип вы по-прежнему будете перенаправлены на страницу WordPress.

Как вы можете перенаправить пользователей на ваш сайт?

Просто кусок пирога со следующим фрагментом кода.

 функция ppwp_custom_login_url() {
    вернуть home_url();
}
add_filter('login_headerurl', 'ppwp_custom_login_url');
функция ppwp_login_logo_url_redirect() {
    вернуть ' https://passwordprotectwp.com/ ';
}
add_filter('login_headertitle', 'ppwp_login_logo_url_redirect');

Не забудьте заменить URL-адрес сайта фактическим названием вашего сайта. Пользовательский логотип на экране входа в систему теперь указывает на домашнюю страницу вашего сайта.

Отключение переключателя языка на странице входа в WordPress

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

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

Как вы можете это сделать?

Просто добавьте следующий фрагмент кода в файл functions.php вашей (дочерней) темы или плагин Code Snippets.

 add_filter('login_display_language_dropdown', '__return_false');

Создайте новую пользовательскую страницу входа в WordPress

Что, если вы хотите сделать больше, чем просто изменить логотипы и ссылки?

Позволяет ли WordPress создать собственную страницу входа и заменить страницу входа WordPress по умолчанию своей?

Да! Вы абсолютно можете!

Просто следуйте нашим шагам ниже. Обратите внимание, что это руководство требует некоторых знаний в области кодирования. Если вы не знакомы с кодами, используйте плагины.

Не забудьте сделать резервную копию вашего сайта перед началом работы.

Шаг 1: Создайте новый файл шаблона

Для этого перейдите в раздел «Внешний вид» > «Редактор файла темы».

В разделе частей шаблона добавьте новый файл .php и назовите его так, как вам нравится, например, custom-login-page.php.

Прежде всего, добавьте эту строку в свой собственный файл шаблона:

 <?php /* Имя шаблона: Пользовательские страницы входа */ ?>

Это действие сделает ваш созданный файл PHP шаблоном страницы. Соответственно, вы будете видеть название шаблона при редактировании страниц в бэкенде.

Шаг 2: Настройте созданный файл шаблона

Следующим шагом является добавление PHP-кодов для создания полной формы входа.

Добавить форму входа

 <?php
/**
* Имя шаблона: Пользовательская страница входа
*/
получить_заголовок();
если ( ! is_user_logged_in() ) {
    $args = массив
        'redirect' => admin_url(), // перенаправление на панель администратора.
        'form_id' => 'custom_loginform',
        'label_username' => __(' Имя пользователя: '),
        'label_password' => __(' Пароль: '),
        'label_remember' => __(' Запомнить меня '),
        'label_log_in' => __(' Войти в систему'),
         'помнить' => правда
    );
wp_login_form($args);
}
получить_нижний колонтитул();

Перенаправить wp-login.php на пользовательскую страницу входа

Вы успешно создали пользовательскую страницу входа. Тем не менее, пользователи по-прежнему могут напрямую перейти на страницу входа в WordPress по умолчанию, введя wp-admin или wp-login.php после URL вашего сайта.

Чтобы этого не произошло, вам необходимо перенаправить пользователей с URL-адресов входа в WordPress по умолчанию на ваши собственные.

Для этого добавьте следующие пользовательские коды в файл functions.php вашей (дочерней) темы или плагин Code Snippets.

 функция redirect_login_page() {
    $login_url = home_url('/логин');
    $url = базовое имя ($_SERVER['REQUEST_URI']); // получаем запрошенный URL
    isset( $_REQUEST['redirect_to'] ) ? ($url = "wp-login.php"): 0; // если пользователи отправляют запрос на wp-admin
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($логин_url);
        выход;
    }
}
add_action('init','redirect_login_page');

Обработка ошибок входа

Когда вы закончите создание пользовательской страницы входа, пользователи, которые введут правильные данные для входа, попадут на панель инструментов. Неудачные запросы на вход будут перенаправлены на WordPress по умолчанию.

Чтобы справиться с неудачными попытками входа в систему, добавьте следующий код в файл functions.php вашей (дочерней) темы.

 функция error_handler() {
    $login_page = home_url('/логин');
    глобальные $ошибки;
    $err_codes = $errors->get_error_codes(); // получаем встроенные коды ошибок WordPress
    $_SESSION["err_codes"] = $err_codes;
    wp_redirect($login_page); // держать пользователей на одной странице
    выход;
}
add_filter('login_errors', 'error_handler');

Затем добавьте следующие коды в файл custom_login_page.php.

 $err_codes = isset($_SESSION["err_codes"] )? $_SESSION["err_codes"] : 0;
    если( $err_codes !== 0 ){
        эхо display_error_message($err_codes);
}
функция display_error_message($err_code){
    // Неверное имя пользователя.
    если (in_array('invalid_username', $err_code)) {
        $error = '<strong>ОШИБКА</strong>: Недопустимое имя пользователя.';
    }
    // Неверный пароль.
    если (in_array('неверный_пароль', $err_code)) {
        $error = '<strong>ОШИБКА</strong>: Вы ввели неверный пароль.';
    }
    // Пустое имя пользователя.
    если (in_array('пустое_имя_пользователя', $err_code)) {
        $error = '<strong>ОШИБКА</strong>: поле имени пользователя пусто.';
    }
    // Пустой пароль.
    если (in_array('пустой_пароль', $err_code)) {
        $error = '<strong>ОШИБКА</strong>: поле пароля пусто.';
    }
    // Пустое имя пользователя и пустой пароль.
    if(in_array('пустое_имя_пользователя', $err_code) && in_array('пустой_пароль', $err_code)){
        $error = '<strong>ОШИБКА</strong>: имя пользователя и пароль пусты.';
    }
вернуть $ошибку;
}

Шаг 3: Создайте новую страницу и назначьте созданный шаблон пользовательской странице

Теперь перейдите в раздел «Страницы» в панели администратора и создайте новую страницу.

В раскрывающемся списке «Шаблон» в разделе «Атрибуты страницы» выберите созданный шаблон.

PPWP Pro: создание пользовательских страниц входа

Сохраните страницу.

Теперь у вас есть собственная страница входа.

Вы успешно создали свою пользовательскую страницу входа?

Мы подробно описали шаги по настройке страницы входа администратора.

Вы можете изменить логотип и соответствующий URL-адрес в форме входа в WordPress по умолчанию.

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

Вам уже удалось создать свою персональную страницу входа?

Вам нужна дополнительная информация?

Дайте нам знать в разделе комментариев ниже!