안녕하세요~^^

우편번호 검색 버튼은 어느 페이지에 추가하신 건지요?

1:1 게시판이 아닌 공개된 커뮤니티라 추가하신 코드가 있다면

어떤 코드를 추가하셨는지 에디터의 코드 스니펫 삽입 기능으로 코드를 올려주시면

보다 더 좋은 답변을 받으실 수 있습니다.

코스모스팜 회원관리 플러그인을 사용하시면

별도로 코드를 수정하지 않고 회원가입 페이지에서

우편번호/주소 검색 서비스를 추가하실 수 있습니다.

만약, 별도로 코드를 수정하신 경우라면 어떤 코드를 추가하셨는지 올려주시겠어요?

비회원으로도 확인 가능한 페이지 주소 알려주시면 로그인, 회원가입, 우편번호 검색 버튼 색상을

CSS 코드로 수정할 수 있을지 살펴보겠습니다.

고맙습니다.

add_filter( 'wpmem_register_form_rows', 'my_register_form_rows_filter', 10, 2 );

function my_register_form_rows_filter( $rows, $toggle ) {

$rows['zip']['row_after'] = '<input type="button" value="우편번호 검색" onclick="sample4_execDaumPostcode()">';

return $rows;

}

를 functions.php 에 삽입했습니다.

페이지 주소라 하심은 사이트 주소를 말씀하시는건지요?

joy25846.cafe24.com 입니다.

functions.php안에 js 폴더를 만들어

 //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
    function sample4_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var roadAddr = data.roadAddress; // 도로명 주소 변수
                var extraRoadAddr = ''; // 참고 항목 변수

                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                   extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraRoadAddr !== ''){
                    extraRoadAddr = ' (' + extraRoadAddr + ')';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample4_postcode').value = data.zonecode;
                document.getElementById("sample4_roadAddress").value = roadAddr;
                document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
                
                // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
                if(roadAddr !== ''){
                    document.getElementById("sample4_extraAddress").value = extraRoadAddr;
                } else {
                    document.getElementById("sample4_extraAddress").value = '';
                }

                var guideTextBox = document.getElementById("guide");
                // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
                if(data.autoRoadAddress) {
                    var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                    guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
                    guideTextBox.style.display = 'block';

                } else if(data.autoJibunAddress) {
                    var expJibunAddr = data.autoJibunAddress;
                    guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
                    guideTextBox.style.display = 'block';
                } else {
                    guideTextBox.innerHTML = '';
                    guideTextBox.style.display = 'none';
                }
            }
        }).open();
    }
</script>

zipcode.js 라는 파일이름으로 저장했습니다.

코드를 올려주실 땐 반드시 에디터의 코드 스니펫 삽입 기능을 이용해주세요.

그렇지 않으면 이상한 코드로 바뀌거나 질의응답 시 의사소통에 문제가 있을 수도 있습니다.

wpmem_register_form_rows 필터를 활용해서 zip 필드에 버튼을 추가하실 때

row_after가 아닌 필드를 활용해보시겠어요?

기존의 코드 대신 아래의 코드를 활용해보세요.

add_filter('wpmem_register_form_rows', 'wpmem_register_form_rows_2020_04_17', 10, 2);
function wpmem_register_form_rows_2020_04_17($rows, $toggle){
	$rows['zip']['field'] .= '<input type="button" class="zip-button" value="우편번호 검색" onclick="sample4_execDaumPostcode()">';
	return $rows;
}

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

아래의 코드를 추가해보세요.

#wpmem_reg #zip { width: 70%; }
#wpmem_reg .zip-button { width: 30%; }

위와 같이 코드를 적용하신 후

사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가하시면 각 버튼 색상을 변경하실 수 있습니다.

/* 위젯 로그인 버튼 색상 */
#wp-members .buttons { background: black; }

/* 회원가입 페이지 우편번호 검색 버튼 색상 */
#wpmem_reg .zip-button { background: black; }

/* 회원가입 페이지 회원가입 버튼 색상 */
#wpmem_reg input[type="submit"] { background: black; }

위의 코드에서 색상은 적절히 변경해주세요.

크롬 브라우저 개발자 도구(F12)를 활용하시면

CSS 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.

고맙습니다.

제대로 했는지 모르겠네요???

색깔이 검정색으로 바꿔야 하는 것 같은데 안되네요.ㅠㅠ

