gazette-featured-content-thumbnail

[워드프레스로 모임서비스 만들기] 3. 사용자 로그인하기

지난 시간에는 사용자가 사이트에서 직접 모임을 개설할 수 있는 ‘새 모임 만들기’ 기능을 만들어 보았습니다. 다만 지난 시간에 만든 기능은 사용자가 로그인했는지 여부와 상관없이 작동합니다. 그런데 실제 서비스에서라면 어떤 사용자가 모임을 개설하기 전에 먼저 그 서비스에 로그인하는 절차가 있어야 할 것입니다.

물론 워드프레스에서는 사용자 등록(registration)과 인증(authentication) 관련 기능을 기본으로 제공합니다. 그렇지만 워드프레스가 제공하는 기본 UI는 워드프레스를 블로깅이나 CMS로 사용하는 경우에 맞춰져 있어 지금과 같이 웹서비스에서 사용하기에는 조금 아쉬운 점이 있습니다. 여기서는 사용자 등록과 로그인에 관련한 UI를 서비스에 맞게 커스터마이징해 보기로 하겠습니다.

만들 내용

사용자가 ‘새 모임 만들기’를 클릭했을 때 아직 로그인하지 않은 사용자라면 아래 그림과 같이 로그인 화면이 먼저 표시됩니다. 이어 사용자가 자신의 ID와 Password로 로그인하면, 이전처럼 새 모임을 만들 수 있습니다.

그림1. 사용자 로그인

준비물

다음 1개의 플러그인이 필요합니다. 설치하지 않으셨다면 지금 설치하면 됩니다. (설치 방법은 생략)

  • Theme My Login 사용자 등록 및 로그인 기능의 커스터마이징에 사용

TML과 사용자 로그인 처리

우선 워드프레스 사이트를 사용자 로그인이 가능한 사이트로 설정해야 합니다. 어드민 대시보드 > 설정 메뉴로 가서 다음과 같이 ‘멤버쉽’ 메뉴를 체크하고 ‘새 사용자를 위한 기본 규칙’을 할당합니다. 여기서는 사용자가 모임을 만들고 또 첨부파일(대표 이미지)도 업로드할 수 있어야 하기에 “글쓴이(Editor)” 권한을 지정했습니다.

그림2. 사이트 멤버쉽 설정

완료되었으면 이제 Theme My Login 플러그인(이하 ‘TML’)을 설치합니다. TML을 설치하면 다음과 같이 페이지(Pages) 메뉴에 새로 몇 개의 페이지가 추가되는 것을 확인할 수 있습니다. 이 페이지들이 TML이 생성하는 커스텀 페이지들입니다. 이제 사용자 등록과 로그인에 관련된 페이지들은 이들 커스텀 페이지들이 워드프레스의 기본 페이지를 대체합니다.

그림3. TML이 생성한 커스텀 페이지

로그인한 사용자만 쓸 수 있어요!

사용자 등록 및 로그인 처리와 관련해서는 TML만 설치하면 나머지는 TML이 대부분 “알아서” 처리해 주기 때문에 추가로 해야할 일이 많지 않습니다. 다만 TML이 처리할 수 없는 몇몇 부분에 대해서는 마무리 작업이 필요합니다. 그 중 하나가 로그인한 사용자만 모임을 만들 수 있도록 하는 부분입니다. 즉, 사용자가 ‘새 모임 만들기’ 버튼을 클릭하였는데 아직 로그인하지 않은 경우라면 우선 먼저 로그인 페이지로 가게 만들고, 사용자가 로그인한 경우만 모임을 개설할 수 있도록 합니다.

