워드프레스 로그인 위젯 - wodeupeuleseu logeu-in wijes

이번시간에는 워드프레스로 사이트를 만들 때 로그인 / 로그아웃 기능을 적용하는 방법에 대하여 설명하도록 하겠습니다. 우선 이 기능은 워드프레스 위젯에서 기본으로 제공하고 있습니다. 로그인, 로그아웃은 이렇게 위젯을 이용할 수도 있고 사이트 주소 뒤에 /wp-admin(또는 /wp-login.php)를 입력하여 사용할 도 있습니다.

​

하지만 만약 좀 더 전문적인 사이트를 만들고자 한다면 워드프레스 기본 로그인, 로그아웃 디자인이 안 어울릴 수도 있습니다. 이 위젯은 디자인은 기본 디자인이라 아래와 같이 근사한 디자인을 사용하고자 하는 분들께는 많은 수정이 필요할 수 있죠.

이번시간에는 워드프레스 기본 기능의 로그인, 로그아웃을 사용하는 대신 위와 같은 디자인을 가지는 로그인 로그아웃 버튼을 만들어 사용하는 방법에 대하여 포스팅하도록 하겠습니다.

얼티밋 멤버 설치

먼저 일티밋 멤버 플러그인을 설치하도록 합니다. 이 플러그인은 무료와 유료 버전이 있는데 무료 버전에서 제공하는 기능만으로도 충분히 훌륭한 기능을 사용할 수 있습니다.

얼티밋 멤버 플러그인은 이미 전세계 많은 사용자들이 사용하는 회원관리로 유명한 플러그인입니다. 이 플러그인을 사용하여 다른 모양의 로그인, 로그아웃 기능을 적용하려 합니다.

결론적으로 얼티밋 플러그인을 통하여 아래와 같은 디자인을 같은 로그인 화면을 구성할 수 있습니다.

또한 얼티밋 멤버 플러그인에서는 로그인 및 로그아웃 기능 외에 회원가입, 회원별 등급 관리, 등급 별 권한 관리, 회원 정보 관리, 비밀번호 초기화 등 필요한 추가 기능을 선택하여 워드프레스 사이트에 적용할 수 있습니다.

로그인/로그아웃 기능 적용

플러그인을 설치 후 제공하는 기능이 적용될 페이지가 필요하다는 메세지가 발생합니다. 별도로 페이지를 만들어 적용할 수도 있지만 번거롭기 때문에 메세지에서 표시되는 문구를 클릭하여 자동으로 진행되도록 합니다.

문구를 클릭하면 필요한 각페이지들이 자동으로 생성되고 각 기능별 페이지가 또한 자동으로 매핑됩니다. 매핑된 페이지를 확인해 보면 'UM xxx'라는 문구가 페이지 별로 이름 우측에 표기됩니다.

이 중 로그인, 로그아웃 페이지를 확인합니다. 이 두개의 페이지를 메뉴에 적용하면 로그인 및 로그아웃 메뉴를 페이지에 표기하여 사용할 수 있습니다. 사용자들은 로그인 버튼을 눌러 얼티밋 멤버에서 제공하는 특별한 디자인의 로그인 화면을 볼 수 있습니다.

메뉴에 로그인 로그아웃 설정

자동으로 만들어진 로그인, 로그아웃 페이지를 메뉴에 설정합니다. 설정 후 추가 옵션을 지정하여 로그아웃 사용자는 로그인 버튼만, 로그인 사용자는 로그아웃 버튼만 보여지도록 설정합니다. 이유는 로그인 사용자가 또 다시 로그인 버튼이 보여지게 된다면 기능적으로 헷갈려 할 수 있기 때문이죠.

이렇게 메뉴에 적용한 후 저장을 클릭하면 최종적으로 로그인, 로그아웃 기능의 버튼이 메뉴에 적용되어 사이트에 표시되게 됩니다. 혹시 만약 워드프레스에 메뉴를 적용하는 방식이 궁금하다면 아래 포스팅을 참조하시면 됩니다.

https://funfundata.tistory.com/entry/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%83%81%EC%84%B8

​

또한 얼티밋 멤버의 자동으로 생성된 페이지를 실수로 삭제하여 수동으로 만들어야 한다면 아래 포스팅을 참조하세요.

​

워드프레스 회원가입 및 관리 플러그인 - 얼티밋 멤버

​

이번 시간에는 얼티밋 멤버 플러그인을 통해 로그인과 로그아웃 기능을 적용하고 꽤 근사한 디자인의 로그인 폼을 사용하여 사이트에 적용하는 방법에 대해 포스팅하였습니다.

​

