코스모스팜 회원관리 텍스트 입력란 변경

안녕하세요 문의드립니다.

 

1번 질문

아래 웹사이트처럼 아이디와 패스워드 라벨을 텍스트 입력란 안에 넣고 사용자가 입력을 시작하면 사라지게 하는 형태로 만드려면 어떻게 해야될까요?

참고 웹사이트

 

2번 질문

아이디를 입력하기 위해 입력란을 클릭하면 사용자가 이전에 입력했던 저장된 데이터(아이디)가 밑에 뜨고 저장된 데이터(아이디)에 커서를 갖다대면 텍스트 입력란에 저장된 데이터가 입력되면서 입력란 배경색이 노란색으로 바뀌는데 없애려면 어떻게 해야될까요?

 

3번 질문

아이디나 비밀 번호를 입력하기 위해 입력란을 클릭하면 1px의 검정색 보더가 나오게 하고싶은데 어떻게 하면 될까요?

참고 웹사이트

답변 부탁드립니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    1. 코스모스팜 회원관리 플러그인의 회원가입 페이지에서

    아이디와 패스워드 쪽에 필터를 이용해서 placeholder를 추가해주시면 됩니다.

    워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    add_filter('wpmem_register_form_rows', 'my_register_form_rows', 999, 2);
    function my_register_form_rows($rows, $toggle){
    	if(isset($rows['username'])){
    		$rows['username']['field'] = '<input name="username" type="text" id="username" value="" class="textbox" placeholder="아이디" required>';
    	}
    	if(isset($rows['password'])){
    		$rows['password']['field'] = '<input name="password" type="password" id="password" class="textbox" placeholder="비밀번호" required>';
    	}
    	if(isset($rows['confirm_password'])){
    		$rows['confirm_password']['field'] = '<input name="confirm_password" type="password" id="confirm_password" class="textbox" placeholder="비밀번호 확인" required>';
    	}
    	return $rows;
    }

    위의 코드에서 아이디, 비밀번호, 비밀번호 확인 부분은 적당한 문구로 수정해주시면 됩니다.

     

    2. 말씀하신 부분은 코스모스팜 회원관리 플러그인과는 관련 없는 듯합니다.

    해당 브라우저의 자동완성 기능은 아닌지 확인해보시겠어요?

     

    3. 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    .cosmosfarm-members-form input[type=text]:focus,
    .cosmosfarm-members-form input[type=email]:focus,
    .cosmosfarm-members-form input[type=date]:focus,
    .cosmosfarm-members-form input[type=url]:focus,
    .cosmosfarm-members-form input[type=number]:focus,
    .cosmosfarm-members-form input[type=password]:focus { border: 1px solid black; }

    CSS의 focus에 대한 자세한 내용은 아래의 링크를 참고해보시겠어요?

    https://www.w3schools.com/cssref/sel_focus.asp

    고맙습니다.

  • 답변 감사합니다!

    2번과 3번은 해결되었는데 1번은 아직 해결되지 않아서 다시 한 번 질문드립니다.

    로그인 화면에서 개발자 도구를 사용해 로그인 필드 코드를 읽어보면

    <input name="log" type="text" id="log" class="username">

    위처럼 나오고 비밀번호는

    <input name="pwd" type="password" id="pwd" class="password">

    이렇게 나옵니다.

     

    작성해주신 코드와 내용이 맞지 않아서 작동되지 않는걸까요?

    수정한다면 어떻게 수정해야 할까요?

     

    추가 질문

    1. 참고 사이트처럼 하기위해 라벨들을 좌측 정렬시키고 필드를 우측 정렬 시킨 후 간격 조정을 하려는데 어떻게 하면 좋을까요?

    라벨에 float: left를 줘서 필드와 라벨을 같은 가로 선상에 놓는 것 까지는 됐는데 간격 조정이 어렵습니다.

    아이디라는 필드와 라벨을 하나의 div로 묶어서 클래스 값을 줄 수 있는 방법이 있나요?

    현재 제 웹사이트 상태를 참고하시고 답변 주시면 감사하겠습니다!

    2. 회원가입 페이지는 ftp에서 어떤 경로로 찾아서 어떤 파일을 열면 수정할 수 있나요? 스킨/디폴트/다음 어떤 파일을 열어야 하나요?? 

    3. wp-members의 아이디 가입 규칙 (ex. 영문+숫자 10글자 이상)은 뭔가요?

  • 안녕하세요.

    올려주신 페이지 확인해보니 placeholder는 정상적으로 적용이 된 듯합니다.

    1. 라벨과 필드를 한 줄로 표시하시려면

    직접 추가하신 아래의 코드들은 지워주세요.

    .cosmosfarm-members-form select, .cosmosfarm-members-form input[type=text], .cosmosfarm-members-form input[type=email], .cosmosfarm-members-form input[type=date], .cosmosfarm-members-form input[type=url], .cosmosfarm-members-form input[type=number], .cosmosfarm-members-form input[type=password] { width: 350px !important; position: absolute !important; right: 25% !important; }
    .text { float: left !important; position: absolute !important; left: 25% !important; }

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    .cosmosfarm-members-form label { float: left; width: 35%; }
    .cosmosfarm-members-form .div_text,
    .cosmosfarm-members-form .div_checkbox { float: left; width: 65%; }

    위의 코드에서 퍼센트는 적절히 수정해주시면 됩니다.

     

    라벨과 필드를 감싸는 레이아웃을 추가하시려면

    워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 활용해보시겠어요?

    add_filter('wpmem_register_form_rows', 'my_register_form_rows', 99, 2);
    function my_register_form_rows($rows, $toggle){
    	if(isset($rows['username'])){
    		$rows['username']['row_before'] = '<div class="username_wrap">';
    		$rows['username']['row_after'] = '</div>';
    	}
    	return $rows;
    }

    wpmem_register_form_rows 필터에 대한 자세한 내용은

    아래의 링크를 참고해보세요.

    https://rocketgeek.com/plugins/wp-members/docs/filter-hooks/wpmem_register_form_rows/

     

    2. 회원가입 페이지는 WP-Members 플러그인에서 지원하는 필터로 수정하실 수 있습니다.

    자세한 내용은 아래의 링크를 참고해보시겠어요?

    워드프레스 회원가입 화면 디자인 수정 방법 - WP-Members 플러그인

     

    3. WP-Members 플러그인의 아이디는 영문과 숫자만 포함할 수 있으며

    4글자 이상, 60자를 넘을 수 없습니다.

    고맙습니다.

  • 친절한 답변 해주셔서 감사합니다!!

    덕분에 잘 해결됐습니다!ㅎㅎ

     

    추가 질문

    체크박스 디자인은 어떻게 수정할 수 있을까요?

    지금 잡히는 ID 값 #privacy_policy과 class 값 .cosmosfarm-members-form input[type=checkbox] 모두 해봤는데 css가 적용되지 않습니다

    어떻게 하면 수정할 수 있을까요?

  • 추가 질문입니다...!

    회원가입 폼 내에 새로운 div를 추가 시키려면 어떤 코드를 써야하나요?

    이벤트 배너 또는 필드 사이에 수평선 등을 추가시키고자 하는데 어떻게 하면 될까요?

  • 질문 정리해서 다시 올립니다..! 죄송합니다!

     

    추가 질문

    1. 체크박스 디자인은 어떻게 수정할 수 있을까요?

    지금 잡히는 ID 값 #privacy_policy과 class 값 .cosmosfarm-members-form input[type=checkbox] 모두 해봤는데 css가 적용되지 않습니다

    어떻게 하면 수정할 수 있을까요?

     

    2. 회원가입 폼(fieldset) 내에 새로운 div를 추가 시키려면 어떤 코드를 써야하나요?

    필드 사이에 수평선 또는 이벤트 배너, 약관 링크 등을 추가시키고자 하는데 어떻게 하면 될까요?

     

    3. 로그인, 회원가입 등 폼에서 필수 정보 미기입 또는 잘못된 입력으로 실패할 경우 뜨는 실패 메세지를 팝업으로 변경하는 방법은 어떻게 되나요?

    (그 외 프로필업데이트 성공, 비밀번호 변경 성공, 실패 등 회원관리에 관련된 모든 알림 메세지를 팝업 형태로 바꾸고 싶습니다!)

     

    제가 너무 많이 여쭙는 것 같아서 죄송합니다ㅠㅠ

  • 안녕하세요.

    1. 체크박스 디자인은 어떻게 수정하시려는지 알려주시겠어요?

     

    2. 코스모스팜 회원관리 플러그인의 회원가입 레이아웃은

    WP-Member 플러그인의 Register & User Profile Update Form 쪽 필터를 활용해보시겠어요?

    https://rocketgeek.com/plugins/wp-members/docs/filter-hooks/

     

    3. 말씀하신 부분은 저희도 연구해보고 좋은 방법이 있다면 안내해드리겠습니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기