얼티밋 멤버 로그인 페이지에 로그인 폼만 표시되도록 하기 (feat. GeneratePress)

Last Updated: 2024년 06월 14일 댓글

워드프레스로 멤버십 사이트를 운영하려는 경우 Ultimate Member나 WP-Members와 같은 회원제 플러그인을 사용할 수 있습니다. 멤버십 플러그인을 사용하여 모든 콘텐츠 또는 특정 콘텐츠를 회원만 접근하도록 제한할 수 있습니다.

얼팃밋 멤버(Ultimate Member) 플러그인에서 전체 콘텐츠 또는 특정 페이지를 로그인 사용자만 접근하도록 액세스 제한 설정을 할 경우, 비로그인 사용자가 제한된 콘텐츠에 접근하려고 시도하면 로그인 페이지로 이동하게 됩니다.

로그인 페이지에 로그인 폼만 표시되도록 하려는 경우 테마의 기능을 사용하거나 CSS를 사용하여 불필요한 요소를 숨기거나 제거할 수 있습니다. 이 글에서는 GeneratePress 테마에서 얼티밋 멤버의 로그인 페이지에 로그인 폼만 표시되도록 하는 방법에 대하여 살펴보겠습니다. 다른 테마를 사용하는 경우 비슷한 방법으로 접근할 수 있습니다.

얼티밋 멤버 로그인 페이지에 로그인 폼만 표시되도록 하기 (feat. GeneratePress)

Ultimate Member 액세스 제한 설정

회원만 사이트에 접근할 수 있도록 제한하려는 경우 워드프레스 관리자 페이지 » 얼티밋 멤버 » 설정 » 액세스 탭에서 글로벌 사이트 액세스 옵션을 "로그인된 사용자가 접근 가능"으로 지정하면 됩니다.

Ultimate Member (UM) 플러그인은 한글화가 잘 되어 있어서 사용하는 데 큰 어려움은 없으리라 생각됩니다.

홈페이지를 접속 가능하도록 허락 옵션을 체크하여 활성화하면 홈페이지(전면 페이지)는 누구나 접근할 수 있게 됩니다.

또한, 다음 URL 제외에서 새 URL 추가 버튼을 클릭하여 예외 URL을 지정할 수 있습니다.

특정 페이지나 게시글에만 접속을 제한하고 싶은 경우에는 글로벌 사이트 액세스 옵션에 누구나 접근할 수 있는 사이트를 선택하고, 접근을 제한할 페이지나 게시글 편집 화면에서 엑세스 제한을 설정할 수 있습니다.

예를 들어, 다음과 같이 설정하면 로그인 사용자만 해당 페이지나 게시물을 볼 수 있습니다.

  • "이 게시물에 대한 액세스를 제한하시겠습니까?" 체크박스 선택
  • "누가 이 게시물에 접근할 수 있나요?"에 로그인한 사용자 선택

UM 로그인 페이지에 로그인 폼만 표시되도록 하기

얼티밋 로그인 페이지에 로그인 폼(Login Form)과 함께 헤더, 메뉴, 페이지 제목, 사이드바, 푸터 등의 요소들이 표시될 수 있습니다.

로그인 페이지에 표시되는 요소들은 테마나 엘리멘터와 같은 페이지 빌더에서 제어될 수 있습니다.

엘리멘터가 설치된 경우 페이지 템플릿을 엘리멘터 캔버스(Elementor Canvas)로 선택하면 헤더, 푸터 등의 모든 요소가 제거됩니다.

GeneratePress 테마 유료 버전을 사용하는 경우에 헤더, 사이트 제목, 사이드바, 푸터 등의 요소들을 모두 비활성화할 수 있습니다.

디자인 » GeneratePress로 이동하여 모듈(Modules) 섹션에서 Disable Elements 모듈을 활성화합니다.

그런 다음, 페이지 편집 화면에서 사이드바 레이아웃(Sidebar Layout)No Sidebars로 선택하고 Disable Elements에서 헤더, 내비게이션, 콘텐츠 타이틀(페이지 제목), 푸터 등의 요소를 체크합니다.

변경 사항을 저장한 다음, 얼티밋 멤버 로그인 페이지에 접속하면 로그인 양식만 표시될 것입니다. 로그인 폼이 화면의 정 가운데에 위치하도록 조정하고 싶은 경우에는 디자인 » 사용자 정의하기 » 추가 CSS에 다음과 같은 CSS 코드를 추가할 수 있습니다.

/* Ultimate Member 로그인 페이지에 로그인 폼을 화면 가운데에 위치하도록 설정하기 */

body.page-id-29685 .site-main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

body.page-id-29685 .site-main article {
    width: 100%;
    max-width: 800px; /* Ensures a maximum width */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-id-29685 .inside-article {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

페이지 ID는 적절히 변경하도록 합니다. 이제 확인해보면 로그인 폼만 표시되고, 로그인 폼이 화면 가운데 위치할 것입니다.

로그인 폼을 약간 위로 이동시키고 싶은 경우 min-height: 100vh; 라인을 적절히 수정합니다. 예를 들어, 100vh를 85vh로 변경하면 로그인 입력 필드 박스가 약간 위로 이동하게 될 것입니다. CSS에서 100vh 단위는 뷰포트(Viewport) 높이의 100%를 의미합니다.

참고


댓글 남기기

Leave a Comment