회원 기능 구현

qpress 2020년 3월 18일 103

워드프레스 회원 관련 플러그인 중 가장 대표적인 것이 ‘WP-members’와 ‘Ultimate Member’ 입니다. WP-Members는 파생적인 플러그인을 만들기 좋도록 되어 있어서 국내 워드프레스 회원 플러그인들이 이 플러그인에 기반하여 제작된 경우가 많습니다. Ultimate Member는 무료기능만으로도 기능과 완성도가 높아 전세계적으로 가장 많이 사용하는 플러그인입니다.

여기서는 초보자가 비교적 쉽게 이용할 수 있는 Ultimate Member의 사용법과, QPRESS 테마에 디자인 최적화 하는 방법을 설명하도록 하겠습니다.

Ultimate Member Plugin 설치

플러그인추가에서 ‘ultimate members’를 검색하여 설치합니다.

플러그인을 설치하면, 필요한 페이지 몇개를 생성해야 된다는 메시가 출력이 되는데, 생성 버튼을 클릭하면 자동으로 아래 그림과 같이 필수 페이지가 생성됩니다.

페이지들의 제목을 보면 쉽게 이해가 될 수 있을 것입니다. 각 페이지의 편집하기로 들어가 보면 해당 숏코드가 삽입 되어 있는 것을 볼 수 있습니다. 즉, 로그인 폼이라든지 회원가입 폼 등 각 기능을 출력하는 숏코드가 해당 페이지에 삽입 되어 있는 것입니다. 만약 내가 만든 별도의 페이지 내에 로그인 폼을 출력시키고 싶다면, 로그인 페이지 내에 있는 숏코드를 원하는 페이지로 복사하변 됩니다.

회원 관련 메뉴 만들기

생성된 각각의 페이지는 이용자가 회원가입, 로그인 등의 액션을 하기 위해 메뉴화 되어야 합니다. ‘테마 디자인’의 ‘메뉴’에 들어가서 생성된 페이지를 메뉴로 삽입 합니다. QPRESS 테마는 이를 위한 ‘Membership’아는 메뉴 위치를 별도로 지정하고 있습니다.

이렇게 메뉴에 추가를 하게 되면 아래 그림과 같이 각 페이지가 메뉴항목이 되는데, 이 메뉴들은 로그인된 사용자와 비로그인 상태의 사용자에게 각각 보이는 메뉴가 달라야 합니다. 그래서 각 메뉴 세부항목에서 아래와 같이 표시 되는 대상을 설정합니다. 즉, 로그아웃 메뉴는 로그인된 사용자에게만 보이도록 설정하고 회원가입 메뉴는 비로그인 상태의 이용자에게 보이도록 설정 하는 것입니다.

설정을 완료한 후 최종 메뉴 저장을 하게 되면, 회원 관련 메뉴가 사이트의 ‘Membership menu’ 위치에 버튼이 출력됩니다.

회원가입 양식 설정

초기 설치 시 기본 회원가입 폼은 아래 이미지와 같이 적용 되어 있습니다.

회원 가입 시 어떤 항목을 빼고 추가할지에 대한 설정은 관리메뉴의 ‘얼티밋멤버’ 메뉴의 ‘폼’ 메뉴에서 설정 할 수 있습니다. 이곳에서 회원가입폼 뿐만 아니라 프로필폼, 로그인폼 등도 설정 할 수 있습니다.

얼티밋 멤버 플러그인의 폼 설정 화면

디자인(스타일) 최적화

Ultimate Member Plugin은 무료버전에서도 다양한 설정 기능을 제공하고 있습니다. 대규모 플랫폼을 만드는 경우가 아니라면 중소형 사이트의 경우 대부분 이 플러그인 하나로 회원관련 기능이 충족 될 수 있습니다. 디자인 또한 어떠한 테마에도 무난히 어울리도록 되어 있는데, 색상, 버튼 모양 등 테마가 가진 일관성에 맞지 않는 부분은 해결할 필요가 있습니다. Ultimate Member이 주요 CSS 스타일을 변경하여 테마와의 일관성을 해결하는 것이 보편적인 방법인데, QPRESS 테마는 아래와 같이 Ultimate Member 전용 CSS 코드를 사용하면 됩니다.

.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
.um a.um-button,
.um a.um-button.um-disabled:hover,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:active {
    background: var(--main);
    color:var(--main-inverse);
}

.um .um-button.um-alt, .um input[type=submit].um-button.um-alt {
    background: #eeeeee;
    box-shadow: none;
}

.um .um-form input[type=text],
.um .um-form input[type=search],
.um .um-form input[type=tel],
.um .um-form input[type=number],
.um .um-form input[type=password],
.um .um-form textarea,
.um .upload-progress,
.select2-container
.select2-choice,
.select2-drop,
.select2-container-multi
.select2-choices,
.select2-drop-active,
.select2-drop.select2-drop-above {
    border: 1px solid var(--border-color) !important;
}

.um .um-form input[type=text]:focus,
.um .um-form input[type=search]:focus,
.um .um-form input[type=tel]:focus,
.um .um-form input[type=number]:focus,
.um .um-form input[type=password]:focus,
.um .um-form .um-datepicker.picker__input.picker__input--active,
.um .um-form .um-datepicker.picker__input.picker__input--target,
.um .um-form textarea:focus {
    outline: none!important;
    border-color:rgb(26, 140, 255)!important;
    box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.25)!important;
    z-index:99999999999!important;
}

.um input[type=submit].um-button:hover, .um a.um-button:hover {
    background-color: var(--main);
    box-shadow:1px 1px 50px 50px rgba(0,0,0,0.4) inset;
    color:#fff;
}

위의 CSS 코드를 ‘테마 디자인>사용자 정의하기’의 추가 CSS 영역에 삽입 하시면 QRPRES 테마의 스타일이 적용 됩니다.

QPRESS 테마 스타일로 변경