http://<blockquote class="imgur-embed-pub" lang="en" data-id="a/DhMzi3x"><a href="/threads/imgur.com/a/DhMzi3x"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

이전 댓글에 안내해주신 페이지 주소로 확인해보니

CSS 코드가 정상적으로 추가되어 있지 않은 듯합니다.

CSS 코드를 어떻게 추가하셨는지 알려주시겠어요?

고맙습니다.

링크에 그림파일을 2개 올렸는데...

테마편집기안에 style.css 안에 붙여넣기 했습니다.

http://<blockquote class="imgur-embed-pub" lang="en" data-id="a/sLmCFqy"><a href="/threads/imgur.com/a/sLmCFqy"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

안녕하세요.

링크가 정상적으로 동작하지 않습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.

고맙습니다.

https://imgur.com/3rpBUW5

https://imgur.com/pt9w2ig

이전 댓글에 올려주신 페이지 주소로 확인해보니

로그인, 회원가입 버튼은 검정색으로 색상이 정상적으로 변경된 듯합니다.

우편번호 검색 버튼에도 검정색 버튼으로 적용되게 하시려면

wpmem_register_form_rows 필터에 추가하신 태그에 zip-button 클래스를 추가해보시겠어요?

이전 댓글에 안내해드린 코드를 잘 확인해보셔야 할 듯합니다.

고맙습니다.

https://imgur.com/fxYmJLq

제가 질문드린대로 다 되었습니다. 친절한 답변에 감사드립니다.

제 컴에서는 바로 색깔이 바뀌지는 않고 다음날이 되어야 바뀌며 다른 이의 컴에서는 색깔이 바뀌었음을 확인할 수 있었습니다.^^

그런데 우편번호 검색키를 누르면 주소창이 떠야 하는데 안 뜨네요.ㅠㅠ

자꾸 귀찮게 드려서 죄송합니다.

안녕하세요.

올려주신 페이지 주소에서 우편번호 검색 버튼 클릭 시

크롬 브라우저 개발자 도구(F12) Console 창에

아래와 같은 에러 메시지가 표시됩니다.

"Uncaught ReferenceError: sample4_execDaumPostcode is not defined"

해당 문구가 표시되는 건

추가하신 sample4_execDaumPostcode 자바스크립트 함수를 인식하지 못하기 때문입니다.

워드프레스에서 스크립트를 추가하시려면

별도로 파일을 만드신 후 wp_enqueue_script 함수를 사용하시거나

wp_head 액션에 추가해서 사용해보시겠어요?

고맙습니다.

죄송합니다.

아직 공부 중이긴 한데....

위의 답변을 주신 내용을 이해를 못했습니다, 글구 제가 서버에 뭘 잘못 넣었는지 색깔이 다시 원위치로 돌아왔습니다.ㅠㅠㅠ

https://imgur.com/emmpl6M

https://imgur.com/fxaQjx6

https://imgur.com/FcHGcbe

첨부파일 올립니다.

안녕하세요.

CSS 코드가 추가되어 있지 않은 듯합니다.

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드 쪽에 추가해보시겠어요?

wp_enqueue_scripts 액션에 wp_enqueue_script 함수를 사용할 때

filename.js 부분은 실제 파일이 맞는지 확인해보셔야 할 듯합니다.

만약, 다른 경로에 있다면 올바른 경로로 설정을 해보세요.

고맙습니다.

최근에 주신 답변도 제가 이해를 못하고 있습니다.ㅠㅠ 

제가 함수를 전혀 알지를 못합니다.ㅠㅠ

아이디 중복확인과 실명인증을 WP-member에서 할 수 있는지요?

할 수 있다면 어떻게 해야 하나요?

안녕하세요.

직접 별도의 코드를 추가하신 경우

저희 쪽에서 도움을 드리는 데 한계가 있습니다.

회원가입 시 필드 중복체크 및 SMS본인인증은

코스모스팜 회원관리 플러그인을 사용하시면 가능합니다.

워드프레스 관리자 -> 회원가입관리 -> 중복확인 설정 페이지에서

필드 중복 체크 설정을 하실 수 있습니다.

본인인증은

워드프레스 관리자 -> 회원가입관리 -> 본인인증 페이지에서 설정하실 수 있습니다.

실제 본인인증 기능을 사용하기 위해서 아임포트와 다날 가입이 필요합니다.

본인인증 서비스 가입은 아임포트에 문의하시면 상담받으실 수 있습니다.

https://www.iamport.kr/pgForm/danal

고맙습니다.