플러그인 없이 WordPress 사용자 정의 로그인 페이지 만들기
게시 됨: 2022-09-01WordPress 기본 로그인 페이지가 지루한 적이 있습니까?
로그인 페이지를 웹사이트 디자인과 일관되게 만드는 방법이 있는지 궁금하신가요?
그렇다면 제대로 찾아오셨습니다. 이 기사에서는 플러그인 없이 로그인 페이지를 사용자 정의하는 다양한 방법을 안내합니다.
오늘 우리는 무엇을 포함시켰습니까?
- WordPress 기본 로그인 페이지
- 맞춤 로그인 페이지를 만들어야 하는 이유는 무엇입니까?
- WordPress 기본 로그인 페이지 사용자 지정
- 로그인 페이지 로고 사용자 정의
- WordPress 로그인 페이지 언어 전환기 비활성화
- 새 사용자 정의 로그인 페이지 생성
WordPress 기본 로그인 페이지
기본적으로 사이트 URL 끝에 /login/, /admin/ 또는 wp-login.php를 추가하여 WordPress 로그인 페이지에 액세스할 수 있습니다.
할 때마다 이 로그인 화면이 표시되지 않습니까?
보시다시피 WordPress 로그인 페이지에는 다음 요소가 포함되어 있습니다.
- 기본 배경
- 워드프레스 로고
- 입력 필드(사용자 이름 및 암호)
- 나를 기억해 확인란
- 제출 버튼
- 비밀번호 분실 링크
- 링크로 돌아가기
브랜딩 목적으로 이 일반 페이지를 사용자 정의 페이지로 교체하려는 경우 어떻게 합니까?
블로그 끝까지 계속 읽으십시오. 당신을 위해 몇 가지 놀라움이있을 것입니다.
WordPress 사용자 정의 로그인 페이지를 만들어야 하는 이유는 무엇입니까?
무엇보다도 사용자 정의 로그인 페이지는 훨씬 더 나은 사용자 경험을 제공합니다. 사이트에 로그인할 사용자가 적은 소규모 비즈니스를 운영하는 경우 WordPress 기본 로그인 페이지를 절대적으로 사용할 수 있습니다.
그러나 귀하의 사이트가 온라인 상점이라고 상상해 보십시오. 고객이 지루하고 브랜드가 없는 게이트웨이를 통해 귀하의 사이트에 로그인하도록 허용하는 것은 좋은 방법이 아닙니다.
가장 좋은 방법은 로그인 페이지를 웹사이트 스타일과 일치시키는 것입니다.
WordPress 사용자 정의 로그인 페이지의 또 다른 이점은 사이트 보안을 강화하는 것입니다. 기본 WordPress 로그인 URL을 변경하면 환영받지 못하는 사용자가 관리자 로그인 페이지에 쉽게 접근할 수 없습니다. 이렇게 하면 사이트에 대한 원치 않는 공격을 피할 수 있습니다.
이제 다음 섹션으로 이동하여 자신만의 로그인 페이지를 만드는 자세한 단계를 안내해 드리겠습니다.
WordPress 기본 로그인 페이지 사용자 지정
WordPress 기본 로그인 페이지의 로고와 링크를 자신의 것으로 바꿀 수 있다는 것을 알고 계십니까?
로그인 페이지 로고 사용자 정의
WordPress 로고를 교체하려면 다음 코드 스니펫을 (자식) 테마의 functions.php 파일에 추가하기만 하면 됩니다.
기능 ppwp_custom_login_logo() { ?>
<스타일 유형="텍스트/css">
#login h1 a, .login h1 a {
배경 이미지: url( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
높이: 100px ;
너비: 300px ;
배경 크기: 300px 100px ;
배경 반복: 반복 없음 ;
패딩 하단: 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 파일이나 코드 스니펫 플러그인에 추가하기만 하면 됩니다.
add_filter( 'login_display_language_dropdown', '__return_false' );
새 WordPress 사용자 정의 로그인 페이지 만들기
로고와 링크를 변경하는 것 이상의 작업을 수행하고 싶다면 어떻게 하시겠습니까?
WordPress를 사용하면 자신만의 로그인 페이지를 만들고 WordPress 기본 페이지를 귀하의 로그인 페이지로 바꿀 수 있습니까?
예! 당신은 절대적으로 할 수 있습니다!
아래 단계를 따르세요. 이 가이드에는 약간의 코딩 지식이 필요합니다. 코드에 익숙하지 않은 경우 플러그인을 대신 사용하십시오.
시작하기 전에 사이트를 백업하는 것을 잊지 마십시오.
1단계: 새 템플릿 파일 만들기
그렇게 하려면 모양 > 테마 파일 편집기로 이동하십시오.
template-parts 섹션에서 새 .php 파일을 추가하고 원하는 이름으로 지정합니다(예: custom-login-page.php).
먼저 다음 행을 사용자 정의 템플릿 파일에 추가하십시오.
<?php /* 템플릿 이름: 사용자 정의 로그인 페이지 */ ?>이 작업은 생성된 PHP 파일을 페이지 템플릿으로 만듭니다. 따라서 백엔드에서 페이지를 편집할 때 템플릿 이름이 표시됩니다.
2단계: 생성된 템플릿 파일 사용자 지정
다음 단계는 PHP 코드를 추가하여 완전한 로그인 양식을 만드는 것입니다.
로그인 양식 추가
<?php /** * 템플릿 이름: 사용자 정의 로그인 페이지 */ get_header(); if ( ! 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 ); } get_footer();
wp-login.php를 사용자 정의 로그인 페이지로 리디렉션
사용자 정의 로그인 페이지를 성공적으로 만들었습니다. 그러나 사용자는 사이트 URL 뒤에 wp-admin 또는 wp-login.php를 입력하여 WordPress 기본 로그인 페이지로 직접 이동할 수 있습니다.
이러한 일이 발생하지 않도록 하려면 WordPress 기본 로그인 URL에서 사용자 지정 URL로 사용자를 리디렉션해야 합니다.
그렇게 하려면 (자식) 테마의 functions.php 또는 코드 조각 플러그인에 다음 사용자 정의 코드를 추가하십시오.
함수 리디렉션_로그인_페이지() {
$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( $login_url );
출구;
}
}
add_action('초기화','리디렉트_로그인_페이지');로그인 오류 처리
사용자 정의 로그인 페이지 생성을 완료하면 올바른 로그인 세부 정보를 입력한 사용자가 대시보드로 이동합니다. 실패한 로그인 요청은 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( '로그인_오류', '오류_핸들러');다음으로 custom_login_page.php에 다음 코드를 추가합니다.
$err_codes = isset( $_SESSION["err_codes"] )? $_SESSION["err_codes"] : 0;
if( $err_codes !== 0 ){
echo display_error_message( $err_codes );
}
기능 display_error_message( $err_code ){
// 잘못된 사용자 이름.
if ( in_array( 'invalid_username', $err_code ) ) {
$error = '<strong>오류</strong>: 사용자 이름이 잘못되었습니다.';
}
// 잘못된 비밀번호.
if ( in_array( 'incorrect_password', $err_code ) ) {
$error = '<strong>오류</strong>: 입력한 비밀번호가 올바르지 않습니다.';
}
// 비어 있는 사용자 이름.
if ( in_array( 'empty_username', $err_code ) ) {
$error = '<strong>오류</strong>: 사용자 이름 필드가 비어 있습니다.';
}
// 비밀번호가 비어 있습니다.
if ( in_array( 'empty_password', $err_code ) ) {
$error = '<strong>오류</strong>: 비밀번호 필드가 비어 있습니다.';
}
// 빈 사용자 이름과 빈 암호.
if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
$error = '<strong>오류</strong>: 사용자 이름과 비밀번호가 비어 있습니다.';
}
반환 $ 오류;
}3단계: 새 페이지 생성 및 생성된 템플릿을 사용자 정의 페이지에 할당
이제 관리 대시보드 아래의 페이지 섹션으로 이동하여 새 페이지를 만듭니다.
페이지 속성 섹션의 템플릿 드롭다운에서 생성된 템플릿을 선택합니다.
페이지를 저장합니다.
이제 자신의 로그인 페이지가 생겼습니다.
사용자 정의 로그인 페이지를 성공적으로 생성하셨습니까?
관리자 로그인 페이지를 사용자 지정하는 자세한 단계를 안내해 드렸습니다.
WordPress 기본 로그인 양식에서 로고 및 관련 URL을 변경할 수 있습니다.
또는 새 페이지 템플릿을 만들어 자신만의 WordPress 사용자 정의 로그인 페이지를 만들 수 있습니다. 두 번째 솔루션은 처음에는 코딩 지식이 필요한 것처럼 보이지만 명확한 단계별 가이드를 사용하면 매우 쉽습니다. 그러니 전혀 걱정하지 마십시오.
사용자 정의 로그인 페이지를 아직 만들지 못하셨습니까?
추가 정보가 필요하십니까?
아래 의견 섹션에서 알려주십시오!