KBoard를 활용하여 로그인 페이지 만들기

오늘은 Kboard의 또 다른 기능인 회원 관리 기능을 통해서 로그인 페이지 만들기에 도전!!!! 

사실 워드프레스의 대부분 제공하는 플러그인들이 외국에 맞춰진 것들이 대부분이라 전혀 내 취향에 맞는 플러그인이 없었다. 그나마 자주 사용하던 Ultimate member가 있엇지만, 언어의 장벽과 커스터마이징 하는 것이 다소 복잡해.... 더 나은 Member관리 플러그인만 있다면 언제나 갈아탈 준비를 하고 있던 찰나 좋은 플러그인이 나타났다!!! 다른 것 보다 우선 한국형 회원관리 게시판이라 너무 마음에 든다 !!! 크크크

다만..... 회원관리 플러그인은 일반 KBoard와는 다르게 무료가 아닌 유료 결제가 필요하다는 점..... 

그러나, 워낙 잘만들어져 있어 충분히 그럴만한 가치가 있다. 

나만의 예쁜 홈페이지를 만들기 위해서라면!!!!!!..... ㅠㅠ

암튼...

코스모스팜 회원관리 로그인 페이지 만들어 보기.

1. 우선 http://www.cosmosfarm.com/wpstore/product/cosmosfarm-members 에 접속을 하여 코스모스팜 회원관리를 다운 받자 !!!

다운 받기 전에 기능을 살펴보면 

소셜로그인 기능과 우커머스(쇼핑플러그인)등 몇몇 눈에 띄는 좋은 기능들이 있는 것을 볼 수 있고

이 코스모스팜 회원관리를 설치하기 이전에 WordPress 내에 WP-Member가 먼저 설치가 되어 있어야만 한다!!!

처음에 무작정 깔았다가 왜 안뜨지 하는 고민은 하지 마세요~

Word Press 플러그인 설치하기에 WP-Members라 검색을 하면 아래와 같은 

Members Framework이 있고 이를 먼저 설치 후 활성화 시켜주자!!!

그 다음 플러그인 추가하기를 눌러 홈페이지에서 받은 코스모스 회원관리 플러그인을 업로드 시키자!! 

업로드시에는 반드시 ZIP파일로 업로드를 한 뒤, 활성화 눌러 주는 것 잊지 말 것!!~

ZIP 파일로 업로드하고 ~ 

활성화를 시키고 나면 WordPress 메뉴바에 회원가입관리라는 창이 생성되게 된다 !!

이제 절반은 왔다 

2.  회원가입관리를 눌러 보면 아래와 같이 다양한 기능들을 한 눈에 살펴 볼 수 있다!! 오오 ~ 제공되는 두가지 스킨이 모두 깔끔하다!!

여기서 ~ 워드프레스의 플러그인은 기본적으로 숏코드란 것을 제공해주는데, 숏코드만 있으면 내가 새로 만들고자하는 새로운 페이지에서 숏코드를 입력해주게 되면, 내가 설치한 플러그인을 불러 올 수 있다. 그렇기 때문에 플러그인을 설치후에 숏코드를 복사 해서 다양한 페이지에 활용하여 적용시키면 더 유용한 홈페이지가 만들어 질 것 같다!! 

설정페이지에서 로그인 페이지와 회원관리 페이지 회원정보페이지에 대한 숏코드가 보인다 !! 이걸 활용하면 끝 !!

[wpmem_form login] / [wpmem_form register] / [wpmem_profile]

숏코드는 만들고자 하는 로그인 / 회원가입 / 회원 정보 페이지에 붙여 넣기만 하면 된다.

페이지에서 새로운 페이지를 생성하고 아까 복사한 숏코드를 넣어주고~ 

다시 관리 설정페이지로 돌아와 로그인페이지와 회원가입 회원정보란에 만든 페이지를 셀렉트 해주고 

아래 설정 저장하기 클릭!!! 

완료 !!

짠!!!!!

??

???

??

?

뭔가 이상하다. 글씨가 짤린다 !!!! ㅠㅠ 뭐지..... Salient Theme의 문제인가...??

하지만 당황하지 않고 크롬 브라우저를 통해 페이지 검사(크롬 브라우저에서 F12를 누르면 쉽게 볼 수 있다)를 해보자 !!

확실한 이유는 잘 모르겠으나~ 아마 Padding 값이 너무 많이 들어가서 그런게 아닐까 싶어 Padding 값을 수정해보니 이쁘게 나온다 !!! 

KBoard는 쉽게 CSS를 수정할 수 있게 도와주기 때문에 ~ 아까 F12를 통해 찾은 CSS값을 KBoard 대시보드에 들어가 입력을 해주면 쉽게 끝난다!! 

내가 넣은 CSS 값

body[data-form-submit="regular"] .container-wrap input[type=submit], body[data-form-submit="regular"] .container-wrap button[type=submit], body[data-form-submit="see-through"] .container-wrap input[type=submit], body[data-form-submit="see-through"] .container-wrap button[type=submit] {padding:1px 22px !important;}

이 값을 넣고 업데이트 !!

과연!!...

!!

!!

!!

짠!!! 와 로그인 화면이 이쁘게 완성되었다!!

내일은 로그인 페이지 아래 소셜로그인 기능을 넣어 소셜 로그인 연동을 구현해 봐야겠다.

요세 트렌드는 역시 소셜 로그인이지 !!

어느정도 홈페이지가 이쁘게 완성되어 가는 느낌??? 이다!