우편번호검색키 이동과 버튼 색깔 바꾸기

제가 js와 php의 기본도 몰라서 html부터 공부하고 있습니다.

그런데 홈피를 먼저 만들다보니 급하게 바꾸고 싶은 부분이 생기네요.ㅠㅠ

WP-members의 플러그인을 이용하여 로그인 위젯을 만들고 3주를 고생하여(ㅎㅎㅎ) 우편번호 검색란은 functions.php에 카피하여 넣었습니다.

그런데 인터넷에 나온 php내용이 현재 업그레이드 된 WP-members는 항목이 없어서 버튼 만드는 것을 functions.php 맨 아래에 카피해서 넣었더니 우편번호 옆에 생기는게 아니라 도로명주소 앞에 만들어졌습니다.

어떻게 옮기는지 상세히 알려주시면 감사하겠습니다.

그리고 로그인, 회원가입, 우편번호검색 버튼 색깔을 바꾸고 싶습니다. 이 파일은 혹 어디에 들어가야 수정할 수 있는지요?

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

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

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

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

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

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

     

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

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

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

     

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

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

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

    고맙습니다.

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

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

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

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

  • 안녕하세요.

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

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

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

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

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

    고맙습니다.

  • 죄송합니다.

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

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

     

  • 안녕하세요.

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

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

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

    "Uncaught ReferenceError: sample4_execDaumPostcode is not defined"

     

    해당 문구가 표시되는 건

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

     

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

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

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

    고맙습니다.

  • https://imgur.com/fxYmJLq

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

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

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

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

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

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

     

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

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

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

    고맙습니다.

  • https://imgur.com/3rpBUW5

    https://imgur.com/pt9w2ig

  • 안녕하세요.

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

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

    고맙습니다.

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

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

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

    고맙습니다.

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

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

     

    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 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.

    고맙습니다.

  • 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 라는 파일이름으로 저장했습니다.

  • 안녕하세요.

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

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

     

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

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

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

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

     

    본인인증은

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

     

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

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

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

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기