템플릿 사용 준비사항
아래 순서에 따라 회원관리 페이지를 설정하는 예시를 설명합니다. 로그인 페이지 역시 이와 동일합니다. 이 섹션 하단의 동영상을 함께 참고해 주세요.
로그인 상태에서도 양식을 볼 수 있도록 변경
관리자 권한으로 회원가입 페이지에 쇼트코드를 삽입하면 이미 로그인되어 있어 양식이 표현되지 않습니다. functions.php 혹은 Code Snippets 플러그인을 통해 필터를 추가하여 로그인 상태에서도 양식이 표현될 수 있도록 변경합니다. 실제 서비스 시에는 해당 필터를 삭제해도 좋습니다. 이 필터는 회원가입 양식에서만 작동하며 로그인 양식은 해당하지 않습니다. 로그인 양식의 경우는 보안상의 이유로 브라우저에서 별도의 새 시크릿 창을 띄워서 작업해야 합니다.
로그인 / 회원가입 페이지 만들기
- Ultimate Member 플러그인을 설치하고 활성화.
- Ultimate Member의 로그인 혹은 회원관리 폼에 해당하는 쇼트코드를 복사.
- 다운로드 받은
jetcraft-agent-um-login.json혹은jetcraft-agent-um-regist.json파일을 관리자 메뉴 → Templates에서Import Templates버튼으로 Import. - 템플릿의 기존 쇼트코드를 이전에 복사한 코드로 변경하고 저장.
- 워드프레스 페이지에서 새로운 페이지를 작성.
Template Widget을 사용해 다운로드 받은 엘리멘터 템플릿을 지정.- 페이지 성격에 맞게 컨테이너 혹은 페이지 여백을 설정.
- Ultimate Member 설정에서 로그인 혹은 회원관리 페이지를 05.에서 작성한 페이지로 설정.
* 템플릿이나 페이지 편집화면에서 쇼트코드의 양식이 나타나지 않을 경우 각종 패널을 토글하면 제대로 나타납니다. 엘리멘터에서 스크립트를 사용자의 액션 이후에 지연실행 시킴에 따라 발생하는 버그입니다.
템플릿 고급 설정
다운로드 받은 템플릿에는 Ultimate Member 기본 양식에 대한 스타일이 정의되어 있으므로 기본적으로는 수정할 필요가 없습니다. 아래에 기술하는 내용은 양식을 좀 더 세부적으로 조정할 수 있는 부가적인 방법에 대한 설명입니다.
엘리멘터 편집 화면에서 키보드의 Control + i 혹은 Command + i 키를 눌러 Structure 패널을 항상 열어두세요.
스타일 수정
양식의 전체 스타일은 Style - for Ultimate Member레이어의 Custom CSS 필드에 정의되어 있습니다. 스타일은 크게 세 영역으로 나누어져 있습니다.
-
지역변수 모음
여기에는 Jetcraft의 컬러셋 색상을 오버라이드 하는 부분과 사용자에 의해 변경 가능성이 큰 스타일에 대한 지역변수를 정의하고 있습니다.
-
Ultimate Member 메인 컬러
Ultimate Member의 기본 푸른 색 버튼이나 링크 색상을 변경하도록 공식 사이트에서 제공하는 스타일이 정의되어 있습니다.
-
Ultimate Member 양식 스타일
Ultimate Member 전체 스타일이 정의되어 있습니다. 지역변수에서 다루지 않은 부분은 이곳에서 직접 변경할 수 있습니다.
개인정보 보호정책 블록의 수정
위치 변경
Ultimate Member의 폼 편집화면에서 개인정보 보호정책을 토글할 수 있도록 설정하면 기본적으로 양식의 하단에 위치합니다. Jetcraft 템프릿에서는 이 위치를 최상단으로 변경합니다. 위치를 본래의 위치(최하단)으로 변경하려면 앞서 설명한 스타일의 지역변수 --jetcraft-um-privacy-order: -1의 값을 0 혹은 initial로 변경합니다.
체크박스 아이콘 변경
체크박스 아이콘은 지역변수의 --jetcraft-um-checkboxIconBefore와 --jetcraft-um-checkboxIconAfter의 값을 변경합니다. 이 링크를 통해 원하는 아이콘 코드로 변경합니다.
애니메이션 레이블
특정 필드그룹의 레이블을 애니메이션 형태로 변경할 수 있습니다. Ultimate Member의 폼 편집화면에서 아이디 및 비밀번호와 같은 필수 입력필드가 있는 Master Row에 row-main 클래스를 지정하면 해당 필드그룹은 애니메이션 레이블이 활성화 되었을 때 하나의 그룹으로 묶입니다.
이후, 엘리멘터 템플릿에서 쇼트코드 레이어에 label-animation 클래스를 추가하면 됩니다. 자세한 방법은 하단 영상을 참고하세요.
*애니메이션 레이블이 의도하지 않은 형태로 작동한다면, Ultimate Member 양식 편집화면에서 해당 필드(아이디 혹은 비밀번호 필드)의 Edit Field 버튼을 눌러 Placeholder 필드에 아무 값이나 입력하세요. 애니메이션 레이블은 자바스크립트 없이 CSS의 ::placeholder-shown 속성을 사용합니다.
템플릿 CSS 스타일 수정
- Jetcraft의 템플릿은 공통된 방식으로 CSS 스타일을 수정할 수 있습니다. 자세한 내용은 템플릿의 스타일을 관리하는 방법 게시물을 참고해 주세요.
- 엘리멘터가 CSS를 처리하는 원리에 대해 이해하면 템플릿과 위젯의 CSS를 보다 장기적의고 체계적으로 관리할 수 있습니다. 엘리멘터 사용에 익숙해 졌다면 엘리멘터 위젯과 템플릿을 효과적으로 관리하는 법 블로그 게시물을 통해 보다 효율적으로 스타일을 관리하세요.