본문 바로가기

공부하자/워드프레스

워드프레스 팝업 로그인창 만들기


지난 포스팅에 올렸던 회원 프로필 사진업로드는

아직까지 해결되지 않고 있다ㅠㅠ

서포터페이지가서 이거저거 하라는대로 다 시도해봤지만

전부 실패.. 도대체 뭐가 문제인지 시간만 잡아먹고 짜증나서..

크게 중요한건 아니니깐 뒷전으로 미루기로 했다


다음으로 구현하고 싶었던게 메뉴에 로그인 로그아웃을 만들고

로그인을 눌렀을때 팝업 로그인창이 뜨도록 하는것!


우선 플러그인에서 팝업메이커를 검색해 설치해준다


워드프레스 관리자페이지에 팝업메이커 설정이 생겼다

오른쪽은 이미 연습삼아 만들어본 팝업이고

Add Popup으로 신규생성을 해본다


로그인 팝업을 만들계획이므로 우선 해야할것이

지난번 만들어 두었던 Ultimate Member에서 로그인페이지의 숏코드를 복사해온다


다시 팝업 생성으로 돌아와,

제목에는 팝업상단에 무슨 멘트를 넣을것인지 적으면되고

본문에는 방금전 복사했던 숏코드를 붙여넣기 해준다


그리고 아래로 내리면 트리거 생성이 있는데

클릭 했을 때 팝업을 띄울것이냐, 페이지에 접속하면 자동으로 뜨게할것이냐,

둘중 하나를 선택하는듯하다


메뉴에서 로그인을 눌렀을시 보이게 할꺼니깐 Click Open으로 선택


위와 같은 창이 뜨는데 쿠키는 뭐.. 팝업이 닫히는 조건인건지

일반적으로 홈페이지들을 보면 "오늘 하루동안 열지않기" 이런걸 설정하는것 같은데

로그인 팝업은 클릭할 때마다 보여줘야하니깐 쿠키생성은 생략해버렸다


또 밑으로 내려 설정들을 보면 팝업창의 크기를 설정해주는데

이건 그냥 소형만 바꿔주고 나머진 기본세팅으로 뒀다


요기는 팝업의 위치를 정하는 곳,

로그인메뉴가 아무래도 홈페이지 우측 상단에 위치해있으니깐

팝업은 Login을 눌렀을 시 왼쪽 하단에 뜨도록 하고 위치는 고정으로 설정!


첨엔 Close라고 되어있는데..

난 또 팝업창에 닫기버튼을 텍스트로 표기하라는 줄 알고 저렇게 써놨구만..

다른설정인가보다ㅋㅋㅋ


아래는 Esc를 눌러도 닫힐 수 있도록 체크


 이제 거의 다왔다 워드프레스 외모에서 메뉴생성으로 이동

LOGIN 그리고 LOGOUT 두개를 만들어준다


LOGIN은 로그아웃상태인 유저들에게만 보이도록 체크해주고

아래 트리거 팝업이라는게 생겼는데

눌러보면 내가 생성한 팝업리스트가 보이므로 선택해주면 끝!


그리고 LOGOUT은 현재 로그인중인 사람들에게 보여지도록 체크

그리고 바로밑에 체크박스는 전부에게 해당되는 내용이니깐 멤버와 관리자 모두 선택!


업데이트를 하고 내가 연습중인 워드프레스 홈페이지를 가보면,

위와같이 로그인 메뉴가 생겼다 오오!


한번에 성공하길 바라는 마음으로 조마조마하게 클릭했는데

"똭!" 완전 깔끔하게 팝업 로그인창이 떠준다ㅋㅋㅋ


그리고 당연하게도 아이디 비번을 입력하고 로그인하면

메뉴에는 LOGOUT이라고 변경되어있다

시행착오도 거의 없이 단번에 성공하다니 뿌듯하다ㅋㅋㅋ


다시 로그아웃을 하고 등록을 눌러보면~


깔끔하게 회원가입 페이지로 넘어가는 아름다운 결과를 만나게되었다

맨땅에 헤딩하듯 도전하는 워드프레스

아직 초반이지만 뭔가 하나씩 이뤄지고 있으니 이렇게 기쁠수가!

근데 아직 지난시간에 해결못본 프로필사진이 넘나 찝찝하다..