워드프레스로 웹사이트나 웹서비스를 제작할 경우 사용자 로그인과 회원가입 페이지를 만들어야 할 경우가 종종 있습니다. 물론 워드프레스가 기본으로 로그인 페이지와 회원등록 페이지를 제공하기는 하지만 아무래도 워드프레스가 CMS(컨텐츠 관리 시스템)에 초점이 맞춰져 있다 보니 통상적인 웹사이트나 웹서비스에서 보이는 로그인/회원가입 페이지들과는 UI가 조금 다르기 때문에 곤란을 겪게 되곤 합니다.
그림1. 워드프레스 기본 로그인 페이지
그림2. 워드프레스 기본 회원등록 페이지
물론 워드프레스는 기본 로그인 폼의 모양을 바꿀 수 있는 방법을 제공하기 때문에 간단히 로고를 변경한다거나 배경화면을 바꾸는 등의 조작이라면 굳이 별도의 페이지를 만들지 않더라도 어렵잖게 처리할 수 있습니다. 그렇지만 회원등록(회원가입) 페이지의 경우는 조금 다릅니다. 워드프레스가 기본으로 제공하는 양식 외에도 회원가입 시에 사용자 이름이나 전화번호 혹은 간단한 프로필 같은 추가적인 정보를 받아야 할 경우도 많습니다. 이럴 경우에는 워드프레스의 로그인/회원가입 페이지를 커스터마이징해야 합니다.
워드프레스에 커스텀 로그인 페이지나 회원가입 페이지를 추가하는 방법에는 여러 가지가 있고 워드프레스에서도 표준적인 방법을 제공하지만, 여기서는 그 중 가장 간단하면서도 통상적으로 많이 쓰는 방법 중 하나인 Theme My Login (이하 “TML”) 플러그인을 이용한 방법을 소개합니다.
Theme My Login
TML을 설치하고 활성화시키면 다음과 같이 5개의 페이지가 새로 워드프레스에 추가되는 것을 확인할 수 있습니다. 이 페이지들은 TML이 자동으로 생성한 커스텀 페이지들로서 앞으로 로그인/회원가입 시에 기본 페이지 대신 사용되게 될 페이지들입니다.
그림3. TML이 생성한 템플릿 페이지들
이걸루 끝입니다. 이제 워드프레스에 로그인하거나 새로 회원가입을 하려 할 때 워드프레스가 기본으로 제공하는 로그인/회원등록 페이지가 아닌 TML이 제공하는 로그인/회원가입 페이지가 표시됩니다.
그림4. TML 커스텀 로그인 페이지
그림5. TML 커스텀 회원가입 페이지(기본값)
내부적으로 TML은 워드프레스의 Custom Fields 기능과 template_redirect 훅을 이용하여 커스텀 로그인을 처리합니다. 기본 원리는 ‘_tm_action‘ 이라는 커스텀 필드값을 TML이 생성한 각각의 페이지 속에 추가해 두고 template_redirect 단계에서 이 값을 체크하여 분기를 처리하는 방식입니다. 또한 TML은 기본으로 생성한 5개의 페이지 템플릿 각각에 대해 사용자만의 고유한 커스텀 템플릿을 추가할 수 있는 방법도 제공합니다.
여기서는 앞서 만든 TML 회원가입 페이지에 사용자 이름을 입력받는 부분을 추가하고 회원가입 시 비밀번호를 설정하는 방법도 이메일 방식이 아닌 가입시 비밀번호 설정 방법으로 변경해 보기로 하겠습니다. 우선 비밀번호 설정 방법의 변경입니다. 이 부분은 TML이 기능을 제공하고 있게 때문에 대시보드의 TML 설정 페이지에서 다음과 같이 옵션만 체크하면 바로 적용이 됩니다.
그림6. TML 커스텀 비밀번호 방식 설정
다음으로 사용자 이름을 입력받는 부분을 추가해 보기로 하겠습니다. TML은 커스텀 템플릿 기능을 제공하기 때문에 간단하게 처리할 수 있습니다. 워드프레스에서 TML이 설치된 플러그인 폴더(wp-content/plugins/theme-my-login)에서 templates/ 폴더 아래에 있는 register-form.php 파일을 복사하여 현재 사용중인 테마가 위치한 디렉터리에 붙여 넣습니다. 그런 다음 이 복사한 템플릿 파일 속에 아래와 같이 필요한 필드를 추가하면 됩니다.
<p>
<label for="first_name<?php $template->the_instance(); ?>"><?php _e( 'First name', 'theme-my-login' ) ?></label>
<input type="text" name="first_name" id="first_name<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'first_name' ); ?>" size="20" tabindex="20" />
</p>
<p>
<label for="last_name<?php $template->the_instance(); ?>"><?php _e( 'Last name', 'theme-my-login' ) ?></label>
<input type="text" name="last_name" id="last_name<?php $template->the_instance(); ?>" class="input" value="<?php $template->the_posted_value( 'last_name' ); ?>" size="20" tabindex="20" />
</p>
이제 다시 회원가입 페이지를 보면 회원가입 페이지가 다음과 같이 변경된 것을 확인할 수 있습니다.
그림7. TML 커스텀 회원가입 페이지(커스터마이징)
이렇게 템플릿에 새로 필드를 추가하는 방식으로 간단하게 회원가입 페이지를 커스터마이징할 수 있습니다. 여기서는 회원가입 페이지를 변경하는 방식만 소개했지만 로그인 페이지를 포함 기타 TML이 제공하는 5가지 템플릿 모두 이 방식으로 변경 가능합니다. 또한 TML은 페이지 속에 사용할 숏코드(shortcode)도 제공하기 때문에 숏코드를 이용하여서도 템플릿을 커스터마이징할 수 있습니다.TML 플러그인의 커스터마이징 및 사용법에 대한 더 자세한 내용은 TML 문서를 참조하면 됩니다.
여기서는 TML 플러그인을 이용하여 커스텀 로그인/회원가입 페이지를 만드는 방법을 소개했지만 워드프레스에 커스텀 로그인/회원가입을 추가하는 방법은 TML 말고도 여러 방법들이 있습니다. 워드프레스가 제공하는 기본 기능들만을 이용하여서도 가능한 방법들이 있고 또 User Meta 플러그인이나 User Frontend 같은 다른 플러그인들도 유사한 기능을 제공합니다. 워드프레스로 멤버십 사이트를 만들어주는 WP-Members 플러그인이나 Ultimate Member 같은 플러그인에도 커스텀 로그인/회원가입 기능이 내장되어 있으니 참고하세요! 🙂
0 thoughts on “워드프레스에 커스텀 로그인/회원가입 추가하기”