- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
wordpress plugin dev [wordpress 플러그인] 코스모스팜. 회원관리 1.메뉴에 로그인 넣기
2024.08.25 18:22
[wordpress 플러그인] 코스모스팜. 회원관리 1.메뉴에 로그인 넣기
코스모스팜은 케이보드로 유명한 워드프레스 플러그인 제작회사이다.
맨 처음에 읽은 책 '만들면서 배우는 워드프레스'나
홍마리오의 동영상 강의에서도
공지사항이나 자유게시판을 만들때
무료게시판인 케이보드를 다운받으라고 해서
아무 생각없이 다운받았고 설치했는데
케이보드의 밑에 있는
powered by KBoard를 삭제하고 싶었다..
그것이 나의 코스모스팜의 시작이었다.
각설하고.ㅋ
WP 멤버스로는 만족하지 못했던
깔끔한 화면에 대한 갈증을 해결해주었던
코스모스팜 회원관리 플러그인에 대한
사용법을 정리해보도록 하겠다.
1. 코스모스팜 회원관리 플러그인 다운받기
또 한번 더 말하는데
88,000원짜리 코스모스팜 회원관리 프로그램 하나만 달랑 구매하지 말고
11만원짜리 개인라이센스를 구매하는 것이
나같은 초보자에게는 훨씬 훨씬 후얼씬 이득이다.
음.. 나는 네이버페이로 구매했는데
다음과 같은 쿠폰 코드가 담긴 메일이 왔고
쿠폰 등록하기 버튼을 누르고
쿠폰 코드를 넣어서 등록하라는대로 등록했더니
다음과 같이 등록되었다는 메일이 왔다.
그러면 케이보드 밑에 있는 스토에에 들어가서
원하는 플러그인을 찾아서 바로 설치할 수 있다.
회원관리 플러그인 설치하고 활성화까지 하면 완료.
잘 안되면 아래 블로그를 참고하자.
2. wp-members 설치하기
이미 설치되어 있다면 이 단계는 패스.
플러그인에서 새로추가를 눌러
키워드로 wp members를 검색한 뒤
플러그인을 지금설치 하고
활성화 시킨다.
3. 로그인 페이지 만들기
코스모스팜 회원관리 프로그램을 사용하기 위해서는
3개의 페이지가 필수적으로 필요하다. (wp멤버스도 마찬가지)
로그인 페이지
회원가입 페이지
회원정보 페이지
먼저 로그인 페이지부터 만들어보자.
1_ 새페이지추가를 눌러서 새 창이 뜨면
2_ 제목에 로그인이라고 넣고
3_ 컨테츠 엘리멘츠에서
4_ 텍스트블럭을 설정한뒤
5_ 텍스트 블럭을 클릭한다.
3과 4는 빌더에 따라 없을수도 있고
중요한건 5번. 페이지 내용에
로그인 숏코드를 넣어주는 것이다.
관리자페이지에서 코스모스팜회원관리 플러그인을 활성화하면
회원가입관리라는 메뉴가 새로 생겼을텐데
거기서 설정을 누르면
각 기본페이지 숏코드를 확인할 수 있다.
로그인 숏코드는 아래 빨간 박스에 보이듯이
[cosmosfarm_members_login_form]이다.
위 숏코드를 복사해서 5번에 넣어주면 된다.
기존 wp멤버스를 사용하던 사람이라면
기존 숏코드를 코스모스팜 멤버스 로그인 폼으로 바꿔준다.
4. 회원 가입 페이지 만들기
같은 방법으로
회원가입(레지스터) 페이지도 만든다.
숏코드는 [wpmem_form register]로
wp멤버스 숏코드와 동일하다.
기존 wp멤버스 사용자는 건드리지 않아도 된다.
회원가입 페이지를 만들면서
해야 하는 것이 하나 더 있는데
회원 가입할 때 받을 정보를 설정해주는 것이다.
관리자 페이지의 설정>wp Members를 클릭하여
위의 필드 탭을 클릭하면
여러가지 회원정보를 받을 수 있게 되어 있다.
그중에 first name과 패스워드, 패스워드 확인을 체크한다.
원하는 정보는 다 체크해도 되지만
나는 최소한의 정보를 받도록 설정해보았다.
가입할 때 귀찮으니까..
표시에 체크가 되면 회원가입 화면에 표시되어 나오고
required에 체크가 되면 반드시 입력해야 회원가입이 되는 것이다.
체크를 하기 위해서는 오른쪽 편집 (빨간 사각형)을 누른다.
그냥 이 화면에서 막 클릭한다고 변경되는게 아니다.. ;;;
편집을 누르면 아래와 같은 화면이 나오는데
가운데의 표시? 필수?에 모두 체크를 하고
아래 필드 편집을 눌러 설정을 저장한 다음
return to Fields Table을 눌러서
위의 필드테이블로 돌아오면 된다.
5. 회원정보 페이지 만들기
같은 방식으로 새페이지 추가를 눌러서
회원정보(프로필) 페이지를 만든다.
숏코드는 [wpmem_profile register=hide]이다.
6. 페이지 설정하기
관리자페이지 > 회원가입관리 > 설정에서
로그인페이지와 회원가입페이지, 회원정보 페이지를
설정한다.
빨간버튼을 누르면 나의 모든 페이지들이 쭉 뜨는데
거기서 위의 숏코드가 적용된 해당 페이지를 선택하면 된다.
아래로 쭉 내려서
변경사항 저장을 꼭 누르는 것 잊지말자
7. 메뉴에 로그인 링크 추가
드디어 메뉴에 로그인을 추가하는 시간이다.
페이지 설정하는 곳 조금 위에 보면
메뉴에 로그인 링크 추가 라는 메뉴가 있는데
거기를 사용을 누루고
내가 추가할 메뉴를 선택한다.
나는 메인 메뉴 위에 넣을 것이므로 톱을 선택하였다.
그러면 자동으로!!!
로그인을 안했을 때는
로그인과 회원가입 메뉴가 보이고
로그인을 했을 때는
로그아웃과 회원정보 메뉴가 보인다.
간단하구나~!!!
그런데!
로그인 페이지가 이게 뭥미?
돈내고 산 플러그인이 왜 이지경이냐...ㅜㅜ
이럴때는 당황하지 말고
코스모스팜스레드로 간다.
케이보드 커뮤니티에
질문을 올리면 스레드봇님이
어찌나 친절하게 답변을 해주는지 어둠속의 광명같다...
내가 코스모스팜을 애정하게 된 이유도 바로 이 스레드봇님 덕분이다. .ㅜㅜ
엔폴드는 CSS가 과도하게 적용된 테마라서
그런 일이 벌어졌다면서
사용자정의하기에서 추가CSS에
#top .cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input { margin: 0; padding: 0 10px; width: 280px; line-height: 36px; font-size: 15px; border: 1px solid #cdcdcd; }
라고 넣으라고 가르쳐주었다.
무슨 뜻인지는 잘 몰라도 스레드봇님이 가르쳐준 대로 했더니
로그인 페이지도 아무 문제없이 잘 되었따..
으흐흐
코스모스팜 스레드는 사랑입니다.
위와 같이 메뉴 상단에 로그인 메뉴 말고 다른 메뉴나 소셜 아이콘을 넣고 싶다면 다음 포스트를 참고하세요.
[출처] https://m.blog.naver.com/cutecla/222063417116
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