설명은 복잡하지만 구현은 간단합니다. 지난 시간에 만든 템플릿 파일(new-moim.php의 맨 윗 부분에 다음과 같이 PHP 코드 한 줄만 추가하면 됩니다. 짐작하듯, 이 코드는 사용자의 로그인 여부를 검사하여 로그인하지 않은 사용자인 경우 로그인 페이지로 분기(redirect) 시키는 간단한 코드입니다.

if ( !is_user_logged_in() ) { wp_redirect( wp_login_url() ); exit; }

이제 사이트에서 ‘새 모임 만들기’를 테스트 해 보면, 로그인한 경우에만 다음과 같이 모임 만들기를 할 수 있음을 확인할 수 있습니다.

그림4. 로그인 후 새 모임 만들기

어드민 막대 숨기기

다만 한 가지 아쉬운 점이 있다면, 위 그림에서 보듯, 사용자가 로그인한 경우 워드프레스의 어드민 막대(admin bar)가 화면 상단에 늘 표시되는 점입니다. 사이트를 좀 더 “웹서비스 스럽게” 만들려면 이 부분은 보이지 않게 숨기는 게 좋을 듯 합니다. 여러 방법이 있지만, 여기서는 테마 속 functions.php 파일에서 다음과 같이 코드를 추가하여 처리하기로 하겠습니다. 코드 내용은 사용자가 어드민(admin)이 아닌 경우 어드민 막대를 보이지 않게 하는 것입니다.

// Hide admin bar if user is not admin
add_filter( 'show_admin_bar' , 'my_function_admin_bar' );
function my_function_admin_bar(){
    return current_user_can( 'manage_options' );
}

이제 사용자는 통상적인 웹서비스에서와 비슷한 경험으로 이 사이트에 접속하여 모임을 만들 수 있게 되었습니다. 대부분의 작업은 TML이 처리해 주었기 때문에 오늘 소개할 내용은 비교적 간단하게 끝이 났습니다.

다른 방법들

워드프레스로 웹애플리케이션이나 웹서비스를 만들 경우 사용자를 등록하고 로그인하는 부분은 약방의 감초처럼 늘 따라붙는 기능입니다. 여기서는 TML을 사용하여 간단하게 처리하였지만, 시중에는 이 부분을 처리하는 좋은 솔루션들이 여럿 나와 있습니다. 그리고 그 종류나 기능들도 아주 다양합니다. 그 중 몇 가지만 소개하면 다음과 같습니다.

사용자 프로필 빌더(User Profile Builder)

사용자 등록과 로그인을 포함, 특히 사용자 프로필 관리 부분에 특화된 플러그인들로 다음과 같은 것들이 있습니다.

폼 빌더(Form Builder)

워드프레스에서 커스텀 폼을 작성할 수 있게 해주는 GravityForms나 Formidable Pro 같은 폼 빌더 플러그인들도 확장기능(Add-On)을 통해 커스텀 등록과 로그인 폼 등을 지원하는 경우가 많습니다.

멤버십(Membership) 플러그인

멤버십 기능을 제공하는 플러그인들 중에도 사용자 로그인이나 프로필을 지원하는 플러그인들이 많이 있습니다.

그 밖의 솔루션들

그 밖에도 User MetaWP User Frontend 플러그인에도 유사한 기능이 포함되어 있습니다.

이 많은 솔루션들 중에 굳이 TML을 사용한 이유는 이게 다른 추가적인 기능 없이 오로지 사용자 로그인 처리만을 다루고 있는 솔루션이기 때문이고 또한 비교적 간단하게 사용할 수 있고 커스터마이징도 용이한 솔루션인 탓입니다. 그렇지만 만약 TML 만으로는 부족한 경우라면 앞에서 소개한 다른 솔루션들도 검토해 보시면 좋을 듯 싶습니다.

TML의 사용법과 TML을 커스터마이징하는 방법은 워드프레스에 커스텀 로그인/회원가입 추가하기TML 공식 문서를 참고하면 됩니다.

오늘은 여기까지입니다.

다음 번에는 사용자가 모임에 참가신청을 할 수 있는 기능을 추가해 보려고 합니다. 많은 관심 부탁 드립니다. 🙂


* 이 연재에서 사용한 전체 소스코드는 여기에서 내려 받을 수 있습니다.

“[워드프레스로 모임서비스 만들기] 3. 사용자 로그인하기”에 대한 0개의 생각