Change login page in WordPress

워드프레스 로그인 페이지 수정하기

들어가며

이전 글에서 플러그인을 사용하지 않고 워드프레스 기본 로그인 폼/등록 폼을 멋지게 바꾸는 방법을 살펴보았습니다. 이전 글에서는 별도의 CSS 파일을 만들지 않고 테마 함수 파일(functions.php) 내에서 코드를 입력하는 방법으로 워드프레스 기본 로그인 화면을 수정하는 방법을 설명했습니다.

워드프레스 기본 로그인 커스터마이징 코드 샘플

예를 들어 다음과 같은 간단한 코드를 함수 파일에 추가할 수 있습니다.

// 워드프레스 기본 로그인 페이지 커스터마이징
function my_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
display: none; // 워드프레스 기본 로고를 없앰. 새로운 로고로 대체하는 방법은 이 글을 참고하세요.
}
body.login.login-action-login {
background-color: #374433;
}

form#loginform {
border-radius: 10px;
}
body.login.login-action-login,
.login.login-action-register,
.login.login-action-lostpassword {
background: url(bakcground.jpg) no-repeat center center fixed!important; // 배경 이미지. 실제 사용할 배경 이미지 경로로 교체
-moz-background-size: cover!important;
-webkit-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
}

.login #backtoblog a, .login #nav a {
text-decoration: none;
color: #ffffff;
}

</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

그러면 로그인 페이지(예: www.example.com/wp-login.php)에 접속하면 다음과 비슷하게 로그인 페이지가 바뀝니다(배경은 임의로 지정한 것으로 적절한 배경으로 바꾸시기 바랍니다). 위의 코드를 테마 함수에 추가하는 방법은 이 글을 참고하세요.

Change login page in WordPress

글자 색상이나 박스 라운딩 등은 CSS 코드를 적절히 수정하셔서 조정하시면 됩니다. 그리고 “사용자명이나 이메일 주소”와 같은 문구도 “ID” 등으로 바꿀 수 있습니다. 이에 대한 내용은 워드프레스 회원가입 폼/로그인 폼에서 “사용자명”을 “아이디”로 바꾸기 글을 참고해보시기 바랍니다. 이외에도 로그인/등록 페이지와 관련하여 다양한 커스터마이징이 이 블로그에 수록되어 있습니다.

다른 방법

만약 로그인 폼을 새롭게 만들고 싶은 경우(예를 들어 별도의 플러그인을 사용하지 않고 사이드바에 로그인 폼을 넣고자 하는 경우, 또는 새로운 나만의 로그인 페이지를 만들고자 하는 경우) 다음 글을 참고해보시기 바랍니다.

링크된 글에서는 <?php wp_login_form(); ?>을 사용하여 새롭게 로그인 페이지를 만들고, 새로운 로그인 페이지를 만들었을 경우 발생할 수 있는 여러 가지 문제에 대응하여 적절히 수정하는 방법을 설명합니다. wp_login_form()에 대한 자세한 내용은 WordPress Codex 페이지개발자 페이지를 참조하십시오.

그리고 이 wpmudev 글에서는 CSS를 사용자 테마 함수에 넣는 대신 새로운 CSS 스타일시트를 만들어서 적용하는 방법을 설명하고 있습니다. 이외에도 “비밀번호를 잃어버렸나요” 링크와 “~로 돌아가기” 링크를 없애는 방법이 추가되어 있습니다. (사실 이런 내용은 맨 위의 코드에 적절한 CSS 코드를 삽입하여 쉽게 해결이 가능한 부분입니다.)

로고 URL 변경

이외에 유용한 코드로, 다음 코드를 사용하면 로고 URL을 변경할 수 있습니다. 워드프레스 로그인 페이지의 로고를 클릭하면 wordpress.org로 연결됩니다. 이 URL을 변경하는 방법이 이 블로그의 이 글에도 설명되어 있습니다.

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

위의 코드를 함수 파일(functions.php)에 추가하면 로고를 클릭하면 자신의 홈페이지로 이동합니다.

로그인 오류 메시지 표시되지 않도록 하기

로그인 오류 시 “유효하지 않은 사용자 이름” 또는 “사용자이름이나 이메일 주소가 올바르지 않습니다.” 같은 오류 메시지가 표시됩니다.  이 오류 메시지는 매우 유용하지만 해커에 의해 악용될 수 잇다고 하네요. 이런 점이 우려가 되면 로그인 에러(오류) 메시지가 표시되지 않도록 다음 코드를 사용할 수 있습니다.

function login_error_override()
{
return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

마치며

위에 설명한 방법에 따라 코드를 테마 함수 파일에 추가하고 수정하는 작업이 쉽지 않은 경우 적당한 플러그인을 사용하실 수 있습니다. 다양한 플러그인을 테스트하여 마음에 드는 것을 사용하시기 바랍니다. 유료 플러그인으로는 UserPro, UPME(User Profiles Made Easy) 등 여러 가지가 있습니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.