#로그아웃기능 #로그인기능#얼티밋멤버#워드프레스#워드프레스로그인로그아웃설정

메뉴 작성과 위젯 설정은 유사한 방법으로 설정합니다.

위젯(Widget)이란? 워드프레스의 위젯은 부가 정보를 보여주는데 사용됩니다. 고정된 위치에 위젯을 위치시키는데요. 

위젯은 위젯이 위치할 수 있는 위젯영역에 들어갈 수 있습니다. 대표적으로 사이드바라고 하는 것이 위젯영역의 하나입니다. 

반응형 테마의 경우 모바일 환경에서는 사이드바가 본문영역보다 아래로, 또는 왼쪽에 숨겨져있다가 버튼을 클릭해서 나타나는 방식으로 숨겨지게 됩니다. 스마트폰에서는 화면이 좁으니까요.

사용방법은 워드프레스 메뉴바의 하단에서 “위젯”을 선택하면 상기 화면이 출력됩니다.

위젯모음에서 사이트에 배치하기를 원하는 “위젯”을 선택하여 오른쪽 “사이드바 배치”에 순서대로 마우스로 끌어다가 배치를 합니다. 그러면 사이드바에 배치된 모양대로 오른쪽, 혹은 스마트폰에서는 하단에 배치되어 출력됩니다.

원하는 위젯은 사이드바에 출력되기를 원하는 명칭으로 상기와 같이 수정합니다.

갤러리 위젯의 경우 아래와 같이 “갤러리편집”을 클릭하여, 원하는 사진들을 선택하여 등록합니다. 등록 완료 후 저장을 하면 사이드바에 갤러리 위젯 설정이 완료됩니다. 갤러리의 사진들을 필요시 수시로 갱신을 하면 됩니다.

전 사이드바 타이틀을 별도로 지정을 하지 않았는데, 각자의 편의대로 “최근 사진” 등과 같이 명칭을 지정하셔도 됩니다.

그러면 완료된 사이드바는 사이트 접속을 하여 확인하면 아래와 같이 출력됩니다.

다른 방법으로 위젯을 변경할 수도 있습니다.

워드프레스의 메뉴에서 “사용자정의하기”를 클릭하시면 화면을 보시면서 쉽게 수정이 가능합니다.

먼저 해당 메뉴에 접속하면 아래와 같이 화면이 출력됩니다.

먼저 위젯 외의 메뉴 설정을 설명하겠습니다.

 “사이트 아이덴티티”에서는 블러그의 명칭과 설명하고, 사이트 로고를 갖고 계신 분은 반영할 수 있습니다.  또한 모바일에서 사용할 아이콘도 선정이 가능합니다.

 “색상” 메뉴에서는 상단 헤더 부분의 헤더글 색상과 등록글 하단의 작은 글(작성자 및 작성일자 표시 문구)의 색상을 지정할 수 있습니다.  

 “헤더 이미지”에서는 소유하고 계신 사진을 활용하여 상단 헤더의 분위기를 연출이 가능합니다. 

상기 화면의 위젯을 클릭하면 “사이드바”를 선택하여 수정할 수 있는 화면으로 이동하여 아래와 같이 작업이 가능합니다.

앞서 위젯 메뉴에서 설명한 것처럼 원하는 모양의 순서를 배치하여 설정할 수 있고, 원하는 위젯을 추가할 수 있습니다. 작업을 진행 한 후 꼭 “발행됨”을 클릭하여 저장 및 최종 종료 설정을 하시길 바랍니다.

메뉴의 배치도 위젯의 배치와 동일한 방법으로 하면 됩니다. 워드프레스 “메뉴”를 클릭하면 아래 화면이 출력됩니다.

추가가능 리스트에서 상위메뉴를 선정하고, 하위 메뉴를 리스트에서 선택하여 “추

가” 한 후에, 마우스로 클릭하여 우측으로 상위메뉴보다 옮겨 주면 됩니다.

마지막으로 “메뉴저장”을 클릭하여 마무리하시면 모든 작업이 종료됩니다.

메뉴구조가 상기 화면 처럼 출력되었다고, 그대로 위젯처럼 배치가 되는 것은 아닙니다. 테마에 따라 메뉴바 설치 위치에 본인이 작업한 순서가 반영되는 것입니다.

제 사이트의 테마는 상기 화면 처럼 출력됩니다. 마우스를 블로그에 위치하면 하위 메뉴가 출력되는 형태입니다. 참고하시길 바랍니다. 또한 스마트폰에는 하단의 그림과 같이 출력됩니다.

연습삼아서 배치 수정 배치하셔도 내용에 변형이 발생하지 않으니, 여러번 테스팅하시길 바랍니다.