안녕하세요.

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

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

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

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

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

고맙습니다.

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

추가 질문

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

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

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

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

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

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

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

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

추가 질문입니다...!

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

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

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

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

추가 질문

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

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

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

안녕하세요.

올려주신 페이지 확인해보니 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자를 넘을 수 없습니다.

고맙습니다.

답변 감사합니다!

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글자 이상)은 뭔가요?

안녕하세요~^^

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

고맙습니다.